How to add custom font to website through @font-face?




One of the main advantages of using technology @font-face is that you can use any font that you can download. Custom fonts added through @font-face can help freshen typography and create a unique look for your site. This step-by-step tutorial explains how to add custom fonts to a website through @font-face.




Font files


At this step, you need to find and download the font. Usually, the downloaded font comes with two files: font-name.ttf and font-name.otf files. 


All latest version of major browsers supports TrueType (.ttf) and OpenType (.otf) font formats. Therefore, there is no reason for generating cross-browser font files. Further in the tutorial, we will use .ttf.




Uploading files to a site


Using FTP software or file manager at your hosting, upload file font-name.ttf to your site. The best place for font files will be a folder with the name "fonts" in the template.


Path to your font file should be:

https://your-site.com/templates/template-name/fonts/font-name.ttf




Define custom font in CSS


Open your template CSS file and add the next code:

@font-face { font-family: "FontName"; src: url("https://your-site.com/templates/template-name/fonts/font-name.ttf") format("truetype");}




Using the custom fonts


Here are examples of how the added font can be used on site. 


If you decided to use added font for the whole site add to the CSS file next code:

body { font-family: 'FontName';}



For headings:

h1, h2, h3, h4, h5, h6 { font-family: 'FontName';}



For paragraph:

p { font-family: 'FontName';}



For specific element:

.element-class { font-family: 'FontName';}




Difference between Google fonts and @font-face


  • @font-face allows you to add absolutely any font.
  • Google fonts are easy to implement.
  • Google fonts have a big impact on your page load times.




Adding custom fonts in minutes


The Gridbox comes with the Font Library that allows you to upload custom fonts quickly and easily. How to add custom fonts in minutes, see the documentation: 

Related articles