https://github.com/iamakulov/googlefonts-font-display-helper

A snippet generator to speed up Google Fonts rendering with font-display
https://github.com/iamakulov/googlefonts-font-display-helper

Last synced: 19 days ago
JSON representation

A snippet generator to speed up Google Fonts rendering with font-display

• Host: GitHub
• URL: https://github.com/iamakulov/googlefonts-font-display-helper
• Owner: iamakulov
• License: mit
• Created: 2019-02-11T12:57:12.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-05-08T08:09:19.000Z (over 3 years ago)
• Last Synced: 2024-07-31T18:20:49.741Z (4 months ago)
• Language: Handlebars
• Homepage: https://googlefonts.3perf.com/
• Size: 1.93 MB
• Stars: 317
• Watchers: 25
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# A snippet to make your Google Fonts render faster

→ [googlefonts.3perf.com](https://googlefonts.3perf.com)

> **Deprecated.**

>

> Google Fonts [now have built-in `font-display` support](https://github.com/google/fonts/issues/358#issuecomment-492324042), and there’s no much sense to use this tool over the native feature.

>

> To make use of the native support for `font-display`, just append `&display=swap` to the end of you Google Fonts URL.

## What’s this?

When you use a custom font (like a font from Google Fonts),

[most modern browsers](https://developers.google.com/web/updates/2016/02/font-display#differences_in_font_rendering_today)

won’t render the text immediately. Instead, they will keep the text

hidden until the font is downloaded – or until 3 seconds pass. This hurts user experience –

[and affects business metrics](https://3perf.com/talks/web-perf-101/#perf-importance-header).

This repo includes a source of `googlefonts.3perf.com`, a tool that generates snippets that speed up Google Fonts rendering. See [the tool page](https://googlefonts.3perf.com) for more information on how it works.

## License

MIT © [Ivan Akulov](https://github.com/iamakulov), [Jacob Groß](https://github.com/kurtextrem)