Adding Custom Fonts to WordPress

Websites live and die by their design. One of the biggest aspects a web designer has control of is typography. As many websites passionately argue, there are many ‘do’s & don’ts’ of typography. Here is a great resource I recommend that helps a designer understand just how much thought and work can go into developing a consistent design language:

https://typographyhandbook.com/

In WordPress you are often limited by the fonts made available by the theme you chose. Often themes will try to gate ‘premium fonts’ behind a paid version of the theme. With a little bit of time and energy you can add your own fonts to the site without having to utilize the base fonts provided by the theme.

1.Create folder called “webfonts” in web root

2.Upload multiple different versions of font (for different browsers/devices)

When we declare fonts properly it’s recommended to support multiple different font formats. Different browsers will try to use different font formats.
Using the website: https://caniuse.com/ is often a great tool for checking compatibility

3.Use onlinefontconverter.com
    Recommended formats: eot, woff, ttf, svg

4.Create file called “stylesheet.css”

5.Declare different font faces

@font-face {
    font-family: GothamBold;
    src: url("/wp-content/webfonts/Gotham Bold/GothamBold.eot"); /* IE9 Compat Modes */
    src: url("/wp-content/webfonts/Gotham Bold/GothamBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("/wp-content/webfonts/Gotham Bold/GothamBold.woff") format("woff"), /* Modern Browsers */
         url("/wp-content/webfonts/Gotham Bold/GothamBold.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("/wp-content/webfonts/Gotham Bold/GothamBold.svg#GothamBold") format("svg"); /* Legacy iOS */
}

6. In custom CSS call the stylesheet and use a selector to set whichever font you require

@import url(/wp-content/webfonts/stylesheet.css);
body { font-family:'GothamBook',sans-serif;}