Adding local ttf fonts using @font_face in CSS

Question

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

Answer 1

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');
}