I feel like I must be overlooking something very simple. I have been using a single custom font with a normal font face:
@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
Everything works perfectly when I use this font, but how do I add another custom font? I've attempted separating the next one by comma or adding a completely new font face, but I just can't seem to get the second font to work.
To include an additional font using @font-face, you can follow these steps:
@font-face {
font-family: NewFont;
src: url('NewFont.ttf');
}
@font-face {
font-family: AnotherFont;
src: url('AnotherFont.ttf');
}
If the second font is not displaying correctly, double-check that the font name and file name are spelled correctly, clear your browser cache, ensure there are no conflicts with fonts on your operating system, etc.
This is the approach I take in my CSS stylesheet
@font-face {
font-family: FontName1;
src: url("fontname1.eot"); /* IE */
src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
@font-face {
font-family: FontName2;
src: url("fontname1.eot"); /* IE */
src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
@font-face {
font-family: FontName3;
src: url("fontname1.eot"); /* IE */
src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}
If you're experiencing difficulties with the font not displaying correctly, I've encountered a similar issue in the past. The problem often lies in ensuring that the font-family: name matches the actual font name provided.
An easy way to resolve this is to install the font and take note of its display name.
For instance, I once used Gill Sans on a project, only to discover that the actual font was labeled as Gill Sans MT. Paying attention to spacing and capitalization is also crucial for accuracy.
I hope this information proves helpful.
Font enthusiasts, make sure to visit fontsquirrel. They offer an amazing web font generator that creates a customized stylesheet for your chosen font (be sure to check out the "@font-face kit"). You can easily include this stylesheet in your own design or use it as a starting point.
If you're looking to use multiple font faces, it's actually quite simple. Here's an example of how I've done it in the past:
<!--[if (IE)]><!-->
<style type="text/css" media="screen">
@font-face {
font-family: "Century Schoolbook";
src: url(/fonts/century-schoolbook.eot);
}
@font-face {
font-family: "Chalkduster";
src: url(/fonts/chalkduster.eot);
}
</style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
<style type="text/css" media="screen">
@font-face {
font-family: "Century Schoolbook";
src: url(/fonts/century-schoolbook.ttf);
}
@font-face {
font-family: "Chalkduster";
src: url(/fonts/chalkduster.ttf);
}
</style>
<!--<![endif]-->
One thing to keep in mind is that fonts may behave differently across various browsers. While font face works on older browsers, using eot files instead of ttf ones is recommended.
This is why I prefer to include my fonts in the head section of the html file and utilize conditional IE tags to specify whether to use eot or ttf files.
If you ever need to convert ttf to eot for this purpose, there's a helpful website where you can do so for free online at .
I hope this information proves to be useful!
I am working on an email and I want an image to only show up on mobile devices. To achieve this, I created an empty <td> with a span inside where I styled the span to have a background image. However, my issue is that I want the image to occupy an e ...
After using NetBeans for a while, I am now considering making the switch to Eclipse. Everything seems fine, but one thing that is bothering me is that Eclipse does not provide CSS class proposals like NetBeans does. In NetBeans, whenever I use or create a ...
I'm facing an issue with my CSS code and I need your help to figure out what's wrong. I believe it's a simple problem that someone can quickly identify just by looking at the code. Any assistance would be greatly appreciated! Here is the co ...
Greetings! I have come across this contact form code: /* Custom Contact Form Styling */ input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: v ...
Hey everyone, I'm having an issue with styling a drop down menu that is populated by JavaScript. I've tried different things but nothing seems to be working. Any suggestions on how I can style the elements in the drop down? <form action="" me ...
I have a scenario where I have two divs named left and right. The left div contains a list of bullets (li elements) and is floated to the left, while the right div has text and HTML content. At times, either the left or the right div may be taller than the ...
After reading numerous recommendations on the subject, none of them seem to be effective in my particular situation. The issue lies with a table that is nested within a container ('div' element) as shown below: <div class="container"> ...
Having an issue with my image slider - when clicking on the previous image button, the animation takes longer compared to when clicking on the next image button, even though the animation duration is set to be the same for both. Any idea why this might be ...
Many Bootstrap 4 grid layout demos feature columns within rows, but is it considered improper to have rows within columns? For example: <div class="col col-md-6"> <div class="row"> </div> </div> ...
Is there a way to detect when a user moves the mouse outside of the view-port, even if they are holding down the mouse button (for example, if the mouse is on the browser address bar)? In the code below, I am currently using mouseout and mouseleave to det ...
Can someone help me style table cells that have contentEditable set to "true"? I've tried various CSS selectors like td[contenteditable], td[contenteditable=true], and td[contenteditable="true"], but none seem to work. Is there a specific selector for ...
I am facing a strange issue with the arrangement of elements in my container div. I have set them to display: inline-block, and they are supposed to expand horizontally if the contents exceed the device width. However, there is an unexpected margin between ...
var select_all = document.getElementById("select_all"); //reference to select all checkbox var checkboxes = document.getElementsByName("testc"); //retrieving checkbox items //function to select all checkboxes select_all.addEventListener("change", function ...
I'm having a hard time getting my background-image to show, even though I know it should be an easy fix. Here's the code for the div class where I want the background to display: .sun-face{ background-image: url("./images/Sun_face.svg"); } ...
I'm currently working on aligning my webpage in the center using the following CSS: .wrapper { display: flex; align-items: stretch; background: #fafafa; /*max-width: 1520px; */ box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1); text ...
I am facing an issue with my webpage that consists of 6 small images and one large image in the center, made up of six layers each containing one image, similar to this example: http://jsbin.com/onujiq/1/. I have set the z-index property of all center imag ...
I've been grappling with this issue for hours and could really use some assistance. My goal is to create a Chat component that allows vertical scrolling, but I've hit a roadblock. Here's a simplified version of the problem on Codesandbox: ht ...
I have a group of mat-icons that are automatically generated, meaning I cannot assign them ids or classes. The only way to distinguish between them is by their names: <mat-icon role="img">details</mat-icon> <mat-icon role="img ...
Is there a way to align three divs horizontally, evenly spaced, in a manner that positions the rightmost element at the center of the page? ...
I am trying to create a div element that has a width equal to the viewport of the browser. However, I am encountering issues when applying the CSS property width:100vh to the body element. Here is my code snippet: body { font-family: Staatliches; fo ...