Wright Framework logo

A custom font family will add a vital extra touch to your site feel and look. It will make its design look more professional and appealing to its visitors.

It will also demonstrate that you care about the viewing experience of your site visitors. They, in turn, will pay you back with their trust and return visits.

In this blog post, you will learn how to easily add a Google Font family of your choice to our Wright Framework or any other of our templates.

The technique you will learn in this tutorial is creating a custom.css file for your own style rules. You will learn how to create this file for your Wright Framework on any other Joomlashack template.

You will then be able to easily add a Google Font family to a preferred element on your pages. 

Do I Really Need to Create an Extra File for My Joomla Site?

It may sound logical to find an existing CSS style with a font family rule and change the font family to your preferences. This approach, though, has two major disadvantages.

Firstly, editing modern Joomla CSS files is not a straightforward task. It is very easy to make a mistake while working with them:

Editing the style_generic.css file is not an easy task

The image above displays the style_generic.css file from the Wright Framework. As you can see, it is not particularly editor-friendly.

Secondly, and most importantly, even if you manage to edit this file, you will lose your changes next time you update your template.

We suggest you create a new CSS file for your Wright or any other Joomlashack template, call it custom.css and add in there your Google Font family.

For the purpose of this tutorial, I installed a Joomla site with the "Learn Joomla Sample data", running the Wright Framework.

You will learn how to add Roboto Google Font family to the h2 tag of the Joomla articles titles.

Let's get started. 

Step #1. Create custom.css File

  • In your Joomla administrator panel, go to Extensions > Templates > Templates:

Go to Extensions > Templates > Templates

You will be taken to the Templates: Templates (Site) screen. 

  • Locate the Wright template.
  • Click the Js_wright Details and Files link:

Click on this link

You will see the Templates: Customise (Js_wright) page. It displays all the files and folders of your Wright template.

  • Click CSS:

Click css

  • Click New File:

07 click new file

You will see the Create or Upload a new file white modal box opened up. 

  1. Make sure the css folder is selected
  2. Enter custom into the File Name box
  3. Click Select a file type and select css
  4. Click Create:

Steps to creating the custom.css file

You will see the File created message (1) and the custom.css file displayed (2). On the right-hand side, you will see the code editing area (3).

File created message

Good job! Your custom.css file is now ready.

It is placed outside your Wright template file structure. This means, next time you update the Wright framwork, this custom.css file will be left intact.

Next, you need to get the CSS code to copy into it.  Keep this screen open and move to the next step.

Step #2. Select a Google Font Family of Your Preference

For the purpose of this tutorial, I will add Google Font family called Roboto. I will add it to my article headings h2 tag.

Click on the plus icon

  • At the bottom of the page, click Family Selected:

Click Family selected

You will see the Roboto Google Font family modal box.

  • Click the @IMPORT tab:

Click the @import tab and select the code

Step #3. Add the Google Font Code to the custom.css File

Now you need to get two lines of the CSS code from the @IMPORT tab and add them to your custom.css file.

  • Copy the @import url('https://fonts.googleapis.com/css?family=Roboto'); code and paste it into your custom.css file
  • Copy the font-family: 'Roboto', sans-serif; code and paste it into your custom.css file
  • Add the curly brackets before and after this line
  • Add h2 CSS code before the first curly bracket, to apply the Roboto Google Font family to your articles h2 headings
  • Click Save.

Populate your custom.css file

Excellent! Next, let's check how your new Google Font family works on your site.

Step #4. Test Your Joomla Articles h2 Headings

  • Go to the front end of your site and refresh its main page.

If you inspect your articles headings, you will see that they gracefully accepted the Roboto Google Font family:

The Roboto font family at work

Additional Reading

What's Next

Join Joomlashack University now and immediately start learning how to build bigger and better websites with Joomla CMS!