How To Host Google Fonts Locally On Your Joomla Template

How To Host Google Fonts Locally On Your Joomla Template

Putting google font on your own hosting will make your website speed increase significantly, instead of having to load more pages of Google font every time you load the website. This article will help you easily host google fonts locally on your Joomla Template.

Step 1. Download the Font files you need

If you go to the google fonts website, you can select and download all the fonts you want. But here they come as a .ttf file extension. You would need a converter to get another, more modern compression to .woff and .woff2. Let’s make it a little easier, shall we?

The best way to download Google Fonts is to use the free Google Webfonts Helper. First, choose the font you want and then select the styles you need. For us, this will be the font ‘Abel’ in the styles ‘Regular’

This free service allows you to download the fonts in different file extensions by giving the option to go for ‘Best Support’ or for ‘Modern Browsers’. With ‘Best Support’ you will receive all file types, whereas the ‘Modern Browsers’ version will limit this to the most compressed .woff and .woff2 extensions only. And this last option is what we want.

After this, you will also see, that you will automatically receive the CSS code to call for the fonts. Copy the CSS to your clipboard and download the font files.

Step 2. Upload the Font Files to your Joomla template

Next, you will take the files you just downloaded and upload them to your server via FTP.  This is the folder you need to upload it to:

www.yoursite.com/templates/YOURJOOMLATEMPLATE/fonts/

Step 3. Add these fonts to your Custom CSS

Next, you need to create a CSS file with the name custom.css inside this folder:

www.yoursite.com/templates/YOURJOOMLATEMPLATE/CSS/

Then paste the CSS snippet provided by the website above

Conclusion

Last but not least, you will now need to call for this new ‘font-face’. You can add as many CSS classes as you need. Sometimes you need to inspect your page CSS to see which classes are calling for those fonts and add them to this list. For us, we limit ourselves to the basics below.

body {font-family:'Abel', Arial, sans-serif;}

h1,h2,h3,h4,h5,h6,p,a {font-family:'Abel', Arial, sans-serif;}

Don't forget to turn off the font options in the Template Option, for this to work!

Ads 1 Title

Related Articles

Support

  • Documentation
  • Frequently Asked Questions
  • Contact Us
  • Submit Ticket
  • Customization