Support » Theme: Tracks » Google fonts on Google Chrome issue

  • Hello Ben

    I actually have two issues, which are driving me mad and which prevent the site from displaying correctly in both major browsers.

    1. In Internet Explorer 11 the featured image with zoom effect jumps ~1px on hover. Same happens with the excerpt, the letters jump. You can see it even on your own demo, just open it in IE 11.

    2. In Chrome the featured image doesn’t jump on hover. However, Chrome displays fonts incorrectly for non-latin languages. IE11 doesn’t have this problem, btw. Don’t know how, but somehow it pulls correct Google font even when the subset is not stated, while Chrome cannot do this trick.

    While I don’t know if you can actually fix the jumping in IE11 (actually it’s the only design I’ve seen with such effect that has this kind of issue in IE11, but still). However, I’d like to at least fix Chrome.

    To do that I need to know where in the theme it pulls the line with Raleway font from:

    <link rel='stylesheet' id='ct-tracks-google-fonts-css' href='//fonts.googleapis.com/css?family=Raleway%3A400%2C700&ver=4.4.1' type='text/css' media='all' />

    and add my font subset instead of this unknown string: “%3A400%2C700&#038”

    How do I do that?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Okay, I found it. I also found out what this “%3A400%2C700&#038” gibberish was. Is there a way to add the & or : symbols to that string?

    Theme Author Ben Sibley

    (@bensibley)

    Thanks for choosing Tracks!

    The links are encoded on output which is what those symbols are. You’ll want to edit the fonts used in the back-end, rather than trying to modify the encoded output.

    If you’re comfortable working with child themes and a bit of PHP, I can help walk you through that. Otherwise, I’d recommend using the Easy Google Fonts plugin to switch fonts.

    The Raleway font used doesn’t have a wide character set for many languages, which is why some characters may not be displaying. Some browsers are better (or more opinionated) about filling missing character glyphs. I would recommend trying the Noto Sans font family as this font was designed by Google for multilingual purposes.

    It looks like a bug was introduced in IE11 when transitioning the opacity of an element. Always one step forward two steps backwards with them, huh 😉

    You can add the following CSS to your site to keep the excerpts at full opacity before hovering, and this will remove the jumping:

    .excerpt {
      opacity: 1;
    }

    Copy & paste the code above into the “Custom CSS” section in the Customizer (Appearance > Customize), and it should take affect right away.

    Those symbols are font weights from your scripts.php file.

    In your source it goes like this:
    wp_register_style( 'ct-tracks-google-fonts', '//fonts.googleapis.com/css?family=Raleway:400,700' );

    However, WP for some reason encodes everything after Raleway. If you see the source code in browser you will see this output:

    <link rel='stylesheet' id='ct-tracks-google-fonts-css' href='//fonts.googleapis.com/css?family=Raleway%3A400%2C700&ver=4.4.1' type='text/css' media='all' />

    As you see, :400,700 turns into %3A400%2C700.

    Therefore, any attempt at adding a subset via & turns into the same gibberish output as with your original attempt at loading font weights.

    The question is, how to prevent WP from encoding : and & into html entities?

    It’s not a Raleway issue. It has the required subsets, and IE displays it correctly, like I said (although I think that’s because I have Raleway installed locally on my system). Chrome and Opera do not display it at all for my language, except for numbers.

    P.S. – An important thing to remember with Google fonts is that by default (when no other subsets are requested) it outputs only Latin subset. That means that even if the font does have other subsets (Cyrillic, for example) they won’t be loaded unless you request them.

    It means that
    fonts.googleapis.com/css?family=Raleway
    will only apply to English/other Latin-based text and numbers, but won’t be applied to, say, text in Russian.

    But
    fonts.googleapis.com/css?family=Raleway&subset=cyrillic
    will apply both to Latin-based languages and to Cyrillic-based languages.

    Theme Author Ben Sibley

    (@bensibley)

    Yes, I understand that the “gibberish” comes from the weights 🙂

    This is how it is supposed to work, and is not a problem for loading the weights or subsets. You can see by examining the Tracks demo site that Chrome understands this (screenshot).

    The google fonts request in Tracks is registered before being enqueued, so it can be easily deregistered. You can then register the new request including the subset you want like this:

    function ct_tracks_child_deregister_gf() {
      wp_deregister_style( 'ct-tracks-google-fonts' );
      wp_register_style( 'ct-tracks-google-fonts', '//fonts.googleapis.com/css?family=Raleway:400,700&subset=cyrillic' );
      wp_enqueue_style( 'ct-tracks-google-fonts' );
    }
    add_action( 'wp_enqueue_scripts', 'ct_tracks_child_deregister_gf', 20 );

    That can be added into the functions.php file of a child theme. You can click here to download a Tracks child theme to get started with.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Google fonts on Google Chrome issue’ is closed to new replies.