There are standard web fonts that a universally recognized by most web browsers. These fonts are limited in number and may not fit the styling that you wish for your web page.

You can add your own fonts in a couple different ways.

  • Upload the font files to your website's folders and link to them with @font-face in your stylesheet.
  • Link to an external source, such as Google, for the font-family

Your Joomla template may have come with fonts already loaded, and you can select these fonts in Template Manager by clicking on the name of your template in the style column.

Add additional fonts using @font-face

The @font-face style is new with CSS3. It allows you to include the actual font family files in with the files for your web site. You then point to these files in your style sheet for rendering.

The plus side to providing your own fonts is that you can purchase very nice well rendered fonts. Using custom fonts rather than graphics for headlines, site titles and the like is better for SEO, as web crawlers can not read the graphic, but can read the text. Even if you include text in with your graphic as an alt attribute, it does not carry the same weight for search engine crawlers and it can not be read by visual assisted readers.

Another plus with providing your own fonts is that you have better creative control over how your page appears. The browser is provided with the font to use, so won't substitute another font that doesn't render the same.

The down side to providing your own font files is that it can slow down the rendering of your website as these files need to be downloaded with your web page.

There are a few things your should know about these font files:

  • Different browsers use different types of font files. These font files have extensions such as .eot, .woff2, .woff, .svg, .ttf. If you don't include all of these different file types with your font files, then the fonts on your site will not render properly in certain browsers. 
  • You must have the rights to these font files. Some fonts are free to use anywhere, other fonts require that you have a license to use them.
  • Different fonts have different qualities. The lettering may be acceptable for headings but will not work well for content, and vice versa.
  • Some fonts do not have pretty kerning and the letters don't line up well.
  • Not all fonts have a bold or italic version. 
  • Fonts are created for certain heights. If you use a specified height for your font that is not one of these specific heights, your browser will interpret the font to fit that height. This may not always turn out well.
  • Some mobile devices will ignore your font all together.
  • Older browsers may not recognize the @font-face style.
  • Not all fonts will have special characters. This is important if your language has accented letters or other alphabets other than the standard.

Add your font files to a folder named "fonts" included with your template's folders. Upload the font files that you purchased from a web site that sells fonts. Be sure to unzip the folder from the font web site if necessary.

Add the following lines to your style sheet near the top of the document. Use your own font file name for the highlighted areas, of course. If you were not provided with all of these file versions, use only what you do have, and recognize that your site may not look the same on all browsers or devices.

@font-face {
    font-family: 'Matrimo';
    src: url('matrimo.eot'); /* IE9 Compat Modes */
    src: url('matrimo.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('matrimo.woff2') format('woff2'), /* Super Modern Browsers */
    url('matrimo.woff') format('woff'), /* Pretty Modern Browsers */
    url('matrimo.ttf') format('truetype'), /* Safari, Android, iOS */
    url('matrimo.svg#svgFontName') format('svg'); /* Legacy iOS */
}

You can now refer to this font with the font-family property throughout your style sheet. It is suggested to have other backup font-families in the comma separated list that match your font in height and style.

h1, h2, h3 {font-family: "Matrimo", "Times New Roman", serif; }

Using Google fonts for your website

If you don't wish to go through the expense and trouble of purchasing font files and uploading them, you can select fonts from the Google font library: http://www.google.com/fonts. By using Google fonts, you are using their storage and their ultra-fast servers to upload the files with your website to the visitor's browser. These are generally high quality fonts and have a large number of different styles from which to choose.

Before doing the following steps, see if your template does not already have the ability to link to Google fonts through Template Manager.

Go to the Google font web site and find the font that you wish to use. Be sure it has the characters that your website requires. Look at how it renders special characters and numbers. Pick a font that reads well if you are using it for the content of your site. You can type in a sample of your text into the text box to see how it renders.

When you find the font that you like, click on Add to Collection next to the font. You can have several font families in your collection. Next select Use at the bottom of the screen. The next screen will allow you to add the different styles and character sets that you want for this particular font, if included with this font. Only click on what you need, the more you click, the larger the file size, the longer it takes to download to display your web page in the browser.

Keep scrolling and you will see snippets of the lines that you can add to your site to render this particular font. You can choose a standard <link> method, the @import method or a JavaScript method. Copy the line provided, you will add this to the index.php file for your default Joomla template.

Enter this text that you copied into the <head> section of your template's index.php using a text editor. Always make a safety backup of the file before editing the original. You can also add the code using the text editor in Template Manager. Click on the name of your template in the template column of Template Manager. In the new screen, click on index.php and a text editor will appear.

Use this font-family like this example:

h1, h2, h3 {font-family: "Matrimo", "Times New Roman", serif; }