CODEWITHSUNDEEP
htmlcssfonts
Christina
Christina

Reputation: 333

Adding local ttf fonts using @font_face in CSS

I am trying to add a local font to a site I am testing. It is called "AcrosstheRoad.ttf" and can be found in my assets/fonts/ folder. I am doing the following to try to read it into the CSS file:

@font-face {
  font-family: 'AcrosstheRoad';
  src: url('assets/fonts/AcrosstheRoad.ttf')  format('truetype');
}

And I want to use it as a certain header type so I am using

h3{
font-family: 'AcrosstheRoad';
color: #333;
}

But unfortunately the font is not loading in. Does anyone know what I'm doing wrong?

Thanks! Christina

Upvotes: 12

Views: 30946

Answers (1)

Katherine
Katherine

Reputation: 639

First add a slash before assets: 

(('/assets/fonts/AcrosstheRoad.ttf'))

That may or may not be the problem, depending on where your CSS file is, and how your website is structured.

If the above doesn't work, convert the font to .woff2 and .woff (try using this: http://www.fontsquirrel.com/tools/webfont-generator). The reasoning behind this is that some browsers are really picky. Change your CSS to:

@font-face {
  font-family: 'AcrosstheRoad';
  src:  url('/assets/fonts/AcrosstheRoad.woff2') format('woff2'),
        url('/assets/fonts/AcrosstheRoad.woff') format('woff');,
       url('/assets/fonts/AcrosstheRoad.ttf') format('truetype');
}

Upvotes: 20

Related Questions