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 want to ensure that the parent navigation item is highlighted when a user is on a child page based on the URL. For example, if the user is currently viewing foo1-child and the parent is foo1, I need to apply the active class to Foo 1: http://foo.com/foo ...
Currently, I am attempting to place a logo on my WordPress site right at the top of the header above the menus and in the center. Even though I've positioned it at the top, I'm struggling to align it horizontally in the center. I've experime ...
Can someone help me create square divs in HTML 5, similar to the example shown? I have written this HTML5 Code - what should I include in the CSS file to achieve the desired outcome? (If Bootstrap can be used, please provide the necessary classes instead ...
I have successfully created an image carousel. Encountered Challenges: The last slide is displayed, but the counter shows the first slide. How can I resolve this issue? When clicking play, it continues to advance the count. Is there a way to make it ...
Having trouble with a blurry pop-up form when clicking the button? Check out the code I've used below: <button class="btn btn-default" data-toggle="modal" data-target="#myModal">ENQUIRE NOW</button> ...
I am currently working on integrating a FAQ section into my website (not yet live, so I cannot provide a link). However, I am facing some minor CSS issues that I am struggling to resolve. The problem lies in a panel that is meant to display as shown below: ...
I have developed a sleek application featuring a login form, dashboard, registration page, and account page. Each of these pages has its own unique route. To maintain consistency across all pages, I have included a shared header and footer by inserting < ...
I am currently exploring Reactstrap and aiming to ensure a specific Card adjusts according to the size of the window by setting its aspect ratio using percentages rather than pixels. Interestingly, while adjusting the width works as desired, I'm faci ...
I have a React app where I created a card with specified min width and height, containing only a header. I want to add flexbox that occupies the entire left space with justify-content="center" and align-items="center". This way, when I insert a circular pr ...
I need to export two tables, each measuring 7cm×15cm, to a PDF file with A4 portrait paper size using the browser's "Save to PDF" option in the print tool. My goal is to center these two tables vertically on the A4 paper. If that proves difficult, I ...
Looking for some guidance as a javascript/jquery beginner - I am utilizing Bootstrap along with data-toggle and collapse classes to display or hide divs. I have been searching online trying to find a solution that will maintain the state of all divs, wheth ...
I've been attempting to establish a row height of 30px for a table (https://material-ui.com/components/tables/), but it seems that the minimum I can set is 53. Why is this restriction in place? How can I adjust the row height to 30px using CSS based ...
I need some help with reducing the space between the individual content (1, 2, 3, 4) and its border in this Fiddle. As a newcomer to Flexbox, I'm unsure if there's an easy solution to this issue. Here is a visual representation of what I mean: ...
Hi there! I'm new to coding and just started learning HTML and CSS. My question is: How can I change the color of buttons once they are clicked? <div class="icon-bar"> <a href="#"><i class="fa fa-search" ...
Having trouble setting up JS on my Django web app, despite reading through the documentation and previous queries. Using the Django dev server with the following file structure: mysite/ __init__.py MySiteDB manage.py settings.py ...
I'm looking to customize the background, font style, and outline for both open and closed elements in the code snippet below: a.innerHTML = "We are Open now now."; a.innerHTML = "We are Closed, arm."; Additionally, I want to appl ...
After successfully installing clean-css via npm command line, I was eager to start using it to concatenate and minify some css files. However, my excitement quickly turned to frustration when I encountered this error: 'cleancss' is not recognize ...
I'm currently working on adding a search menu to the navbar in two different designs - one for screens below 767px and another for screens above 767px. Although I have been successful in expanding the search bar, I am facing issues with the correct p ...
On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...
I'm designing a game user interface with a money indicator. Let's imagine the player has 0 dollars in their wallet, it should appear like this: https://i.stack.imgur.com/35eoh.png Please note that it is located in the upper right corner. The p ...