Hosting Fonts Locally

One of the things that can slow down your website and affect performance is that your website has to load Google Fonts via a script. The alternative is to download the font and store it on your website. 

Using local fonts on a website offers several benefits:

  1. Faster Load Times: When you use local fonts, the font files are stored on your web server and can be loaded directly from there. This eliminates the need for external font services or resources, reducing the number of HTTP requests and potentially improving page load times. Faster load times contribute to a better user experience and can positively impact your website’s search engine ranking.
  2. Privacy and Security: When using local fonts, you don’t have to rely on external font services that may track user behavior or collect data. This can help protect user privacy and enhance the security of your website by reducing potential vulnerabilities associated with third-party services.
  3. Consistent Design: With local fonts you can ensure that the intended typography and design of your website are preserved across different devices and browsers. By relying on locally installed fonts, you have greater control over how your text appears, regardless of whether the user’s device has the font installed.

Masterpiece Addon provides the opportunity to add Local Fonts easily through the WordPress panel

To add self-hosted Google Font access the Google WebFonts Helper, select a font and required charsets and styles. 

Download the font and unzip the archive. Then proceed to Transfonter, upload the font files from the unzip archive, and click on the Convert button. 

After the conversion you can download your font-face kit, proceed to the Addon Settings – Local Fonts tab and click on the ‘Add New’ button. Enter the Font Name (for example, you can name it using the font family name + ‘Local’, e.g. Epilogue Local) and upload the .zip file – that’s all, your font is now hosted locally!

Add New Local Font

Please choose exactly the Local font from the Fonts dropdown list while filling the Global Fonts or setting the font in the widget settings.