How to add Webkit Fonts to WordPress Themes

My initial thoughts are to implement the Webkit fonts inclusion either in the CSS file or the functions.php file. Both files being a part of the WordPress theme or child theme.

A typical WebKit font file reference.

<link rel=”stylesheet” href=”https://use.typekit.net/aa7aa7a.css” />

Where in the above aa7aa7a is a random project ident used for illustration only.

For a simple html web page this can be included within the header. Indeed the same can also be done for WordPress but it’s deemed to be better practice to avoid adding external references in this way.

We can either include the reference like this, using the functions.php file or as an import within the CSS.

The necessary changes can be made:

• through the website. If the files exist they are available through the Appearance > Editor page
• the requisite files may be downloaded via FTP and edited
• Or accessed via the hosting control panel’s File manager.

Looking at the two approaches of CSS or functions.php:

CSS File

The traditional method whereby the reference to an external file is added within the first few lines of a CSS file.

This is the simplest implementation, requiring the addition of a single line of text.

The reference may be given in URL style

@import url(“https://use.typekit.net/aa7aa7a.css”);

or as a string

@import “https://use.typekit.net/aa7aa7a.css”;

Don’t forget to put this inclusion at the top of the document, but after the character set definition, before your CSS definitions.

Adding a font reference as an inclusion within a CSS file is easy, as given above. But chained references are slower to load as each is dependant upon its “parent” reference being loaded first.

WordPress uses a file called style.css to configure its theme details. You can use this file.

However frequently this file may be kept to a minimum and the majority of the CSS configuration found within another. Determine this by looking in the file functions.php, or via view source of the browser, looking for references to a CSS file within the active theme.

Look in the directories below /wp-content/themes/theme-name/ for both of these files.

As an example the WordPress Twenty Nineteen theme uses the style.css file. Shown below is its reference obtained by viewing the page source of a website with this as the active theme.

<link rel='stylesheet' id='twentynineteen-style-css'  href='http://localhost/wordpress/wp-content/themes/twentynineteen/style.css?ver=1.3' type='text/css' media='all' />

functions.php File

Using the functions.php file enables the addition of the file reference as given by Webkit.

The file is to be found within the currently active theme’s files. The example below is for the default WordPress Twenty Nineteen theme.

/wp-content/themes/twentynineteen/functions.php

Within the file add an include reference to the external file.

wp_enqueue_style( ‘Azo Sans’, ‘https://use.typekit.net/aa7aa7a.css’, false );

Illustrated below is the reference to the Webkit font added to the WordPress child theme scripts enqueue function wp_enqueue_scripts

function theme_enqueue_styles() {
  // Get the theme data
  $the_theme = wp_get_theme();
  wp_enqueue_style( 'theme-styles', get_template_directory_uri() . '/css/theme.min.css', array(), $the_theme->get( 'Version' ) );
  wp_enqueue_style( 'child-theme-styles', get_stylesheet_directory_uri() . '/css/child-theme.css', array(), $the_theme->
get( 'Version' ) );
  wp_enqueue_script( 'jquery');
  wp_enqueue_script( 'child-theme-scripts', get_stylesheet_directory_uri() . '/js/child-theme.js', array(), $the_theme->get( 'Version' ), true );
  wp_enqueue_style( 'fontawesome', get_stylesheet_directory_uri().'/css/all.min.css', array(), '1.1');
  wp_enqueue_style( 'Azo Sans', 'https://use.typekit.net/aa7aa7a.css', false );
 }
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Its common for the functions.php file to contain the above function, or equivalent. To add the Webkit font reference look to see whether it exists before creating your version.

Take care editing the file. Breaking it may make your website inaccessible.

WordPress’ enqueue function is designed to avoid duplication of references. You could therefore create your own function which you can add whenever you require a reference to a WebKit font.

function webkit_fonts() {
     wp_enqueue_style( 'webkit_fonts', "https://use.typekit.net/aa7aa7a.css", false );
 }
 add_action('wp_enqueue_scripts', 'webkit_fonts');

Using the font

Whichever of the two implementations above you choose to adopt the font is used by defining the CSS property font-family.

The font is referenced within the CSS file as follows:

body{font-family: ‘azo-sans-web’, sans-serif;}