Archived topic
Self - Hosting Google Font
3 replies · Started by George on June 5, 2016
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
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/
Thanks Tom! That fixed it perfectly! Now a perfect score, despite using Google fonts! :)
Glad I could help :)
