Managing Font Families

Contents

• Adding a new font-family
  • 1. Choose a proper font
  • 2. select weights
  • 3. Prepare file-formats
  • 4. Control name of the files
  • 5. Place the files
  • 6. Edit customizer.php
  • 7. Stage and commit the change
• Changing the default font-family

Adding a new font-family

These are the steps you need to take for adding a new font to the theme

1. Choose a proper font

Proper font is:

• free
• readable
• standard
• popular
• retrieved from a reliable source

2. Select weights

From the font's styles, select 2 weights as normal and bold considering the following ranges:

• Normal: From 300 (light) to 600 (semi-bold)
• Bold: From 600 (semi-bold) to 900 (black)

Thin and extra-light is excluded due to readability concerns. Also there are only two weights being used in the theme to avoid some extra kilobytes of download for blog visitors.

3. Prepare file-formats

The font needs to support all modern web-browsers. So These file-formats must be included:

• EOT
• WOFF2
• WOFF
• TTF

In case the font pack was not containing any of these formats, use a generator.

4. Control name of the files

Make sure that all of the 8 files are named in the following structure:

• for normal:FontName
• for bold: FontName-Bold

FontName = Name of the font in PascalCase case-format

We are using a solid name structure due to these reasons:

• Font files are being dynamically attached to @font-face by PHP variables.
• We are attempting to keep files as tidy as possible.

5. Place the files

1. Locate fonts directory: assets/fonts
2. Then create a new directory named as: FontName
3. Place the font-files inside that directory.

6. Edit customizer.php

1. Go to /inc/customizer.php
2. Locate the comment // Font Families
3. Look for the related typeface in the comments; or add a new comment, in case none of them was related.
4. Append a new line under the typeface defining font's "file" and "display" name. The new line should be like:

'FontName' => 'Font Name',

Changing the default font-family

The default font-family should be the most standard, readable, popular, well-suited one among the font-families. Do not change it unless you are sure there is a better alternative for it.