Documentation

How to new font to Helix3 Template

If you don't want to use Google Font in Typography section 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.

web font generator

All you need 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/):
    [email protected] {
        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

 

 

 

Newsletter