Html – Unable to load fonts

cssfontshtml

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

Best Answer

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.

Related Topic