Question

I have had an issue with any fonts I have embedded not showing up whenever I view the webpage in Firefox on my Mac, and Chrome on a different PC.

I have asked a tech friend and he is insistent that it is down to the user not installing the font on their machine. I said that I have embedded using Google Fonts and also uploaded a second font to the web server but he said that it is still down to the user not having the font installed.

Is this correct? It would mean I have completely misunderstood what I thought I learnt about embedding fonts in my webpage if he is correct.

The site for reference (not that you will be able to see the fonts) is here.

Thanks in advance

Answer 1

Your friend is incorrect, but you have not properly implemented them either.

For Google Fonts you should firstly add the link to the font, either by putting it into the html like so:

<link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>

or by importing it into your css.

@import url(http://fonts.googleapis.com/css?family=Russo+One);

You then specify the font for the div in the css like so:

font-family: 'Russo One', sans-serif;

You have also a dead link to your own css.