How To Include Additional Fonts

Many Google fonts are included in the theme. However, we allow users to add additional web fonts through child theme. This tutorial describes the steps needed to achieve this goal.

What is Web Font?

In CSS, a font-family (or face in HTML) consists of a set of related fonts, grouped as font families. It may also consists of different font sizes, styles (like roman and italic), and weight (like regular and bold).

Traditionally, the web browser will only be able to apply a font if it is available on the system, which is not always the case. Therefore, it is necessary to define a list of fonts for rendering text. For example, Helvetica Neue is normally available on Apple devices not Windows. Helvetica will be used instead.

Now the CSS @font-face allows a particular font downloaded from server to render a webpage if it is not available. The server is not necessary your own server. For example, Google and font-face.com are hosting the web fonts on their servers.

Step 1: Choose The Font

googlefont1

Typography is the art that makes the languages the most appealing to transparent learning and recognition. Choosing the right font for your web site is not an easy task. This tutorial is not about typography also. Assuming we decided on a font called “Arvo”, the next step is clicking on Quick Use button.

Step 2: Get the details

On the Quick Use page, you can select the styles and character sets and get the following information: Weight and Font Family.

//fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic
font-family: 'Arvo', serif;

Step 3: Create a Child Theme

A child theme is a theme that inherits the functionality of the parent theme. It is the preferred way to customize the theme. A basic child theme will have a style.css and a functions.php. If you already have a child theme, simple add the following codes to functions.php.

Leave a Reply

Your email address will not be published. Required fields are marked *