Self – Hosting Google Font

Home Forums Support Self – Hosting Google Font

Home Forums Support Self – Hosting Google Font

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #199537
    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

    #199565
    Tom
    Lead Developer
    Lead Developer

    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/

    #199675
    George

    Thanks Tom! That fixed it perfectly! Now a perfect score, despite using Google fonts! ๐Ÿ™‚

    #199797
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.