Add Google Fonts to a WordPress Website

The only WordPress newsletter you need Join 1000's of fans and customers just like you. Always awesome and never spam.

Email*

Name

This field is for validation purposes and should be left unchanged.

Δdocument.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

gform.initializeOnLoaded( function() {gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_2').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_2').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_2').text());}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger("gform_pre_post_render", [{ formId: "2", currentPage: "current_page", abort: function() { this.preventDefault(); } }]); if (event && event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_2" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_2"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_2" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [2, current_page] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 2, currentPage: current_page } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } );} );

What do Steve Jobs, movie posters, comics, and your favorite blog have in common?

They all stress brilliant typography. Who wants to read anything if it is unbearable to do so? Font type and size are critical elements in determining the success of a major call-to-action or the likelihood of someone reading your 7,000 word review on Disney’s newest attraction.

With resources like Google Fonts, it is easy to find the font to match your tone and style. But how do you implement it on your WordPress website? Well, my friend, you are going to want to continue reading for the answers.

Finding the right Google Font

The first thing you will need to do is find the right font that you want to use. Google has a huge library of fonts and can be sorted and filtered by popularity, font weight (thickness) and other elements.

It does not matter what font you select from the site as you will ultimately be able to copy the code in the same fashion regardless the font. Once you have made your selection, you will want to click on the box with the arrow pointing to the right to be taken to the next step.

In the next step, you will be able to select any and all font weights that you would like access to on your theme. Maybe you want your title or H1 text to be thicker than your content. Maybe you want it all the same.

This page will also tell you the page load speed of the font. Perhaps that font looks nice, but it is a resource hog.

Find out what font a site is using

What if you are stuck and don’t know what font you would like to use for your site. First, try going to the blog that you really like or another site where you really admire the typography. Go to a CSS viewer or source viewer and try to find out what font is being used on that site. You could mimic them.

Want something cooler? You can always use Font Face Ninja, a FREE Google Chrome and Safari extension that literally tells you what font a site is using. It truly is a cool free tool of the web.

Putting the font on your site

Okay, so you have exhausted your resources and found the ultimate Google Font for your WordPress website. Now, you actually have to get that font on the site. So, how do we put a Google Font on a WordPress website?

Step 1) Put Javascript in the Header

On the page where you view the page load speed and different weights, you scroll to the bottom and select the “Javascript” option. This will be a long piece of code that you will want to copy and paste at the top of your Header or <head> section in the HTML code of your website. This will activate the font so that it is retrieving the font.

Step 2) Grab CSS code

In section 4 of the page, you will notice a small line of code for CSS. You want to copy this code so that you can reference it. This code will allow you to choose where the new font appears on the site.

Step 3) Put CSS code between brackets of your chosen font

Time to learn a bit of CSS. Don’t worry, it won’t hurt too much.

If you are at all familiar with CSS, you will know that you need to put any code changes between brackets as they apply to different classes on your website.

If you want all of the fonts on your site to be the new Google Font, with some possible theme exceptions, you will want to use the body HTML element, like so:

body {
font-family: 'Lobster', cursive;
}

Step 4? Different Google Font weights

If your selected Google Font has different weights and you want to add function for different weights, you can do so by registering all requested fonts and then adding an additional line of code to the CSS to determine font weight of a specific element, like this example:

body {
font-family: 'Lobster', cursive;
font-weight: 400;
}

Custom Scripts and Styles

Confused about where to go to modify this information? With pro versions of our Slocum Themes, there is a tab for custom scripts and styles so that you can very easily make these changes. Go to Appearance > Theme Options and navigate to the Custom Scripts and Styles tabs. There you will find an entry box where you can paste the Google Font Javascript code to the header. Below that, you will find a CSS area where you can paste the Google Font code you would like for making modifications to the CSS.

Here is a before and after image of our themes, the first with a default theme font and the second with the new Google Font once the above code pasted into the custom scripts and styles on the WordPress theme.

BEFORE

AFTER

As you can see, simply modifying the font can have a serious impact on how your website looks and feels. Have fun adding Google Fonts to your WordPress website and let us know if you have any questions below.

We hope that you enjoy our content. If you decide to make a purchase after clicking on one of our affiliate links, we’ll earn a small commission at no extra cost to you. Thanks for reading! View our Affiliate Disclosure

Share Tweet Share

The only WordPress newsletter you need Join 1000's of fans and customers just like you. Always awesome and never spam.

Email*

Name

This field is for validation purposes and should be left unchanged.

Δdocument.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

stella

March 30, 2022 at 12:10 am

What is the brand font used by Notion?
You could play with default settings in any way you want there. Unfortunately, you can’t change the default font in Notion. The app’s default font is Sans-Serif Workhorse, and all you can do is change the font by clicking on the page menu (three horizontal dots in the top right-hand corner).
Ezzee Fonts

Marc Jacob

June 20, 2022 at 12:28 am

wow.
I should appreciate your hard work. This information that you share about adding fonts to the WordPress website is very useful to me.
Thanks, Dan Zarzycki

How to Add Google Fonts to a WordPress website