Default fonts: Please specify them!

  • yogaspy · Member ·

    The Customizer option for fonts is great, but I dislike the way the default font is visible for a second before the new font appears.

    For example, using Gazette, I originally tried Oswald for headings and Source Sans Pro for body text, but the switch was painfully obvious, so by trial and error I found fonts that appear close to the defaults (Lato ultra bold and Lora?).

    Please specify the default fonts (headings; body text) for the following:

    Gazette

    Canard (which is vying with Gazette for this blog)

    Pique (which I’m trying for my other blog, luciyamamoto.com)

    My suggestion: Specify the default fonts in theme specs or add an option to revert to them in the Customizer.

    Thanks,
    LY

    The blog I need help with is: (visible only to logged in users)

  • timethief · Member ·

    If you want your feedback to reach Staff then type modlook into the sidebar tags on this thread for a Staff follow-up. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Also subscribe to this thread so you are notified when they respond and be patient while waiting. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.

  • yogaspy · Member ·

    I am subscribed, but my attempts to add the modlook tag have been futile!

  • timethief · Member ·

    Look at tags sidebar please. :) That’s because I already added it.

    We all wait in the queue for Staff to respond to threads tagged with modlook. Staff will respond to all threads with datestamps prior to this one in datestamp order and work their way forward to the most recent one as would be expected. They have a backlog so be patient.

  • yogaspy · Member ·

    Thanks! My overarching query for the moderator:

    Is there a solution to the “time lag” problem when changing fonts?

    (For example, one of the “Awesome blogs using Gazette,” https://back2spain.com, is awesome. But the obvious switch in fonts is distracting, almost like a special effect.)

  • gemmacevans · Staff ·

    Hi @yogaspy,

    Is there a solution to the “time lag” problem when changing fonts?

    Are you seeing this ‘lag’ when using the Customizer to select fonts? Or when loading or refreshing a page on your site?

    Once I know more I’ll take a look.

  • benjamineskola · Member ·

    This sounds like the issue I’m having, in which the text is visible in a default font for a moment before the chosen custom/premium font is applied, on a page load/refresh (at least with a clean cache).

  • chad1008 · Staff ·

    Specify the default fonts in theme specs or add an option to revert to them in the Customizer.

    When you’re in the Customizer, if you choose a custom font, you can click the X next to it’s name on the Fonts pane to remove the custom font and go back to the default for your theme :)

    The change in the font that you see when your page loads is one of the effects of using a custom font.

    Once upon a time, fonts on websites were limited. When a visitor came to your site, their web browser (Firefox, Chrome, Safari, etc) would use the font files on their computer. For example, the website’s CSS would basically say “use arial for this page, if you don’t have that font, use anything close to it”

    Your computer would then check it’s locally installed fonts, and use Arial if it could, or just a basic similar font as a backup.

    This was the age of web-safe fonts – websites worked hard to only use fonts that the vast majority of people were likely to have on their computers, and they’d provide two or three backup options just in case.

    Then custom fonts became possible – with custom fonts, I don’t need to have the font you’re using on my computer, because my web browser can load it from the server to display your page.

    The drawback: font files aren’t always small. That means they take a little longer to load.

    When the page first loads, the web browser looks for the font and can’t find it, so it uses a default. Then when the font file loads, it says “Oh, I can see that font now, here we go!” and it switches.

    The size of the font file, and the internet connection of each individual visitor play a role in how quickly that switch happens (along with other factors). Sometimes it’s instantaneous, other times it takes a second.

    That’s the history – there’s been a lot of debate over the years on what the best solution to that is (if you’re curious, try googling Flash of unstyled text. Lots to read!)

    One solution that some like and some don’t is to basically hide the text in question until the font file has time to load. This requires a Premium Plan or Business Plan so you can add Custom CSS.

    The drawback to this is that if you have a visitor with a slow connection, and the font file takes a few seconds to become available, they won’t see any text. Your page will appear blank and they may think it’s broken. Others argue that removing the flash is worth that risk.

    This solution works best when part of the site (not the whole thing) is using a custom font. That way at least some text will load right away.

    On @benjaminalee’s site, for example. I can see the flash of unstyled text (FOUT for short) on the whole page, because he has chosen a custom font everywhere.

    You could use CSS like this in My Site > Customize > CSS to hide all of the text until the custom font is ready:

    .wf-loading body {
    visibility: hidden !important;
}

    But again, you’re temporarily making all of your text invisible, which can be a bit drastic!

    So the short version – web fonts are wonderful and will hopefully get even better over time, but they do have limitations, and in some cases workarounds :)

  • benjamineskola · Member ·

    Investigating further, I see that enabling a custom font adds some css to the header:

    .wf-active html { font-family:"proxima-nova-1","proxima-nova-2",sans-serif
}

    And so on.

    If I add some custom CSS, I get a better result:

    html { font-family:"proxima-nova-1","proxima-nova-2",sans-serif
}

    Obviously this isn’t ideal, as if the custom font was later changed it might get out of sync with the custom CSS.

  • chad1008 · Staff ·

    @benjaminalee – right, the .wf-active class is added when the file finishes loading, so the custom font doesn’t try to kick in until then, meaning the browser is free to use a default font.

    By adding your CSS, which puts the font directly onto the HTML element, you try and load the custom font immediately – so your visitors will experience whatever their individual browsers do for FOUT. In some cases, that will mean hiding it, in others it might mean using a fallback font :)

  • yogaspy · Member ·

    Thanks everyone!

    Since I have not gone premium, I decided to use default fonts for my two sites:
    https://yogaspy.com
    https://luciyamamoto.com

    The default fonts are not my favorites (especially those for the Pique theme) but the time lag bothered me even more!

    If I go premium I’ll try the suggested options. For now I’m curious to see if I can build decent sites without paying for more than high-speed Internet access and my time.

  • justjennifer · Member ·

    I just wanted to take a moment to thank @chad1008 for probably one of the most informative replies on this subject I’ve seen here. That went straight into my forum evernotebook on CSS.

    @yogaspy – I use a browser bookmarklet utility called Fonzie to find out what font is being used on a page. It’s a bit quicker than looking at a browser’s developer tools since you simply highlight a bit of the text and click the Fonzie bookmarklet. Hope that helps.

  • chad1008 · Staff ·

    Thanks @justjennifer, I hope it was helpful :)

  • The topic ‘Default fonts: Please specify them!’ is closed to new replies.