How to add and use custom fonts

Our support team is ready to present you a new tutorial that will become an indispensable guide on how to add and use custom fonts. The font is a specific size, weight, and style of a typeface.You can apply a particular font or a set of fonts (font family) to the text on a web page. If you apply a set of fonts to the text, the browser will use the first listed font that is on the site visitor’s system.

In order to add a custom font to your site, you should perform the following steps:

1. Download a font from the Internet or just copy it from your system folder. For example, Windows stores its fonts in the C:\Windows\Fonts directory. We will download the Pacifico font from this site: https://www.fontsquirrel.com/
2. Make sure the font format is either TTF (TrueType Font) or OTF (OpenType Font).
3. Go to the http://www.font2web.com/ website, choose the font file from your local system. In our case this is Pacifico.ttf and hit the CONVERT&DOWNLOAD button.
4. You’ll get a zip archive. We need the “fonts” folder and the “fonts.css” file that are inside of the archive.
5. Open up the fonts.css file, locate url() parameters and change their values from fonts/XXX.xxx to ../fonts/XXX.xxx (add two periods and a forward slash at the beginning):

   Add the above code to the very bottom of the css/style.css file on your server.

6. Upload the content of the “fonts” folder to the “fonts” directory on your server.
7. Now you can apply the new font to any element by specifying the font-family property. You need to open up the fonts.css file again in order to see the name of the font-family. In our case, it is ‘Conv_Pacifico’ .

   You should add the following code to the very bottom of the css/style.css file on your server:

   .navbar-nav is the element specific selector. Sometimes the font-family attribute may already be declared in another file, and to overwrite it, you need to either find that place in code and put your font name instead or add the !important specifier to a new rule:

That’s all, now you know how to add and use custom fonts on your site.