Using Local Fonts

[WHMCS John]

Google Fonts is a library of 1462 open source font families. It's used by many websites and applications - including WHMCS - to display high-quality and appealing fonts consistently across different devices, platforms and Operating Systems. The fonts are hosted and maintained by Google, eliminating the need to maintain your own font repository.

Some users may wish to not use Google Fonts, for example if access is blocked by national firewalls or its use restricted by legislation. This guide demonstrates how to do so. There are two approaches:

1. Disabling Google Fonts - Quick and easy. Visitors will see the nearest equivalent font per their device or OS settings.
2. Hosting Google Fonts on your website - Provides the benefits of Google Fonts, with additional maintenance overhead for you.

This guide assumes familiarity with the  Themes documentation and the described modifications are being made to a Child Theme of the Twenty-One parent theme.

 

Disabling Google Fonts

1. Edit the /template/$templatename/includes/head.tpl template file from your Child Theme directory.
2. Delete the following line:

   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">

3. Save the file.

That's all there is to it!

 

Hosting Google Fonts on your website

1. Download the fonts used by WHMCS using the Google Web Fonts Helper:
   • Open Sans
   • Raleway
   • Indie Flower
2. Unzip the files.
3. Upload the contents of the zip files to the /template/$templatename/css/ directory
4. Edit the /template/$templatename/css/custom.css (create the file if it doesn't already exist) in your Child Theme directory.
5. Add the following content:

   /* open-sans-regular - latin */
   @font-face {
     font-family: 'Open Sans';
     font-style: normal;
     font-weight: 400;
     src: url('open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
     src: local(''),
          url('open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
          url('open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
          url('open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
          url('open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
   }
   
   /* raleway-regular - latin */
   @font-face {
     font-family: 'Raleway';
     font-style: normal;
     font-weight: 400;
     src: url('raleway-v28-latin-regular.eot'); /* IE9 Compat Modes */
     src: local(''),
          url('raleway-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('raleway-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
          url('raleway-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
          url('raleway-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
          url('raleway-v28-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
   }
   
   /* indie-flower-regular - latin */
   @font-face {
     font-family: 'Indie Flower';
     font-style: normal;
     font-weight: 400;
     src: url('indie-flower-v17-latin-regular.eot'); /* IE9 Compat Modes */
     src: local(''),
          url('indie-flower-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('indie-flower-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
          url('indie-flower-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
          url('indie-flower-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
          url('indie-flower-v17-latin-regular.svg#IndieFlower') format('svg'); /* Legacy iOS */
   }

6. Edit the /template/$templatename/includes/head.tpl template file from your Child Theme directory.
7. Delete the following line:

   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">

8. Save the file.

Fonts are now being loaded from your website for visitors, and not from the Google Fonts repository.

 

At the time of writing this post, this process was tested on the latest stable release of WHMCS 8.6.1.

If you have any feedback or questions, please feel free to reply to this thread!

[Mandalorian]

Thank you. This was much needed.

Wondering if there's a way to disable "Stripe" cookies too which are activated by default for every visitor.