Error While Using The Custom Fonts in CSS

Error while using the custom fonts in css

Unfortunately, it isn't as straight forward as this. For a truly cross-browser solution, you will need to reference more than just the TTF version.

This question: How to embed fonts in HTML? has a full list, and links to Paul Irish's "Bulletproof web fonts" blog entry that caters for all the browser quirks.

If you're in a hurry, and not interested in the specifics, FontSquirrel's Bulletproof @font-face generator seems to utilize the hints from the blog post.

Add custom font css with @font-face NOT WORKING

So after testing it on my site I have found a few issues:

• Your css class for p is not correct.
• In the font url list you have comma separeeted insted of semicolumn
• I have tried the same steps as you have, and get only woff and woff2 files. (So you need to remove the eot,svg paths from css)

My code fo one example:

<style>
@font-face {
  font-family: 'caviar';
  src: url('font/caviardreams-webfont.woff2') format('woff2');
  src: url('font/caviardreams-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

p{
  font-family:caviar;
    font-weight:normal;
  font-style:normal;
}
</style>

<div>
  <p>Test</p>
</div>

Hope this helps,

Using custom @font-face in CSS is not working in any browser

It turns out that I was using the "Files\Fonts\" as the path of the font, although since it was the css file I was using, it was already in the "Files" folder so I just needed it to change to "Fonts\KeepCalm.tff". Stupid mistake but it's easy to miss.

Getting Error on Importing Custom Fonts using SASS

To be sure I would have to see a screenshot of your fonts folder, but I think the font isn't found because of typo in the font-face declaration. True-type font files usually have a .ttf extension instead of .tff.

That means you would have to adjust your @font-face declaration from:

@font-face {
   // omitted font-family, weight and style for clarity
   src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}

to:

@font-face {
   // omitted font-family, weight and style for clarity
   src: url("../fonts/Merriweather/Merriweather-Italic.ttf") format("truetype");
}

At this point, so in variables.scss, I usually also declare a font variable for each font (type) for usage in the rest of my SASS files, e.g $merriweather--italic: "Merriweather-Italic", serif;

Therefore you can use these variables in your global.scss as such:

h1{
  font-family: $merriweather--italic;
  font-size: 94px;
}

I'm using a custom font with font-face but it does not work

Amirmohammad!

You need to use @font-face to define and use custom font.

You also can use few @font-face directives with the same font family name and different font-weight and font-style for different fonts, for instance, Roboto Bold and Roboto Regular. You need to use URLs to different font files. Look at the demo below.

I also recommend you to convert ttf files to woff2 and woff and not to use ttf if you don't need to support old browsers. ttf fonts are heavy and you probably don't need them. There're online and command line converters.

You can even define URLs to woff2 and woff at the same @font-face, just define the most modern woff2 higher than woff and other older file extensions, the browser will prioritize them from top to bottom. If the browser supports the first font extension, then it will use the first one. If not, it will use the next one and so on.

You can also try to define the path to your font absolutely, from the root folder of your site starting with a slash without a dot, like that: /Assets/font/your-font.ttf. Or you can try to use relative path from the current css file. For instance, if your font and css folders are in Assets, and the current css is in css folder, your path to the font will be ../font/your-font.ttf. Two dots mean 'go one folder level upper'.

@font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        src: url("./Assets/fonts/Roboto-Regular.woff2") format("woff2"),
             url("./Assets/fonts/Roboto-Regular.woff") format("woff"), 
             url("./Assets/fonts/Roboto-Regular.ttf") format("ttf");
    }
    
@font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 700;
        src: url("./Assets/fonts/Roboto-Bold.ttf") format("ttf");
    }    

body {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal; 
    /* This rule makes text typed with Roboto Regular defined with the first @font-face */
}

.h1 {
    font-family: "Roboto";
    font-weight: 700;
    font-style: normal; 
    /* This rule makes text typed with Roboto Bold defined with the second @font-face. 
    Look at different font-weight values in body and this .h1. font-families are the same. */
}

Cannot use custom font in javaFX using CSS Styling

@font-face can work BUT:

1. It needs to be first in your CSS file.

2. It cannot use a leading slash in the src URL.

3. The src URL must locate either

   • a web font via a valid full URL, e.g. http:, https: or file: protocols OR
   • to get it as a resource, it must be a relative path to the CSS file containing the @font-face directive.

If that is all set up correctly, then the instructions in the following answer work fine (verified with JavaFX 17):

• JavaFX custom Fonts

An example URL that would work for the resources defined in the question is a src URL relative to the CSS file:

src: url("fonts/Pixeboy.ttf"); 

assuming that the font is actually located at that relative position to the CSS file referencing the @font-face.

When I tested, I used the CSS and fonts linked from the answer above.

Troubleshooting

1. If you use a leading slash in the src URL for @font-face (for example src: url("/fonts/Pixeboy.ttf");), you will get the following message and the font will not be loaded:

   Jan 12, 2022 2:31:09 PM javafx.css.CssParser reportException
   WARNING: Please report java.lang.NullPointerException at:
   

   The error message will be generated and the font will not load even if the path is correct to locate the font file from the root of the class/module path.

2. If you specify a location for the font which does not exist (for example src: url("wrongfoldername/Pixeboy.ttf");, you will get the following error message and the font will not load:

   Jan 12, 2022 2:43:18 PM com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
   INFO: Could not load @font-face font [file:/<build-output-dir>/wrongfoldername/Pixeboy.ttf]
   

---

Related Topics