Jump to content
Sign in to follow this  
WHMCS John

Using Local Fonts

Recommended Posts

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated