So far, we have only talked about how to use custom fonts in WordPress that are hosted somewhere else, namely the servers of Google. However, it’s also possible to host fonts on your own site and offer them to visitors’ browsers from there.

3. Using @font-face

To do this, you first need to download the font in question. When you do, make sure you get it in a web font format. That means TTF, OTF or WOFF. You will find more information about it here.

Once you have your font files ready, you need to upload them to your WordPress site via FTP. A good place to store them is in a subdirectory of your child theme named fonts.

After that, you need to load the font in your style sheet via @font-face. Here’s what it looks like:

@font-face {
font-family: Roboto;
src: url(https://localhost/wordpress/wp-content/themes/twentyseventeen-  child/fonts/Roboto-Regular.ttf);
font-weight: normal;
}

Remember to replace the name of the font and address for its location on your own site. After that, your new custom font will be usable.

4. Enqueueing Fonts – The “WordPress Way”

If you truly want to add custom fonts to WordPress in the correct way, you will use your function.php file and the fuction wp_enqueue_script or wp_enqueue_style.

With their help, we can take the code snippets provided by the font sites. However, instead of copying theme into a file, we will add them to the header via a function.

What’s the difference between wp_enqueue_script and wp_enqueue_style? As their names suggest, one is for adding scripts, one for style sheets. Which one is right to use depends on how your custom fonts are provided from their source.

For example, Google Fonts gives you fonts as style sheets. In that case, you would add them to your WordPress site this way:

function add_google_fonts() {
wp_enqueue_style( ‘google_web_fonts’, ‘https://fonts.googleapis.com/css?         family=Open+Sans|Roboto’ );
}
add_action( ‘wp_enqueue_scripts’, ‘add_google_fonts’ );

In contrast to that, fonts from Adobe Edge Web Fonts come as JavaScript. Therefore, to enqueue them on your site, the code would look like this:

function add_adobe_fonts() {
wp_enqueue_script( ‘adobe_edge_web_fonts’, ‘//use.edgefonts.net/open-sans.js’ );
}
add_action( ‘wp_enqueue_scripts’, ‘add_adobe_fonts’ );

Wasn’t so difficult, was it? You now know how to add custom fonts to WordPress manually. Congratulate yourself. Obviously, same actions are possible via plugins. That’s what we will talk about next.