Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Defer Font Loading #43

Open
jpdevries opened this issue Mar 20, 2017 · 0 comments
Open

Defer Font Loading #43

jpdevries opened this issue Mar 20, 2017 · 0 comments

Comments

@jpdevries
Copy link

jpdevries commented Mar 20, 2017 •
edited
Loading

There is a render-blocking request for the largest asset on the page. As it is now, the font has to be loaded before the stylesheet or any of our HTML content.

This can be resolved using a nifty pattern of JavaScript (onload) and a <noscript> tag.

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="none" onload="this.media='all'">

This will prevent the browser from seeing the stylesheet as a blocking request and then will set the media attribute to all (or screen, or whatever) on load. Problem is, if JavaScript is disabled, onload won't happen. So we use a <noscript> fallback.

Finally, our entire pattern looks like so:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="none" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="all"></noscript>

Furthermore, we should be putting the <link> that loads the fonts at the bottom of <head> so as to not promote bad habits. The main style sheet should always be included before fonts and definitely before any scripts.

User Stories and Perspectives

  • I’m a blind user with a screen reader. I'd rather not wait for content until something that isn’t relevant to me, and is a large file size, downloads.
    (web fonts are generally larger than your average blocking stylesheet and stylesheets can still be pertinent to blind and low vision users)
  • I'm a low–vision user who uses user agent style sheets to override web typography to be more accessible to me. I won't see your typefaces anyways, so please don't make it block the content of the page or other styles.
  • I am in a hurry and/or on a slow connection and would like styled web content to be consumable before large web fonts load.

Pros

  • SEO improvements via significant improvements optimizing delivery of web content
  • Noticeable speed improvements (more "snappy")
  • More inclusive delivery, as we are not making delaying access to the content to the blind for something that is only relevant to the sighted

Con

  • The web page may appear with standard fonts briefly before the web font is loaded. With best cacheing practices this can FOUT can be avoided on return visits.

See Also
jpdevries added a commit to jpdevries/css_layout_exercises_starter_files that referenced this issue Mar 20, 2017
@jpdevries
Defer Font Loading
60d5356 
Closes Thinkful-Ed#43
@jpdevries jpdevries mentioned this issue Mar 20, 2017
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jpdevries