Google Font Install - Local Host

[emily....@gmail.com]

Hi

I have downloaded a google web font (Poppins) and converted it to the necessary @font-face formats (.woff, .woff2, .eot, .svg, .otf). I have placed these files locally on my Wordpress site in development on a localhost Mamp site.  

Now, when I do the normal @font-face declaration, the font only shows on the localhost website if the font is installed in Font Book on my mac (i.e. in my system fonts).

This worries me, because it shows my code is correct (i.e. font-family: 'Poppins-Regular';) but it seems to be calling the font from Font Book (my system fonts) and not the local files in my Wordpress site.  I've tested another non-google font and it works fine without it being in Font Book on my mac, so I know the files are in the correct location etc. I can't work out why this is only happening with the google font.

The site in development is going to be both a website and also a modified version as an intranet site.  The intranet site won't have access to the internet so I will need to host the font files locally on the Wordpress site.

Can I take it that when I upload the site to a web server everything will show OK?  And why do I need the font file on my mac for it to show with a @font-face declaration.

I'm very confused.

Emily.

[Dave Crossland]

On 21 October 2016 at 19:09, <emily....@gmail.com> wrote:

Can I take it that when I upload the site to a web server everything will show OK?  And why do I need the font file on my mac for it to show with a @font-face declaration.

The fonts will work if you set them up correctly.

It sounds like your @font-face isn't quite right. 

The Google Fonts API use local() in the src - in https://fonts.googleapis.com/css?family=Poppins you see something like

  src: local('Poppins'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v1/abc.woff2) format('woff2');

And that will mean that the font installed locally in Font Book will be used if found. 

If it isn't loading the web font, I guess the URL is incorrect...