CODEWITHSUNDEEP
cssfont-face
diegodacal
diegodacal

Reputation: 97

Webfont using @font-face stopped working

Ive been using webfonts on my website, using @font-face and it stopped working after some browser updates, now it doesnt really work on Chrome or Firefox (the two main browsers my users use). I tried a couple of different things but none of them made it work again. Does anyone have any idea of what could have happened?

My website is http://goronah.blog.br/

The link for the CSS is: http://www.goronah.blog.br/wp-content/themes/goronahresponsive/style.css

The @font-face is:

@font-face{
    font-family:Bebas Neue;
    src: url('BebasNeue.otf');
    font-style:normal;
    font-weight:normal;
}

and a common use:

h2 {
    font-size:2.4em;
    font-family:"Bebas Neue";
    font-weight:normal;
}

Upvotes: 1

Views: 436

Answers (2)

Lennard van Diggelen
Lennard van Diggelen

Reputation: 51

To make sure you cover all browsers with your font, you need to specifiy different font-types.

You need a:

  • WOFF or WOFF2 (Woff2 had better rendering)
  • SVG
  • EOT
  • TTF or OTF

To generate these fonts, you can use a webfont-generator like http://www.fontsquirrel.com/tools/webfont-generator.

If you have all the required font-types, you can include them like this (see comments in code for broswer support):

@font-face {
  font-family: 'Bebas Neue';
  src: url('BebasNeue.eot'); /* IE9 Compat Modes */
  src: url('BebasNeue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('BebasNeue.woff2') format('woff2'), /* Super Modern Browsers */
       url('BebasNeue.woff') format('woff'), /* Pretty Modern Browsers */
       url('BebasNeue.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('BebasNeue.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-style:normal;
  font-weight:normal;
}

Upvotes: 0

ckuijjer
ckuijjer

Reputation: 13814

Chrome DevTools shows the following error regarding the font:

Font from origin 'http://www.goronah.blog.br' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://goronah.blog.br' is therefore not allowed access.

Basically due to security reasons the browser won't download the font as it comes from another (sub)domain www.goronah.blog.br than your site goronah.blog.br. I noticed that the first simply redirects to the latter, so I assume it's simply an alias and all content is available from both url's.

The easiest way to solve this is to remove the www. part from the link to your stylesheet.

<link rel="stylesheet" type="text/css" href="http://www.goronah.blog.br/wp-content/themes/goronahresponsive/style.css" />

into

<link rel="stylesheet" type="text/css" href="http://goronah.blog.br/wp-content/themes/goronahresponsive/style.css" />

Upvotes: 1

Related Questions