Theme fonts settings overview

The theme comes with two preset default Google Fonts: Open Sans and Roboto, to ensure an out-of-the-box functionality and cross-browser visual consistency.

The fonts usage is spread on various elements like the menu, post titles, blocks title, etc. For the elements which are not defined, we added a general font family on the body and paragraph(p) tags: Source Sans Pro,  sans-serif;

Style css

The icons and other small design elements (ex. social icons, menu arrows, etc.) are included in the “IonMag” font, which is located in the ../IonMag/images/icons folder.

Fonts 1

The easiest method to find what font is used on a particular element is to use the browser inspector.

Inspector

Font customization

IonMag Theme has a fully customizable Theme Fonts section where you can set custom, Google, Typekit or standard fonts, font sizes and font line heights.

You will find everything you need to adjust your website fonts, under the Theme Fonts tab!

The Theme fonts panel section is structured in a multitude of expandable areas related to the elements you can customize. In each zone, you will find a standard font, size, line height, style, and weight, loaded by default. All these elements are fully customizable.

Google Fonts

You can add a custom Google Font for each element present in Theme Panel > Custom Fonts.

Select the section where you want to apply the Google Fonts.

Google Fonts are included in the drop-down list.

If you want to specify what type of character subset to load (by default is “Latin”), you can do it from the Theme Panel > Theme Fonts > Google Fonts Settings. You can select what character subsets to load for each Google font.

Note: The character subset will be loaded only if the font supports the specific glyphs.

Try to only enable the subsets that you use, because the site will load slower with each additional subgroup.

Theme fonts

In the following example, we chose the Abeezee Google font for the Top Menu section, and we changed the other parameters (font-size, line-height, etc.)

Font settings

Custom font files

To use a custom font file, please make sure that it has a .woff extension. If the file doesn’t have the right format, just convert it to .woff using one of the multiple online solutions.

Next, copy the font file on your server, place it inside a folder and make sure you have read the permissions enabled for that folder and the files included in it. (Please make sure the folder property is not marked as Read Only.)

Then, go to Theme Panel > Theme Fonts > Custom Font Files:

  • Step 1 – Add the link to your custom font in the required area.
  • Step 2 – Specify a name for your custom font.
  • Step 3 – Open the panel where you want to apply the newly set custom font, and select it from the drop-down list.
  • Step 4 – Save the settings.

fonts 2

fonts 3

Typekit fonts

1. Create an account on typekit.com

2. From the Kits menu select Create new Kit

3. In the new pop-up menu:

  • Specify a name for your Kit
  • Specify the domain name where you will use the font
  • Press the Continue Button

4. From the next pop-up, copy the Javascript code

5. Go to Theme Panel > Theme Fonts> Typekit.com Fonts

6. Paste the JavaScript code that you copied from the Typekit website

td_custom_fonts_typekit_newkittd_custom_fonts_typekit_newkit_2td_custom_fonts_typekit_newkit_New

font 4

Add Fonts to your Kit

1. From the Typekit, Library, select the fonts that you want to use.
2. Choose your Kit from the pop-up
3. In the new pop-up window, press the Publish button.

2016-04-11_1527td_custom_fonts_typekit_addfonts_22016-04-11_1550

Now that you have the fonts you just need to include them in the Theme Panel.

1. In the Typekit Editor pop-up window:

  • Press Using fonts in CSS link
  • Copy the name of the font from the pop-up

2. Go to Theme Panel > Theme Fonts> Typekit.com Fonts.

  • Paste the font family name in the required field.

3. Open the front panel for the section where you want to apply the Typekit custom font.

  • You will find your custom font under the Font Family drop-down for each sub-section.
  • Save Settings

Now you should see the font applied to your website.

2016-04-11_15522016-04-11_1553

font 5