4 Effective Approaches for Hosting Google Fonts Locally in WordPress

There are several compelling reasons to locally host Google Fonts, with one of the primary motivations being the enhancement of your website’s loading speed.

Google Fonts provides an array of exceptional fonts to elevate the typography of your WordPress website. However, many website templates fetch these fonts from external sources, potentially impeding the speed of your web pages and influencing your ranking.

Fortunately, you have the option to host Google Fonts locally on your WordPress website, ensuring optimal performance. Continue reading as we elucidate the straightforward steps to achieve this.

Content:

  • What do Google Fonts entail?
  • How to Host Google Fonts Locally:
    • Option 1: Employ a WordPress Plugin for Local Hosting
    • Option 2: Utilize CSS for Local Hosting of Google Fonts on WordPress
    • Option 3: Leverage Google Web Fonts Helper
    • Option 4: Incorporate Local Hosting of Google Fonts through Your Theme
  • Conclusion
  • Common Queries About Google Fonts
    • What is the purpose of loading Google Fonts locally?
    • How can I integrate Google Fonts into my website locally?
    • What steps are involved in locally hosting Google Fonts in WordPress?
    • How do I independently host Google Fonts on my server?

What is Google Fonts?

Google Fonts constitutes an online repository of freely available and open-source fonts, meticulously developed and optimized by Google. These fonts are intended for utilization on websites and various digital projects.

Accessible to everyone, including web developers, designers, and website owners, Google Fonts serves as a valuable resource for enhancing the typography of websites. Its widespread usage is evident, with Google Fonts analytics indicating a total font view surpassing 75,000,000.

How to Host Google Fonts Locally in WordPress

There are multiple approaches to locally hosting Google Fonts on your website. In this article, we will elucidate four methods to accomplish this.

Option 1: Local Hosting with a WordPress Plugin

The most straightforward way to host Google Fonts locally on your WordPress website involves the use of a plugin. There are several plugins available for this purpose, such as the Fonts Plugin and the OMGF plugin, both boasting over 200,000 installations. For this guide, we will focus on the OMGF plugin.

To initiate local hosting with the OMGF plugin, follow these steps:

  1. Install the OMGF Plugin

Begin by installing the OMGF plugin to facilitate the local setup of Google Fonts.

Access your WordPress dashboard, navigate to Plugins > Add New, and proceed to the WP plugin page.

Add new plugins page - host google fonts locally

Enter “OMGF” in the search box. The plugin should be visible in the search results. Click on “Install Now” to proceed with the installation, and after that, click on “Activate” to enable the plugin on your website..

Host Google Fonts Locally

Configure the Plugin

After activating the plugin, proceed to set it up to ensure its functionality. To achieve this, navigate to Settings > Optimized Google Fonts.

Optimized Google Fonts settings - host google fonts locally

Upon reaching the Optimized Google Fonts plugin page, scroll down and select Save & Optimize. With this step, your setup is complete.

Congratulations! You’ve effectively hosted Google Fonts on your website.

Click Save and Optimize button

Option 2: Local Hosting of Google Fonts on WordPress via CSS

For those who prefer not to use a plugin, an alternative method exists for hosting Google Fonts without installation.

Here, we will guide you through hosting Google Fonts on your site using CSS.

Download Google Fonts

    Commence by visiting the Google Fonts platform to download your desired fonts. The platform provides an extensive array of fonts for your selection.

    Peruse the available fonts, adjusting the view and applying filters based on category and language to find your preferred fonts.

    Upon locating a font of choice, click on it, and then select “Download family” at the top right to initiate the download.

    For example, if you wish to install “Tulpen One,” perform a search, click on the font, and then choose “Download family.”

    Extract and Convert the Downloaded Font File

      Google Fonts downloads are typically in Zip format, so the first step is to extract the file. Locate the Google Fonts file in your downloads folder, right-click on it, and select ‘Extract.’

      Once the file is extracted, you’ll observe that the fonts are in TrueType font family (TTF) format.

      Click Download family

      Unzip and Convert the Downloaded Font File

      The font obtained from Google Fonts is typically stored in Zip format, requiring extraction. Locate the Google Fonts file in your downloads folder, right-click on it, and select ‘Extract.’

      After extracting the file, you’ll observe that the fonts are in TrueType font family (TTF) format.

      Extracted file in TrueType font format

      To incorporate the font into WordPress, it needs to be converted to the Web Open Font Format (WOFF) using a tool such as Transfonter or Convertio. For this guide, we’ll utilize Transfonter.

      Visit the Transfonter website, select “Add Fonts,” and upload the extracted font.

      Subsequently, click on the Convert button.

      Upload and convert extracted fonts

      Select the Download button after the font conversion is complete.

      Upload Fonts to Your Server

      Following this, you must upload the converted font file to your local WordPress site. For a successful upload, you’ll need an FTP program such as cPanel or FileZilla.

      In this guide, cPanel will be utilized. Log in to your cPanel, then click on ‘File Manager’ to reach the root folder.

      cPanel File manager

      While in the root folder, establish a new font directory if one doesn’t already exist.

      To achieve this, select the ‘+ Folder’ option located at the top-left.

      Click +Folder option

      Proceed by entering the folder name and selecting Create New Folder.

      Create new folder

      Now, click on Select File and pick the converted file for uploading to your website.

      Click upload

      Now, select the file by clicking on Choose File and proceed to upload it to your website.

      Select file and upload

      Connect New Fonts to Your Site’s CSS

      Once you’ve successfully uploaded the font files to your FTP, the next step is to incorporate the fonts into your site’s CSS using @font-face. To accomplish this, follow the steps outlined below.

      Initially, navigate to Appearance > Customize from your WordPress dashboard.

      Appearance >> Customize page

      Within the customization section, scroll downward and select Additional CSS.

      Additional CSS

      Now, copy the font-face code provided below and insert it into the Additional CSS panel.

      @font-face { font-family: ‘TulpenOne-Regular’; src: url(‘https://yoururl/fonts/tulpenone-regular.woff’) format(‘woff’); font-weight: normal; font-style: normal; }
      Additional CSS panel

      Be sure to substitute ‘yoururl’ with your website URL. Additionally, modify the font family to the one you downloaded from Google Fonts. In this instance, we employed the ‘Tulpen One family.’

      Once these adjustments are made, click ‘Publish.’

      Publish your changes - host google fonts locally

      Invoke the Fonts Through CSS

      Utilizing custom CSS is necessary to implement the font on the desired sections of your website.

      To achieve this, insert the following CSS code at the beginning of your child theme’s CSS file or via the Additional CSS section.

      body {     font-family: ‘TulpenOne-Regular’; } h1, h2, h3, h4, h5, h6 {     font-family: ‘TulpenOne-Regular’; }WordPress

      For this task, we will employ additional CSS. Return to the Additional CSS panel via Appearance > Customize.

      Customization page

      Within the Customize panel, scroll down and select Additional CSS.

      Additional CSS section - host google fonts locally

      In the Additional CSS panel, copy and paste the provided code, then click on the Publish button.

      Click Publish to save changes

      Note: The above code includes two sections allowing you to modify the font for the body and header of your page. Adjust the font family names to match the ones you uploaded; in this instance, TulpenOne was utilized.

      Congratulations! You have now successfully hosted and applied the TulpenOne-Regular font to your website.

      Option 3: Utilize Google Web Fonts Helper

      In the previous method, manual CSS rule editing and font file conversion were required before uploading to the server. What if there’s a more straightforward approach?

      Google Web Fonts Helper is a convenient tool that automates the process of locally hosting fonts on your site. It generates the CSS rule for the font and provides the format files in WOFF or WOFF2 formats. Here’s how to self-host Google Fonts using this method.

      To begin, visit Google Web Fonts Helper, where all Google Fonts are listed on the left sidebar. Locate the fonts you prefer.

      For this demonstration, we’ll use Roboto. Search for Roboto or your desired font in the left search bar and click on it.

      Search font to host

      Select Styles and Character Sets

      Before generating the CSS rule for the Google Font, it’s necessary to define the styles, character sets, and the type of browser support required. If you don’t have specific preferences, you can keep these settings at their default values.

      However, if support for older browsers is essential, opt for Legacy or Historic Support.

      As an example, we’ve chosen Latin and Latin-ext charsets, along with two styles: Roboto regular and 100 italic styles.

      Select charsets and styles

      Scroll down and opt for ‘Historic Support’ to guarantee compatibility with older browsers.

      You’ll find the font-face rules displayed for the two selected fonts.

      Choose Historic support - host google fonts locally

      Download Font Files

      Subsequently, download the Font file by clicking on the download button positioned at the bottom left corner of the page.

      Download font file - host google fonts locally

      Note: Keep the Google Web Fonts Helper page open; you’ll need to return to it.

      Unzip the Downloaded Font File

      Find the font file in your download folder and unzip it. As depicted below, our download is in WOFF2 format, the preferred format.

      This eliminates the necessity of using tools like Transfonter or Convertio, as required in the previous method.

      WOFF2 file

      Upload Fonts to Your Website

      Similar to the previous method, you’ll have to upload the font files to your server using an FTP tool such as FileZilla or cPanel.

      For consistency, we’ll use cPanel as before. Log in to your cPanel console, then navigate to File Manager > + Folder to create a new font folder if one doesn’t exist.

      Create new folder

      Access the newly created font folder (which should be empty). Select Upload in the top right corner of the page.

      This action will redirect you to a different page where you can proceed to upload the font file, ensuring that you’ve already extracted it.

      Upload the font file

      Click on Choose File and pick each font style from the extracted file, continuing until you’ve uploaded all of them.

      In our scenario, we downloaded two font styles, and both have been successfully uploaded, as illustrated below.

      Upon completion, you can exit the cPanel.

      Download and upload font style

      Copy Font-Face File

      Return to the Google Web Fonts Helper page. Scroll downward and replicate the Font-face code. You’ll have to insert it through the Additional CSS section.

      Insert Font-face code - host google fonts locally

      Access the Additional CSS panel by selecting Appearance > Customize.

      Appearance >> Customize page

      Within the Customize panel, scroll down and choose Additional CSS.

      Additional CSS section

      Insert the copied Font-face code and then click on Publish.

      Publish changes - host google fonts locally

      Enable the Installed Font

      To enable the font on your website, you need to insert another code into your Additional CSS.

      Copy the code and paste it beneath the previously added font-face code. Subsequently, click on Publish to save the changes.

      body {     font-family: ‘Roboto-italic’; } h1, h2, h3, h4, h5, h6 {     font-family: ‘Roboto-Regular’; }WordPress

      Note: This code enables you to specify the fonts for the body and headers of your pages. We used Roboto as an example, so replace Roboto-italic and Roboto-Regular with your preferred font families.

      As evident below, the font has now switched to Roboto, indicating successful local hosting of Google Fonts.

      Option 4: Locally Host Google Fonts Through Your Theme

      Certain WordPress themes include the Google Fonts optimization option, allowing you to self-host Google Fonts locally without the need for manual coding.

      Themes such as Astra and Nexter WP incorporate this feature. Let’s explore how it functions with the Astra theme.

      Host Google Fonts Locally with Astra Theme

      Navigate to Astra from your WordPress dashboard and then select Settings.

      Astra settings

      Within the Settings Page, select Performance. Subsequently, switch on the “Load Google Fonts Locally” option.

      Toggle on "Load Google Fonts Locally"

      Activating this feature initiates a Google API request, collecting all fonts and asset files and storing them locally on your server.

      Preload Local Fonts

      Typically, the browser directly loads fonts from your server whenever a request is made. However, this process can be time-consuming, impacting your site’s loading speed.

      To expedite loading, preloading fonts instructs the browser to import the fonts early. Fortunately, Astra streamlines this process with a single click. Enable the Preload Local Fonts toggle to implement this optimization.

      Turn on Preload Local Fonts toggle - host google fonts locally

      Clear Local Font Cache

      A drawback of storing items locally is the absence of automatic updates when they become available. This applies to locally hosted Google Fonts as well.

      To address this, the Flush Local Fonts Cache feature becomes valuable. This feature permits you to refresh your locally hosted Google Fonts whenever necessary.

      To activate this feature, click on the Flush Local Fonts Cache button.

      Click the Flush Local Fonts Cache button - host google fonts locally

      Congratulations, you have successfully hosted Google Fonts on your WordPress website using your theme. Well done!

      Google Fonts FAQ

      Why should I load Google Fonts locally?

      Loading Google Fonts locally can enhance your site’s speed by reducing the number of HTTP requests and mitigating risks associated with depending on third-party resources like Google CDN. This ensures optimal site performance even if there are delivery issues.

      How can I add Google Fonts to my website locally?

      To add Google Fonts to your website, a common method involves using CSS font face. Download your preferred font from Google Fonts, upload the font files to your website using an FTP client, and then call the font using Font-Face and CSS.

      How do I host Google Fonts locally in WordPress?

      For WordPress, you can use a plugin like OMGF | Host Google Fonts Locally. Certain themes, such as Astra and Nexter WP, include a Google Font Optimization option, allowing local hosting without requiring code snippets.

      How can I host a Google Font on my own server?

      To host Google Fonts locally on your server, download the font files from Google’s website or via Google Web Fonts Helper. Subsequently, upload them to your server using an FTP tool like cPanel or FileZilla, and then call them using Font-Face and CSS.

      Conclusion

      There you have it – four different methods to host Google Fonts on your WordPress website. Keep in mind that this process significantly improves website loading speed, making each step worthwhile.

      Leave a Reply

      Your email address will not be published. Required fields are marked *