@font-face: How to Add Custom Fonts to WordPress

Font Formats

Before we look at How to Add Custom Fonts to WordPress, it’s important to understand that there are various font types (TTF, WOFF, SVG, etc.), each with its own level of support across different browsers. Let’s explore this in detail together:

WOFF (Web Open Font Format): This format is compatible with Internet Explorer 9 and newer, as well as Firefox, Safari, and Opera.
OTF (Open Type Fonts), TTF (True Type Fonts), and OTF (OpenType Fonts): These formats are supported by Firefox, Chrome, and Safari.
SVG: This format works with Chrome, Safari, and Opera.
EOT (Embedded OpenType): This format is supported by Internet Explorer.

Note: Internet Explorer 8 and earlier versions do not support custom fonts.

For optimal cross-browser compatibility, we should utilize at least the TTF, WOFF, and EOT formats.

Embed a custom font with @font-face

After selecting the font for your website and uploading it to the server, you must add it to your stylesheet with the @font-face rule, enabling you to use the font.

In this example, I will test a WOFF font that is compatible with most browsers. If you’re searching for downloadable fonts, you may discover options at fontsquirrel.com.

For this demonstration, I will utilize the font carrara-lig-webfont.woff.

Here’s the process for implementing the @font-face rule.

@font-face{
  font-family: 'carraralight';
  src: url('carrara-lig-webfont.woff');
}

As you can see, the @font-face rule necessitates the specification of two properties:

font-family: this property allows you to define an arbitrary name for the font that will be included. With this name, you can utilize the font throughout the rest of your stylesheet.
src: this attribute is where you specify the physical path to the font file that you wish to embed in your website.

I want to remind you that it is considered good practice to place the @font-face rule at the beginning of your stylesheet, ensuring that the font name is available for use in subsequent rules. Indeed, to utilize the custom font, you must refer to the name defined in the aforementioned @font-face rule.

As previously mentioned, it is recommended to upload multiple file types for the same font into your project folder to enhance cross-browser compatibility. To achieve this, you will need to use the src attribute as demonstrated in the example below:

            @font-face{
  font-family: 'carraralight';
  src: url('carrara-lig-webfont.woff') format('woff'),
  src: url('
            carrara-lig-webfont.ttf') format('truetype'),
  url('
            carrara-lig-webfont.woff') format('embedded-opentype');
}

In this instance, I also indicated the format following the src attribute, which I hadn’t done previously.

Once the font is integrated into the page, it can be utilized in other directives by simply referencing the font-family property of the element you wish to style.

Fallback fonts

Although it is not viewed the same way as it was a few years back, it’s important to remember that compatibility remains a factor to consider, as CSS3 is not universally supported.

In this context, it can be beneficial to specify a ‘stock’ font, particularly when implementing a custom font. To achieve this, just follow these steps:

h1{
  font-family: 'fontPersonale', Helvetica, Arial, serif;
}

This approach ensures that even if CSS3 isn’t supported, the element will still be styled using one of the alternative options before reverting to the browser’s default.

Custom font properties

Up to this point, we have concentrated on the @font-face rule in its most basic form. Currently, we have only specified the font name and the URLs for retrieving the files. However, we can also perform additional tasks, such as creating multiple @font-face rules with various versions of the same character.

The carrara-lig-webfont.woff font also includes an extra light (even thinner) version, which can be utilized whenever a lighter text portion is required.

Once again, the font must be uploaded to the server and referenced with a specific style rule.

@font-face {
  font-family: fontPersonalizzato;
  src: url('
            carrara-lig-webfont.woff');
  font-weight: normal;
}
@font-face {
  font-family: fontPersonalizzato;
  src: url('
            carrara-extra-lig-webfont.woff');
  font-weight: lighter;
}

You have the option to utilize this second font, which shares the same name as the first. By employing the font-weight property, you can instruct our CSS on which version to select for the thinnest text.

In a similar fashion, we can also add a font that comes in four distinct versions: Normal, Bold, Italic, and Bold Italic.

@font-face {
  font-family: 'MioFont';
  src: url('MioFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MioFont';
  src: url('MioFont-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'MioFont';
  src: url('MioFont-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'MioFont';
  src: url('MioFont-BoldItalic') format('truetype');
  font-weight: bold;
  font-style: italic;
}

Here is a list of the many different properties that can be defined for the custom font:

• font-weight: Specifies the weight of the font, or how thick the font should be. Values ​​can be:
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
• font-style: defines the font style. Possible values ​​are:
  • normal
  • italics
  • oblique
• font-stretch: some font families offer the ability to move characters closer or further apart by default. Possible values ​​are:
  • condensed
  • expanded
  • semi-expanded
  • extra expanded
  • ultra expanded
• unicode-range : defines the range of unicode characters supported by the font. Like all other properties, this one also has a default value which is U+0-10FFFF.

Conclusion

Usually it is not a good practice to use more than 2 fonts within your site (1 for the titles and one for the text). Remember that, a good site in addition to looking great, must also be functional!

If you liked the post, please recommend it to a friend or leave a comment below. Ta-ta for now!