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?

Answer 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';
}

Answer 2

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/