Introduction

Main typography in Helix3 templates is mainly based on Google Fonts collection. This settings area allows you to easily add fonts from the Google Font Directory to your Joomla! template.  All available fonts are released under open source licenses. You can use them in any non-commercial or commercial project. The Google Fonts API works on the vast majority of modern mobile operating systems, including Android and iOS (iPhone, iPad, iPod).

Typography in Helix3

"Update Font List" feature - allows you to refresh the list of available Google fonts. So if there are any new ones, this button allows you to quickly update fonts with just one click, and they will be automatically added in to Helix3 Framework database. Which allows you to use them quick. Since Google Fonts has implemented a recent usage restriction, you may need to use your own Google Fonts API Key for uninterrupted operations. With Helix3 2.5.6 update, we’ve added a dedicated Google Fonts API Key insertion field to Helix3.

Typography settings allows you to choose font and its settings for popular HTML tags: body, h1, h2, h3, h4, h5, h6 and navigation. Subsets (like Latin Extended, Vietnamese are also no problem - just choose the character sets you want. Of course if they are available for selected font set. All settings are from template settings, so you have got now a simple and efficient way to embed Google fonts of your choosing to your website with a few clicks of your mouse.

 Google has been supplying the community with a large collection of web-based fonts for quite a few years. Right now, the Google Directory has hundreds of great fonts, and the selection is steadily growing. One of unique Helix3 feature is Live Font Preview during choosing from list 800+ of available fonts. Remember integrating good looking font(s) into a Joomla website can improve the appearance, increases trust for your website, but  may slow down a website as well. 

Like any other asset, font files have to be downloaded to a site visitor's computer before they can be displayed. Fonts served by the Google Fonts API are automatically compressed for a faster download, and once downloaded are cached in the browser and reused by any other web page that uses the Google Fonts API. In general, you should be aware of the size of the font files you are serving on your site or page. We recommend embedding only the families, styles, and scripts needed.

If google font will be disabled (No) then default font set : "Helvetica Neue", Helvetica, Arial, sans-serif - will be used instead. Those are popular and universal fonts included in bootstrap framework.

Font for custom CSS selector

This section allows you also to use Custom Google Font for selected CSS selector. Just enable option, choose font settings and in empty field below insert name of classes separated by comma.

Adding a new font to Template

If you don't want to use Google Font nor default Helvetica Neue, Helvetica or Arial you can also prepare your own font to load. For example you can integrate a custom font from MyFonts.com, fontspring.com or fontsquirrel.com or use WebFonts Generator from it (suggested method!). Please ensure you download the @font-face Kit.

Notice! If your language has extra native letters, in Fonts Squirrel Generator choose Expert  > Subsetting > Custom Subsetting… yes, mark it.

Later all you need is to do is copy and paste font files, and make some edits to your custom.css file. In this example, we will explain how you can add the custom free font AlexBrush to your JoomShaper template. This method can be used with any template based on Helix3 framework.

1. Please unzip all font files (.eot, .woff, .ttf, .svg) from template package to this same template folder where in template keeps other fonts, for example here: templates\shaper_helix3\fonts
   Use FTP tool for it.
   
2. Now open stylesheet.css which should be in generated font package, in my example it looked like this:

   @font-face {
       font-family: 'alex_brushregular';
       src: url('alexbrush-regular-webfont.woff2') format('woff2'),
            url('alexbrush-regular-webfont.woff') format('woff'),
            url('alexbrush-regular-webfont.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
   }

3. But we need to change paths for files, I suggested to use following change (../fonts/):

    @font-face {
       font-family: 'alex_brushregular';
       src: url('../fonts/alexbrush-regular-webfont.woff2') format('woff2'),
            url('../fonts/alexbrush-regular-webfont.woff') format('woff'),
            url('../fonts/alexbrush-regular-webfont.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
   }

4. Now open or create a custom.css file inside /css folder (in JoomShaper template) and copy updated code there.
5. Once you have added the font to your template's font directory, you can apply it to your site. Now you have to choose this new font for selected CSS selectors or HTML tags, also inside custom.css file, for example:

   h1, h2, h3 { font-family: 'alex_brushregular', Arial; }

   Here is content of my example file
   
6. You can also replace the default font color and font size with your preferred font and size, also using a basic CSS rules.
7. If you want to use custom fonts for HTML tags or menu items etc. please turn off (disable) Google Fonts for them in Typography tab (!).

Final result on front-end