CODEWITHSUNDEEP
htmlcssfontsfont-facefont-family
Ziessel
Ziessel

Reputation: 57

Problems with CSS @font-face

I'm developing an android app with phonegap and wanted to use custom fonts. To do so, I was trying to use CSS @font-face and I first made a little test to check if it worked the way I was expecting. I created a simple index.html file and a .css file in the same directory where I also copied the file with the font I wanted to use, which is in woff2 format. Here's the code for the css and html files:

@font-face {
  font-family: Roboto_Bold;
  src: url(/roboto_bold.woff2) format(woff2);
  font-style: normal;
  font-weight: 700;
}
p {
  font-family: Roboto_Bold;
}
<p>prueba</p>

The problem is that, when I open index.html with Google Chrome, the font roboto_bold doesn't appear. The text is written with the browser default font, and no errors are shown in the console. I've tried everything to solve it (changing the font formats, checking the links, checking my browser version), but I couldn't find a solution. Any idea why @face-font isn't working?

Here is a screenshot of the files in my directory: enter image description here

Upvotes: 0

Views: 922

Answers (2)

Ziessel
Ziessel

Reputation: 57

I tried the code in a different computer with a version of Chrome for another OS and it worked fine. It seems it was all a problem of platform

Upvotes: 0

Lee
Lee

Reputation: 4323

Remove the / infront of the font name, as your font file is in the same directory as your CSS file.

Also, try removing the underscore in the font name, and placing it in quotes - http://www.w3schools.com/cssref/pr_font_font-family.asp

@font-face {
  font-family: 'RobotoBold';
  src: url(roboto_bold.woff2) format(woff2);
  font-style: normal;
  font-weight: 700;
}

p {
    font-family: 'RobotoBold',sans-serif;
}

UPDATE

As your console is showing no errors, it's not a path related issue. I would suggest Chrome is unable to display WOFF2 files, and you may need to include extra versions of the file, such as WOFF. These are the two I use as a bare minimum.

You can create a whole font kit by uploading your font file (copyright applicable) to a webfont generator tool such as https://www.fontsquirrel.com/tools/webfont-generator

Upvotes: 2

Related Questions