JoomDev is Closing Its Joomla Products
  • About
    • Seldom things in life do turn out better than you hoped for. Our application development, website maintenance and hosting with JoomDev did. The driving force behind the firm is its unique way of balancing quality services with realistic budgets. The passion and enthusiasm shown by Chetan and his team from the very first moment we met them, we knew that our search was over.
      photo-alex
      Alex Shvarts
      Fundkite

      Our Clients

  • Blog
  • Contact

How To Add Custom Font To Your Joomla Template?

How To Add Custom Font To Your Joomla Template?

Do you want to add custom fonts in Joomla? Custom fonts can help you freshen up your template and make it unique among others. In this article, we will show you how to add custom fonts in Joomla.
There are Joomla templates which come with fully loaded with lots of fonts. But loading too many fonts can slow down your website. That’s why I am going to show you how you can add Custom Fonts to your Joomla template, so it doesn’t slow down your website.

But before adding the fonts, you need to find out some unique and best fonts for your website which can match to your business theme as well as website. 

How to Find Fonts for Your Joomla?

There are so many places where you can get your custom fonts. You can get a premium font as well as if your budget doesn’t allow you, you can get the free one. Here are few well know resources to find the custom fonts for your website. 

From the above sources, you can find a good font for your website. 

I’ll be using Houstander by Typia Nesia from www.1001freefonts.com. You’ll most likely get a TTF (TrueType Font) file from this website, which is installable on your operating system.

To be able to use it on your website we have to convert the font to WOFF.

Convert the Font to ‘Web-Friendly’ Formatting

When you download the font from any of above-mentioned resource, you’ll most likely get a TTF (TrueType Font) file from this website, which is installable on your operating system. To be able to use it on your website we have to convert the font to WOFF (Web Open Font Format) using an online converter. I use the Web Font Generator, you can find others too.

How To Add Custom Font To Your Joomla Template?

Since you have a custom font file, go ahead and convert your font file to WOFF format. Once done, download the converted zip file and extract it. You should see the following files in there:

How To Add Custom Font To Your Joomla Template?

If you use another converter you may only see the woff and woff2 file, which is fine as well. 

Add Custom Fonts To Joomla Template

Once, your fonts are ready for web, you can easily add them to your Joomla website. you just need to follow the simple steps. Here we are using Astroid Framework as our template. 

Video Tutorials

Create a new folder called fonts in your template folder and upload the woff files in that folder.

How To Add Custom Font To Your Joomla Template?

Now go to your primary stylesheet (in this case templates/astroid_template_zero/css/custom.css (if it doesn’t exist you can create one)) and add the following CSS.

@font-face {
    font-family: 'houstander_demoregular';
    src: url('../fonts/houstanderdemo-webfont.woff2') format('woff2'),
         url('../houstanderdemo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Please note that my font family name above is (‘houstander_demoregular’) and your’s may be different, so you’ll have to change the file name and font-family name to your font name.

The src URL must point to the actual URL of the woff file, My fonts folder is on the same level as the CSS file, thus I am using ../ to go back a level and access the file using a relative path. You may just use a static path i.e. www.yoursite.com/templates/YOURJOOMLATEMPLATE/fonts/fonename.woff

Once done, save the file and you have your custom font done.

Now if you want to apply it on the body, you can just write the following CSS to your stylesheet.

body {
    font-family: houstander_demoregular !important;
}

And this should get you the font and styling you need.

We are adding important at the end since that will override the default styles from the stylesheet/backend.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Table of Contents

I’ve had the great pleasure of hiring JoomDev for several projects over 8 years. The team brought our ideas to life and created the customized application that we only imagined in our minds. We appreciate JoomDev “can do” attitude and co-operation to complete any task until being fully satisfied. Hire JoomDev, you’d be crazy not to!
photo-alex
Alex Shvarts
Fundkite

Contact Sales

Start a Project