Skip to content

TechTalk #3 Using Google Fonts on Your Website

    Does your website use Google fonts?

    I am really excited to offer this new playlist of tech talks, together with Bridget Willard, and hope you will find them useful. An accessible net is only possible if we all understand how to use it. Let’s get everyone using and understanding the tools available!

    You can find our TechTalk Playlist on YouTube right here!

    Many of our website themes deliver fonts, icons, and other 3rd party material directly to our websites. This is easy and fast and something we don’t think about. This data is sometimes delivered unsecured, and over time it might become a lot of data, thus slowing down our websites.

    Alles auf Deutsch:
    “Google Fonts DSGVO-konform einbinden” finden Sie hier: https://digitalfahrschule.de/google-fonts-datenschutzkonform-einbinden

    What can we do about Google Fonts and Why is it Important?

    • + This is an easy thing to change on your website.
    • + This helps get your hands dirty and gives you confidence when it comes to larger problems.
    • + It is a free way to improve your website!

    STEP 1: Is your website bringing in, for example, Google Fonts?

    Go to datasykdd and check. https://webbkoll.dataskydd.net/de Is there a 3rd party data coming in? If not, then we’re done LOL! If there is we have a few things to do. You MAY want to have Google fonts in your website later, so you may like to watch to the end of our video.

    Do You Not Want Google Fonts?

    If you simply no longer want Google Fonts, and are happy with a system font – such as I have on my own website – you can block them. WordPress offers a few good plugins like Disable & Remove Google Fonts or Autoptimize. There is also a Google font blocker from Borlabs: https://borlabs.io/borlabs-font-blocker/

    STEP 2: How do I find the link to the fonts in my website theme?

    Open up your dashboard. Look at your Theme Editor. Fonts are usually called up in the header.php, or a similar file. Once you identify it, you can comment it out.

    Example:

    /** wp_register_style( 'accelerate_googlefonts', '//fonts.googleapis.com/css?family=Roboto:400,300,100|Roboto+Slab:700,400&display=swap' ); wp_enqueue_style( 'accelerate_googlefonts' ); /** 

    Note: when your theme updates, you will need to do this again, OR add a Child Theme. More about that in another talk!

    STEP 3: Go to Google Fonts and choose the fonts you want.

    https://fonts.google.com/ Google gives us free fonts that we can download to our own server. Download the fonts you want, and unzip the zip files they download in.

    STEP 4: Open up your website hosting, or FTP tool.

    Create a folder called Fonts in your wp-content folder – or similar media folder for your own CMS. Upload the font files into this folder.

    STEP 5: Let your website know you are using a specific font and where it is.

    After uploading your fonts, add the font family to your stylesheet.css file OR directly into the theme customizer. After that, add the path to your fonts also in your stylesheet.

    Example:

    This CSS tells my website what font family I want to use and where:

    body, p, h1, h2, h3, h4, h5, h6 {font-family: 'Send Flowers', cursive;} 

    This tells my website where it can find my font family:

    @font-face {
      font-family: 'Send Flowers';
      font-style: normal;
      font-weight: 400;
      src: local('Send Flowers'), local('Send-Flowers'), url('/wp-content/fonts/SendFlowers-Regular.ttf') format('woff2')
    }

    Save your stylesheet and now check to see if your website shows your font.

    ALL DONE! You have saved some data protection headaches and possibly sped up your website page speed. Great job!

    HOT TIP: You can do everything you need for the Google Font process now on one website: https://google-webfonts-helper.herokuapp.com/

    • Choose your Google Font
    • Get your CSS code for your theme
    • Download the Google Font zip file

    Contact Me with Your Questions About Website Page Speed too!

    Contact me if you have any questions! I’d love to help.

    With great thanks for the photo from Unsplash! https://unsplash.com/@brett_jordan