Using custom fonts hosted on AWS S3 in a WordPress site

I have fonts from typography.com that I moved to production and uploaded to my AWS S3 Bucket to use on my WordPress site. I have done everything that typography.com has told me to do, but the fonts still are not being displayed. Has anyone gone through this before and can point me in the right direction? I added an @import statement in style.css in my theme to the url that typography.com gave me. I also have a wp_enqueue function in functions.php that I have uploaded to the S3 server.

 add_action( 'wp_head', 'my_fonts' );
function my_fonts(){ ?>
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/7783912/761788/css/fonts.css">
<?php
}

The fonts are still not being displayed. What am I doing wrong?

Related posts

1 comment

  1. The proper way to include stylesheets is to use wp_enqueue_style. Using this function will also allow you to declare this font as a dependency for other stylesheets. You should also use the 'wp_enqueue_scripts' hook, as opposed to 'wp_head':

    /**
     * Proper way to enqueue scripts and styles
     */
    function theme_name_scripts() {
        wp_enqueue_style( 'typography', '//cloud.typography.com/7783912/761788/css/fonts.css' );
    }
    add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
    

    If you’re still having issues at this point, make sure you have the proper permissions to GET this file from the Typography cloud server.

Comments are closed.