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

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/

Answer 2

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