CODEWITHSUNDEEP
htmlcsswebpackfonts
Vera
Vera

Reputation: 283

Unable to load fonts

I get the following error when I try loading fonts into the Spectacle boilerplate:

Failed to decode downloaded font: http://localhost:3000/assets/fonts/Overpass-Bold.ttf
OTS parsing error: invalid version tag

I've added a format type, and am loading my styles via a style tag in my html file.

Also, I thought that maybe it's a webpack issue, so I've also added this into the webpack config file: 

{
  test: /\.ttf$/,
  loader: "url-loader?limit=100000&mimetype=application/font-ttf"
}

<style>
  @font-face {
    font-family: "Bold";
    src: url("./assets/fonts/Overpass-Bold.ttf") format('truetype');
  }
  @font-face {
    font-family: "Regular";
    src: url("./assets/fonts/Overpass-Regular.ttf") format('truetype');
  }
  @font-face {
    font-family: "Light";
    src: url("./assets/fonts/Overpass-Light.ttf") format('truetype');
  }
</style>

Could anyone guide me as to what could be wrong and I'm not able to load my fonts?

enter image description here

Upvotes: 2

Views: 10081

Answers (4)

Yuniac
Yuniac

Reputation: 571

To add to what everyone is saying:

In my case, the font file name had a - in it, as a separator between words. I tried everything to make the browser load it but it wouldn't, the only thing that eventually worked was removing the dash from the file name, and then it worked! (Tested on Firefox and Edge)

I would go further and advise to have the font file name have no special characters or spaces, etc.

What didn't work:

cairo-bold.tff

What did work:

cairoBold.tff

Upvotes: 0

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

I think your CSS Syntax is not Proper

  @font-face {
    font-family: "Bold";
    src: url("../assets/fonts/Overpass-Bold.ttf") format('truetype');
  }

Try Now Your path For the Font is not Proper, You Have added one dot insted of two dot

Upvotes: -1

user4244405
user4244405

Reputation:

  • Check that your web server has permission to read the folder containing the fonts and the font files themselves. Also check the files that their permissions are not "forbidden" -and should be readable by your web server user (-or "everyone").

  • Make sure that the URL paths to these fonts are correct; you can test this also with a background image URL in the same CSS file to test relative paths.

  • If the above is fine, then there may be something wrong with a specific font file, or your web server may not be transferring the binary data correctly. The latter may be caused when you override the default web-server behavior and stream the data through some other means.

  • Try the above with a web-font that you know will work, like "FontAwesome"; if that fails then the only thing left is that the binary data is being delivered incorrectly - so maybe extra "white-space" is prepended or appended --which happens quite easily with an embedding language, like PHP.

  • If it is a problem as stated in the last point above, it is easily fixed by clearing your output buffer -before -and -after delivering the font-data. In PHP the output buffer can be cleaned (and checked) with: ob_get_clean().

Upvotes: 0

Bhimbim
Bhimbim

Reputation: 1384

this is my code for the font face : 

@font-face 
{
  font-family: "BebasNeue_Regular";
  src: url("../../Resource/Font/Bebas Neue/.eot?#iefix") format("embedded-opentype"), url("../../Resource/Font/Bebas Neue/.woff") format("woff"), url("../../Resource/Font/Bebas Neue/.ttf") format("truetype"), url("../../Resource/Font/Bebas Neue/.svg#BebasNeue_Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

this is the callback : 

h1
{
    font family: 'BebasNeue_Regular';
}

there are some problems : 1. maybe your browser doesn't support the font file -> thats why i use some src url for callback. 2. are you really sure the file name is correct ?. 3. if it is, try to access the font url with your browser, is it work or missing. 4. there are some issues with firefox that doesn't render font during the local launch.

Upvotes: 0

Related Questions