Your Interactive Tool Belt

Add Google Fonts to HTML5

Last updated on February 21, 2017

Google Fonts are very common in website designs and are often used as they are widely supported by many browsers. Export Kit makes it easy to add Google Font to your PSD design. You can use Google Fonts with any web-based export including HTML5, CSS3, JavaScript, jQuery and WordPress.

AUTOMATIC PROCESS

NOTE: This process is automatic for HTML, PHP, and WordPress when Use CSS/Web Fonts is enabled and will add the script link to your project.

IMPORTANT: All other environments will need to add the script link to the Custom HEAD. Once the script link is added, there are no other options to configure.

We have a custom JavaScript for adding Google Fonts to any website. The script is open-source and free as air, so use it any way you feel. Our auto-loader is pure JavaScript and has no dependencies so you can include it with any JavaScript / Web project that requires Google Fonts.

You can optionally copy the code above to create a local version of the Google Font Auto Loader, this will localize your assets and minimize external calls from your server.

Working with WordPress

Create a file called ek-googlefont-autoloader.js in your theme template folder, then copy and paste the code above into the file. In your custom.php you can enqueue the script normally by adding the following code: