When your website is running a language other than English, you might encounter a peculiar issue after installing a template where certain characters are not displayed properly when using Google Fontz. This is due to language-specific diacritical marks, commonly called ‘accents’, that are missing from the font. This doesn’t necessarily mean that the font being used does not include this support; often, the solution is more simple.
When a Google font is set in the Joomla template backend, the font isn’t being installed directly; that is, there isn’t a package file being installed as there would be in an extension or module. Instead, the font to be used is specified via a URL, and the font files found at that URL are imported and set into the template. Where this can cause issues is in how Google Fonts distinguishes between different character sets.
In a standard English-language website, there are only 26 letters that can be both upper and lower-case, plus a standard set of extra characters such as numbers and symbols like commas, apostrophes etc…so it makes sense for the template only to download these essential characters, ignoring those of other languages in order to reduce the overall weight of the font. However, if your site is in another language that uses a larger range of characters than the standard English-style alphabet will not be sufficient; in Polish for example, you might see letters with an accent (such as ć), overdots (ż), or tails (ą). There are a great many variations as you move through different languages, so in order to maximize efficiency Google Fonts allows its available fonts to be split into eight different alphabets, which are:
- Cyrrilic
- Cyrrilic Extended
- Greek
- Greek Extended
- Khmer
- Latin
- Latin Extneded
- Vietnamese
When a font is imported from Google Fonts, the basic font typeface that is usually specified by default is “Latin”, which contains only those characters that make up the standard English character set. If you’re having problems with the font not displaying your language’s character on your site, the chances are it’s because the correct character set has not been specified. Thankfully, it takes just a minute to remedy this issue.
Finding the source of the Google Fonts error
The example below utilizes the ‘Sarina’ font:
http://www.google.com/webfonts#UsePlace:use/Collection:Sarina
This font was configured in the template’s settings with the “Latin” character set. Using this font with a language that requires an extended character set can result in, for example, unsupported letters being replaced with a standard font or missing altogether as there is no equivalent symbol within the font’s typeface. You can see this issue in action below: :
Resolving the special character display issue
To rectify this problem, you will first need to verify whether your font supports the additional characters required by your website’s language(s). In the example above we’re attempting to use Polish characters that are not included with the Latin set; instead, these characters are included within the ‘Latin Extended’ set. By checking the Sarina font’s typeface page we can see that it supports the appropriate font family in the “Choose the character sets you want” section:
Now we can choose this font family by adding a checkmark to the “Latin Extended” option; when you do this you’ll notice that the URL listed in the “Add this code to your website” section changes to point to the new character set, from:
http://fonts.googleapis.com/css?family=Sarina
to:
http://fonts.googleapis.com/css?family=Sarina&subset=latin,latin-ext
Next, we need to copy the new URL from the “Add this code to your website section”; this URL will be used to tell the template where to find the font files to be imported. Note that only the URL in the code (starting from “http://” and ending with “latin-ext” in this example) needs to be copied; the link, href, rel and type elements can be ignored completely.
With the URL copied, we can now use it to specify the the new font family in the template options. First, we log into our Joomla! administrator area, then option the Extensions → Templates section and click our activated template to see its options. There are multiple tabs of options, but we should click on the “Fonts” tab, where we can specify the URL for the Google Font we wish to use. By replacing the existing URL with our newly-copied one will add the font to the template as in the below image:
Now we just need to save our changes by clicking the Save button. Now if we check our frontpage again, we can see that the problem characters have been corrected and now display the extended character set.
Things to remember
When choosing a font for your website that not all fonts available on the Google Fonts website support the full range of character sets; some will only support the default ‘Latin’ option. In these cases we unfortunately must select an alternative font that does include alternative character set support. To help you with this you can take advantage of the “Script” filtering available in the left column of the Google Fonts page, which will allow you to filter the displayed fonts by their supported character sets.