Add a Custom Font to the WordPress Theme

Adding a custom font to a WordPress theme can be useful when you want to enhance the typography of your website and make it stand out. By following the WordPress coding standards, you can ensure that your code is clean and maintainable.

To add a custom font to a WordPress theme, you can use the wp_enqueue_style() function to enqueue a stylesheet that contains the font’s CSS. Here’s an example code snippet:

function wpsnippets_enqueue_custom_font() {
    wp_enqueue_style( 'custom-font', get_template_directory_uri() . '/fonts/custom-font.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_font' );

In this example, we define a custom function wpsnippets_enqueue_custom_font() that uses the wp_enqueue_style() function to enqueue a stylesheet named ‘custom-font’. The get_template_directory_uri() function is used to get the URI of the current theme directory, and we append ‘/fonts/custom-font.css’ to it to specify the path to the font’s CSS file.

To use this code snippet, you need to create a CSS file that contains the font’s styles and save it in your theme’s ‘fonts’ directory. Make sure to replace ‘custom-font.css’ with the actual filename of your font’s CSS file.

Once the code is added to your theme’s functions.php file, the custom font will be loaded on your WordPress site. You can then apply the font to specific elements using CSS.

Remember to replace ‘custom-font’ with a unique and descriptive handle for your font, and adjust the file path and name according to your font’s CSS file.

Examples

Example 1: Adding a Custom Font using @font-face

This example demonstrates how to add a custom font to a WordPress theme using the @font-face CSS rule. First, you need to upload the font files to your theme’s directory. Then, you can use the wp_enqueue_style() function to enqueue a custom CSS file that includes the @font-face rule.

function wpsnippets_enqueue_custom_font() {
    wp_enqueue_style( 'custom-font', get_stylesheet_directory_uri() . '/custom-font.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_font' );

In the custom-font.css file, you can define the @font-face rule to specify the font family, font files, and font formats.

@font-face {
    font-family: 'Custom Font';
    src: url('custom-font.woff2') format('woff2'),
         url('custom-font.woff') format('woff');
    /* Add more font formats if necessary */
    /* Specify font-weight and font-style if needed */
}

Example 2: Adding a Custom Font using Google Fonts

This example demonstrates how to add a custom font to a WordPress theme using Google Fonts. You can use the wp_enqueue_style() function to enqueue the Google Fonts stylesheet.

function wpsnippets_enqueue_custom_font() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Custom+Font' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_font' );

Replace Custom+Font with the name of the desired font from Google Fonts. You can also specify multiple fonts by separating them with the | character.

Example 3: Adding a Custom Font using a Plugin

This example demonstrates how to add a custom font to a WordPress theme using a plugin. First, you need to install and activate a font plugin, such as “Use Any Font”. Then, you can use the plugin’s interface to upload and assign the custom font to your theme.

After activating the plugin and uploading the font files, you can use the plugin’s shortcode or PHP function to display the custom font in your theme.

echo do_shortcode( '[useanyfont font_family="Custom Font"]Custom text[/useanyfont]' );

Replace Custom Font with the name of the uploaded font. You can also use the useanyfont shortcode or function with additional attributes to customize the font size, weight, style, and more.