CODEWITHSUNDEEP
htmlcssfontsfont-face
tomdot
tomdot

Reputation: 551

Embedding Fonts Not Displaying in Chrome/Firefox

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

Upvotes: 1

Views: 5888

Answers (3)

Khan
Khan

Reputation: 18142

If you're talking about the font PT Sans, I do not see you actually embedding the font anywhere in your css.

You will need to provide a path to font and store it somewhere to be referenced like as:

@font-face {
    font-family: 'RieslingRegular';
    src: url('fonts/riesling.eot');
    src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}

See here for reference: http://bavotasan.com/2010/embedding-fonts-web-site-css-font-face/

Upvotes: 1

Robin Whittleton
Robin Whittleton

Reputation: 6339

The link to your MyFonts kit is broken. Fix that and they should appear. At the moment you’ve got:

http://www.tomrankinmusic.com/type/mercearia_antique/MyFontsWebfontsKit.css

but it should be:

http://www.tomrankinmusic.com/test/type/mercearia_antique/MyFontsWebfontsKit.css

The PT Sans font is working (at least in my Mac Firefox).

Upvotes: 1

Samwise
Samwise

Reputation: 306

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.

Upvotes: 1

Related Questions