How to Add Custom Font to Website through @fontface?

In this tutorial we will teach you how to add custom font to the website, we will use @fontface technology to add new fonr. After end of reading go to the main page where all Joomla tutorials are located.

Step:1 Download the font.

Find the custom font that you want to add to website and download it. (file .ttf)

Free fonts you can download from: fonts2u, fontpro

Step:2 Generate for cross-browsing.

Different browsers supports different font formats, to add custom font to website and to have correct displaying on every browser you have to generate your font. For example:

  • Internet Explorer (all versions) - .EOT;
  • Safari (3.2+) - .TTF / .OTF;
  • iPhone (3.1) - .SVG;
  • Chrome (all versions) - .SVG (.TTF/.OTF added 25th Jan 2010);
  • Firefox (3.5+) - .TTF/.OTF (.WOFF added 3.6);
  • Opera (10+) - .TTF/.OTF.

To get all needed file extensions we need to use Font Face generator.

Font Face Generator

Step:3 Upload font files on your website.

After generating all files Use FTP or file manager to upload all fonts on your website, in folder...mywebsite/css. Create folder - "fonts".

Step 4: Add your custom font files into CSS.

To add custom fonts to website use @fontface. Just add the following code into style.css

@font-face {
font-family: "Harabara Bold";
src: url("css/fonts/Harabara.eot");
url("css/fonts/Harabara.woff") format("woff"),
url("css/fonts/Harabara.otf") format("opentype"),
url("css/fonts/Harabara.svg#filename") format("svg");

Step5: Start working

Now the custom font is added to website and you can use it:

h1 {
font-family: 'Harabara Bold', Arial, sans-serif;