CSS, firefox does not recognize Bree Serif font

Asked

Viewed 331 times

0

I use google sources, however I got the surprise today when I went to test my files in firefox and realized that the source was not loaded. See

http://jsfiddle.net/xrckh1db/ 

@font-face {
font-family: 'Bree Serif';
font-style: normal;
font-weight: 400;
src: local('Bree Serif'), local('BreeSerif-Regular'), url(http://fonts.gstatic.com/s/breeserif/v5/0daoUMW28nkWOnFz2G4AAgsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

@font-face {
  font-family: 'Bree Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Bree Serif'), local('BreeSerif-Regular'), url(http://fonts.gstatic.com/s/breeserif/v5/LQ7WLTaITDg4OSRuOZCpswsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
div {
    font-family: 'Bree Serif';
    }
html css css3

  • This location business is complicated, they say it saves the band if the person has the source, but nothing guarantees that it is the same. And another, direct linking to the google URL is not guaranteed to always work (as you noticed). Google works with @includes. If you don’t want to use includes, copy the font to your server (and see if it’s allowed in the license).

  • 2

    Here it opens well in several browsers. The problem is also that you are providing in a single format.

1 answer

2


Perhaps it is more interesting to use the Quick-use, as Google indicates. I do not put my hand on the fire but I believe that you will hardly have a loading problem by "Google be offline".

The three forms of import described in Google Fonts:

Default: Importing directly into HTML

<!doctype html>
<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
    
    <style>
      .minha-fonte {
        font-family: 'Bree Serif', serif;
      }
    </style>
  </head>
  <body>
    <h2 class='minha-fonte'>StackOverflow</h2>
  </body>
</html>

Importing into CSS with @import

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

.minha-fonte {
  font-family: 'Bree Serif', serif;
}
<h2 class='minha-fonte'>StackOverflow</h2>

Importing with Javascript

<!doctype html>
<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Bree+Serif::latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
                  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <style>
      .minha-fonte {
        font-family: 'Bree Serif', serif;
      }
    </style>
  </head>
  <body>
    <h2 class='minha-fonte'>StackOverflow</h2>
  </body>
</html>

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.