Dan Dan - 4 months ago 10
HTML Question

Using a ttf file in css

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.

enter image description here

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.

enter image description here

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

Answer

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.