Change the font and size in Joomla templates

I had a strange problem recently that might be of interest to website developers. It is a bit of a techie problem and so not everyone will find it interesting, but I thought I would write it up anyway in case it helps someone out there in a similar situation. This is partly about Joomla, but partly about any website development including WordPress, Drupal, or even hand coded HTML using a text editor.

What I wanted to do was change the font and size of the text on Joomla website I maintain. The obvious place to change it is in the template, so go to the Extensions menu and select Template manager. Make sure Styles is selected on the left and you can see all the templates installed, with the one used on the website is ticked. Click the template name in the template column.

This displays the template files and folders in a panel on the left. Open the css folder and click template.css.

Edit the Joomla CSS template

The template.css file is opened in an editor and if you scroll down you will see all the style definitions for the various HTML tags. The one you want is body. Here you can see the font-family and font-size settings. Just replace whatever is there with whatever font and size you want. Save it and that’s it. or so I thought.

Now here is the strange part that had me confused for ages and it’s actually nothing to do with Joomla. This bit affects everyone.

The problem was that when I changed the font-family and font size in template.css nothing changed on the website. It looked exactly the same. I could double the font-size and select a completely different font, but the website looked exactly like it always did with the old font and size.

This was driving me nuts and clearly the settings were being overridden somewhere, but I couldn’t work out where. I right clicked the text on the web page and selected Inspect using Chrome.

Chrome Inspect Element

This is a useful tool on occasions and on the right, you can see the CSS styles being applied. It was showing the original font-family and font-size and not the new settings in template.css. Nothing I did would change the style from the original.

It took a long time to realise the what the problem was and it turned out to be obvious when you know, but it wasn’t obvious at the time. I use a service called CloudFlare, which provides several benefits, one of which is to cache your website to boost performance. Instead of pages coming from an overloaded web server, they come from the cache.

That was the problem, the CSS file was being cached, so changing it on the server made no difference to the website when viewed in a browser. The old template.css was being sent from the CloudFlare cache rather than the updated one on the server with the new font-family and font-size.

This problem would probably have resolved itself over time and sooner or later the file in CloudFlare’s cache would be updated with the newer version. Who knows how long it would take though. I couldn’t sit around all day waiting for the cache to update just so I could see the change that was made.

The solution is to go to the CloudFlare website, log in to my account and click the gear at the right side of the website. Select CloudFlare Settings.

CloudFlare settings

A little way down the page is Cache Purge. It is best not to purge the whole website and the option to purge a single file should be used. Type in the URL to the template.css file and purge it. Now when the website is viewed, the template.css file is fetched from the web server and not the cache. The new font-family and font-size settings are applied.

Purge CloudFlare's cache

Although I use Joomla and CloudFlare, the problem could happen to anyone where web pages are cached. Don’t forget that web browsers cache pages themselves and so you could get the same problem if you update a file on your website and then just click refresh in your browser to view the change. The browser might just redisplay the page from the cache. Usually, Shift+clicking the refresh button in a browser refreshes the page direct from the server bypassing the cache.

notepad Save 50% on RAWinfopages online courses! Get 50 Shares A Day - PDF with 50 places to promote your blog/website daily!
Join our FREE newsletter!