Font Family not working

Question

I am using Google Fonts on an internal webpage but for some reason it is not catching.

I downloaded the .woff2 files and have them hosted on my server.

I included the @font-face and here is how I wrote it:

@font-face {
  font-family: 'Arizonia';
  font-style: normal;
  font-weight: 400;
  src: local('Arizonia'), local('Arizonia-Regular'), url(/lib/fonts/Arizonia/PwrsyFTYH2Wmsvpn0dx4s_esZW2xOQ-xsNqO47m55DA.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;
}

.arizonia {
    font-family: 'Arizonia';
}

Then later in the HTML document, I have tags as:

<span class="arizonia">Some Text</span> but the text shows up as Times New Roman (default for the browser...). It somehow is not loading the font.

I checked the file and it IS accessible - meaning the URL to the .woff2 file is valid.

I am using Firefox 30.0

Any ideas what could be wrong?

Can you see the webfont loading in your Sources tab in Chrome Dev Tools? — Jon Uleis, Dec 23 '16 at 00:29
It doesn't look like it is importing. I used the Mozilla Firefox debugger and it shows all the various files loading. When I click on "Fonts", it doesn't show anything loading. I guess that isolates the problem. Any idea how to debug that? — Walker Farrow, Dec 23 '16 at 00:34
NOTE: under the styles section of the debugger, this section of css (that declares the font-face) does load. So it loads the `style` statement, but somehow is still not importing the `.woff` file... — Walker Farrow, Dec 23 '16 at 00:35
Maybe it is the woff2 compatibility? According to [caniuse](http://caniuse.com/#search=woff2) it is compatible from Firefox 39+ — Alvaro, Dec 23 '16 at 00:35

score 1 · Answer 1 · edited May 23 '17 at 10:29

1

Change the span to divs it should work: **Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format)

Check here for more info on how to implement: How to import Google Web Font in CSS file?

EDIT** Check here for working example of what I am speaking of: https://embed.plnkr.co/qfEhb9LCEjh2PHqLlFF5/

edited May 23 '17 at 10:29

Community

1
1

answered Dec 23 '16 at 00:39

Fabian

25
8

Alvaro · Accepted Answer · 2016-12-23T00:52:47.970

1

Try to check it with other browser but it looks like it could be the woff2 compatibility with Firefox 30. According to caniuse it is compatible from version 39 of Firefox. Include woff also. So something like this:

@font-face {
  font-family: 'Arizonia';
  font-style: normal;
  font-weight: 400;
  src: local('Arizonia'), local('Arizonia-Regular'), url(/lib/fonts/Arizonia/PwrsyFTYH2Wmsvpn0dx4s_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(/lib/fonts/Arizonia/PwrsyFTYH2Wmsvpn0dx4s_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
  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;
}

.arizonia {
    font-family: 'Arizonia';
}

edited Dec 23 '16 at 00:52

answered Dec 23 '16 at 00:39

Alvaro

9,247
8
49
76

I found a website where you can easily download the various versions of the Google API fonts, which is http://www.localfont.com/. I searched "Arizonia" and it had a simple `.zip` file to download and implemented perfectly. The problem was that I needed a fallback of a `.woff` file. Tku! – Walker Farrow Dec 23 '16 at 00:50
@WalkerFarrow As of July 5 2020, localfont.com is no longer working. Can you recommend a similar site? – RockPaperLz- Mask it or Casket Jul 05 '20 at 15:40

Font Family not working

2 Answers2