Self – Hosting Google Font

[George]

Hello Tom,

I’m looking over this page — https://google-webfonts-helper.herokuapp.com/fonts

And it discusses how to host your own Google font. The reason why I’m interested is because of the lousy score I get on https://tools.pingdom.com/ with ONLY this issue.

E Score — All my other scores are perfect.

The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:
https://fonts.googleapis.com/css?family=Basic:regular
MORE AT GOOGLE DEVELOPERS

If I want to host it, how would I change the nature using the functions.php file.

I’m supposing I need to do something like this —

// remove Google Font
add_action( ‘wp_enqueue_scripts’, ‘my_deregister_styles’, 100 );

function my_deregister_styles() {
wp_deregister_style( ‘Basic’ );
}

// add custom fonts
add_action( ‘wp_enqueue_scripts’,’addmyown_fonts’);

function addmyown_fonts() {
wp_enqueue_style( ‘my-fonts’, ‘http://www.mywebsite.com/fonts/basic’ );
}

Then add to my CSS something like —

/* basic-regular – latin */
@font-face {
font-family: ‘Basic’;
font-style: normal;
font-weight: 400;
src: url(‘../fonts/basic-v6-latin-regular.eot’); /* IE9 Compat Modes */
src: local(‘Basic Regular’), local(‘Basic-Regular’),
url(‘../fonts/basic-v6-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘../fonts/basic-v6-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘../fonts/basic-v6-latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘../fonts/basic-v6-latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘../fonts/basic-v6-latin-regular.svg#Basic’) format(‘svg’); /* Legacy iOS */
}

If I were to use Google Basic for example.

Would this work? Or should I look for a different work around?

Thanks,

George

[Tom]

You would do something like that.

First you would remove GP’s Google fonts:

add_action('after_setup_theme','generate_remove_google_fonts_stylesheet');
function generate_remove_google_fonts_stylesheet()
{
      remove_action('wp_enqueue_scripts','generate_display_google_fonts', 0);
}

Then add your own doing something like this: https://css-tricks.com/snippets/css/using-font-face/

[George]

Thanks Tom! That fixed it perfectly! Now a perfect score, despite using Google fonts! 🙂

[Tom]

Glad I could help 🙂

[Author]

Posts