Using a ttf file in css

Question

To my knowledge to use a custom font, stored locally in this case, you would use something similar to this.

@font-face {
    font-family: 'theFontFamily';
    src local('the font'),
        local('the-font'),
        url(path/to/the-font);
}

.fontClass {
    font-family: 'theFontFamily', extra_settings;
}

So using this font, locally, would you expect this to work?

@font-face {
  font-family: 'Pacifico';
  src: local('Pacifico Regular'),
       local('Pacifico-Regular'),
       url(resources/fonts/Pacifico.ttf);
}

.logo-container {
  font-family: 'Pacifico', cursive;
}

As when I try it, the code changes the font, just not to the desired font. It looks like this.

Whereas if I use the import link, <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">, just using the following code works.

.logo-container {
  font-family: 'Pacifico', cursive;
}

This looks like this.

I have probably made a simple mistake and I would appreciate if someone would be able to aid me in fixing this.

Answer 1

Make sure you link the source url properly. Try

 @font-face {

   font-family: 'myPacifico' ;
   src: url('/resources/fonts/Placifico.ttf') format('truetype');

}

That's basic enough, then to use... .logo-container {

     font-family: 'myPacifico', san-serif;      }

San-serif in this case is a fallback. In this case, ive linked to the regular ttf file. For bold and other styles, u'ld have to link to that in another @font-face with a different name.