Loading the Google fonts locally instead of the Google servers

google_fonts
gdpr

#1

Objective:
Load the Google fonts locally instead of the Google servers.

Things to consider:
Some of the changes need to be done in the parent theme files which means that the changes will be overwritten with every theme update.

Implementation:
Below we have 2 ways to implement this:

Way 1 using both child and parent theme

  1. Edit enqueue-front-scripts.php file present in jupiter/framework/functions folder. Go to line 105 and comment the below lines of code:

     wp_enqueue_script(
     	'mk-webfontloader',
     	THEME_JS . '/plugins/wp-enqueue' . ( $is_js_min ? '/min' : '' ) . '/webfontloader.js',
     	array(),
     	false,
     	false
     );
    

    Commenting the above code will stop loading the Google fonts as well as the TypeKit fonts.

  2. Edit general-functions.php file present in jupiter/framework/functions folder. Go to line 406 and comment the below line of code:

    wp_enqueue_style( $font_family, '//fonts.googleapis.com/css?family=' . $font_family . ':100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic,100,200,300,400,500,600,700,800,900', false, false, 'all' );

    Commenting the above code will stop loading the Google fonts.

  3. Set your google font in Typography section in Theme Options or any shortcode (such as Fancy Title) like the way you used to do before.

    Screenshot Typography:

    Screenshot Fancy Titles:
    fancy_titles

  4. Download the fonts from Google Fonts website here: https://fonts.google.com
    Choose the font and then download the fonts like shown in the screenshot below:

  5. Generate their font face using this tool: https://transfonter.org/

    For more information see: https://crunchify.com/wordpress-google-fonts-load-locally/

  6. Add the generated font face and font files to your child theme like explained here:
    https://themes.artbees.net/blog/font-icons-custom-fonts-in-jupiter/

Way 2 using the child theme

  1. Add the below code to the functions.php file of your child theme.

     function remove_webfont_loader() {`
         wp_dequeue_script( 'mk-webfontloader',THEME_JS . '/plugins/wp-enqueue/min/webfontloader.js', array( 'jquery' ), THEME_VERSION, true );`
         wp_dequeue_script( 'mk-webfontloader',THEME_JS . '/plugins/wp-enqueue/webfontloader.js', array( 'jquery' ), THEME_VERSION, true );`
     }
     add_action( 'wp_print_scripts', 'remove_webfont_loader', 100 );
    
  2. Also, add the below code too. Remember that for each font family, you have to add wp_dequeue_style (‘FONT_NAME’); to the below function where FONT_NAME is the name of the font family that you have or want to add to the site.

     function remove_google_font() {
     	//Add the below line for each font family and change the font family inside wp_dequeue_style
     	wp_dequeue_style( 'FONT_NAME' );
     }
     add_action( 'get_footer', 'remove_google_font', 100 );
    

Now, follow the steps 3, 4, 5, 6 from the above Way 1.

Note: Below I have attached a child theme which consists of Open Sans fonts which cover steps 4, 5 and 6. If you add this child theme, you still need to complete steps 1, 2 and 3.


#2

Hi Danish,

How about dequeuing in functions.php?
Then the changes would be update proof?
Or is there something I’m missing?


#3

Thank you for the suggestion.

I have updated the post.

Thanks :slightly_smiling_face: