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 different 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.