Typography, or the font families and font styles used on websites, is one of the most important factor in website design because it affects the readability of each word on your website. In addition, typography presents security issues since malicious code can be hidden inside of web fonts. Therefore, in the this article, we will look at how to add custom secure web font families to your Joomla website.
Problems with both Microsoft and Google Fonts
By default, the JCE Editor uses Arial and other Microsoft fonts. This presents not only a security concern but also a hidden liability because commercial businesses are supposed to pay Microsoft a commercial license fee to use any of their fonts. Therefore, we should replace these closed source, restricted Microsoft fonts with free open source fonts.
At the same time, using Google Fonts adds both security and privacy problems. This problem is so bad that certain nations have attempted to ban the use of Google Fonts on websites. For example, the European Union Privacy Policy:
GDPR/EU-DSGVO/Privacy Policy and Google Fonts
does not allow Google Fonts because they collect private data from your website visitors without your visitors permission. You could put a Please Accept Our Policies button on your website and then explain that you are using Google Fonts and do not care about your website visitors privacy. This might technically comply with the law. But it may also offend your website visitors. The way around this problem is to install our own website fonts which do not collect website visitors data – and thus there is no need to warn website visitors in the first place. We will download these font families to our Home computer and then upload to our website files with our Hestia file manager.
Which Font Family Should We Use?
I have written a complete article just on this topic which you can read at this link: https://betterwordprocessing.com/part-2-completing-your-document/5-formatting-text/5-3-font-family-options
If you want a font that is the most readable on a web browser and that is a direct replacement for Microsoft Arial, the font you want is called Arimo. Arimo is a free open source web font that was specifically created to improve screen readability. Arimo has the added benefit of looking good in both small and large font sizes.
This font is not only free to download and install on your computer, it is also free to use on any website. Arimo comes in four options: Regular, Regular Italic, Bold and Bold Italic. Here is what these four options look like:
Here is a comparison of Arimo font to Arial font:
Arimo has been downloaded more than 700,000 times and has been linked to over one million websites. You can download a zipped file with all four Arimo font families from this page: https://createasecurewebsite.com/free-downloads/2-arimo-font-package
This is an Arimo Font Package that can automatically change your basic font style in LibreOffice Writer and/or your website to a free open source font called Arimo. This Arimo Font Package includes Arimo Regular, Arimo Bold, Arimo Italic and Arimo Bold Italic. Using Arimo will result in highly readable documents with a predictable display on both your Home computer and your website.
Arimo is a “metric” equivalent for both Arial and Liberation Sans so replacing either of these with Arimo will not change the layout or page numbers of those documents. If loaded to your website, Arimo will not only override your template font family, but because it loads the Arimo font family into the viewer’s browser, it will override the viewers browser font family settings and thereby result in a predictable and highly readable web page display.
Because this package uses TFF (True Type Font) files, you can unzip this package and install the four font files to your Linux Laptop by right clicking on each font file. Click Fonts and then click Install.
Then restart LibreOffice and open a Writer document. Click on Font Families and you should see Arimo near the top. To change to Arimo for documents you have already made, click Edit, Select All. Then click Arimo. Then File, Save.
To make Arimo the default font for all new Writer documents, open any Writer document and click File, Templates, Manage Templates.
Then right click on the default template (above called My Template). Then click Edit. To bring up a document ending in ott. This means we are now working on a Writer Template rather than a Writer document (which ends in odt). Click Tools, Options. Then click LibreOffice Writer and click Basic Fonts (Western). Then use the drop down arrow to change the fonts to Arimo.
Then click Apply and Close.
Then click File Save and File Close. Then open a new Writer document to make sure it opens with Arimo as the Font Family.
Add the Arimo Font Family to Helix Template
In addition to the font type used on our laptop, called TFF or True Type Font, we need to convert the fonts to WOFF (Web Open Font Format). We will use an online converter called Web Font Generator to do this conversion. Here is the link: https://www.fontsquirrel.com/tools/webfont-generator
Click Upload Fonts. Select all four TTF fonts. Then wait a minute for the four fonts to appear. Click Basic and Agreement. Then click Download your Kit. Click OK. Download the zip file to your website Fonts folder. Then select the file, right click and click Extract Here. Then open the folder and delete everything except the woff and woof2 files. Here is the result:
Use the Hestia File Manager to Load 8 Arimo Font Files
Log into your VPS server and click on the User arrow to go to your website User Control Panel. Then click on the File Manager. Then click web, your domain name. Then click public_html. Then click on templates, shaper-helix, fonts. There are currently 9 fonts in this folder. We will add 4 woff Arimo files and 4 woff2 Arimo files. Click Add Files. Then select all 8 Arimo woff and woff2 files. Then click OK. Once they are loaded, click Exit to Control Panel. Then close the Hestia VPS User and Admin Panels.
Create a Helix template custom.css file
Go to Templates, Code and click on the Shaper_Helix template to edit it. Click the css folder. If there is not already a custom.css file, click New File. Note: While the default Joomla template insists on a file named user.css file, the Helix template insists on a file named custom.css. For File Name, type custom. For File Type, select css. Click on the css folder in the left column to select it.
Then click Create. This will open up a custom.css file on Line 1.
Add the Custom Fonts to your template custom.css file
Copy the following CSS into your Clipboard. Then paste into the custom.css file:
@font-face {
font-family: 'arimobold';
src: url('/../fonts/arimo-bold.woff2') format('woff2'),
url('../fonts/arimo-bold.woff') format('woff');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'arimobold_italic';
src: url('/../fonts/arimo-bolditalic.woff2') format('woff2'),
url('../fonts/arimo-bolditalic.woff') format('woff');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'arimoitalic';
src: url('/../fonts/arimo-italic.woff2') format('woff2'),
url('../fonts/arimo-italic.woff') format('woff');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'arimoregular';
src: url('/../fonts/arimo-regular.woff2') format('woff2'),
url('../fonts/arimo-regular.woff') format('woff');
font-weight: normal;
font-style: normal;}
Then click Save and Close. Then click Close.
@font-face is an important property because it will override not only other font CSS on your website, but it will also override your website visitor browser fonts as it loads the Arimo fonts directly into the web page.
Add the Custom Fonts with CSS Elements
Once you have added the custom fonts to your template font folder and added the CSS to your helix template user.css file, you can apply these custom fonts to your website CSS selectors. For example:
h1, h2, h3, h4, h5 { font-family: "Arimo", sans-serif, arial; }
You can also replace the default font color and font size with your preferred font and size, also using a basic CSS rules.
Turn off all Helix Typography except Navigation
After installing custom fonts, go to the Helix template edit screen and click Typography to turn off (disable) Google Fonts all of the Google fonts except for Navigation which is still needed to control the appearance of our Mega Menu.
Install Phoca Font Component and Phoca Font Plugin
The Phoca Font Component and Plugin will allow us to easily change the default font on our website to Arimo. To load the Arimo Font Package to your website, first download this file to your Home computer from this link (if you did not download it earlier).
https://createasecurewebsite.com/free-downloads/2-arimo-font-package
Second, download the Phoca Font Component for Joomla 4 from this link.
https://www.phoca.cz/download/category/39-phoca-font-component
Third, download the Phoca Font System Plugin for Joomla 4 from this link.
https://www.phoca.cz/download/category/40-phoca-font-plugin
Fourth, use the Joomla installer in the Joomla Dashboard at System, Install, Extensions to install the Phoca Font Component. Fifth, use the Joomla Installer to install the Phoca Font System Plugin. Sixth, go to Plugins to enable the Phoca Font System Plugin. Seventh, go to Components, Phoca Font, Fonts and click Browse to select the Arimo Font Package from your home computer Downloads folder.
Then click Upload File and Install.
Finally, in the Phoca Fonts, Fonts screen, select the Arimo font and click Make Default.
Then go to the Phoca Font Control Panel and click Options. Change the default font size to 14px.
In Options, you can configure to three fonts. Then click Save and Close.
How to delete Arial from existing articles
If you have previous articles that you changed to Arial with your JCE editor, open each article and select all of the text and images. Then click on the JCE editor Font Family box and uncheck the Arial option – leaving all options blank. But leave the font size 14 in place to insure a consistent font size.
Congratulations! You have now eliminated Microsoft fonts from your website and greatly reduced Googles ability to spy on your website visitors. You have also greatly increased the odds that your website visitors will see your web pages in the way you intended. Fonts displayed with help of font-face rule are independent on visitor's browsers and operating system. It means, if visitor doesn't have the Arimo font on their home computer, the font will be loaded from your website and displayed. Your website visitors will now see your custom Arimo font instead some system font selected by their operating system or browser.
What’s Next?
In our next article, we will review how to organize your website articles and images in a manner that is less likely to turn into a mess as your website content grows.