Self hosted fonts are the best way to go, but google fonts is still pretty fast. Be sure to keep your assets on a CDN.
Formats used to be a mess. Nowadays, I usually just keep it at woff and woff2. That covers all modern browsers and IE11. Everything else can safely fall back to a system font.
You can strip out characters you don't need. If you write exclusively in english, let go of all the pesky umlauts, northern ligatures and cyrillic character sets. That goes for iconfonts as well, strip out any icons you don't need.
Font display is a really nice tool to prevent font flashes (as in, your font didn't download yet). You can set a fallback font until the webfont is loaded, or just leave it at the fallback, if the webfont takes a long time to download. Chances are, the user has already begun reading at that point.
. It moves the font further up the waterfall diagram and prioritizes it higher.
And last but not least, if you use lots of font styles of the same family, variable fonts are worth checking out. They let you use one (quite large) font file and style its properties (like thickness, slant, and custom ones) in css dynamically.
One of the most underrated tools for font loading is the unicode-range property for @font-face loading. It can really help decrease bundle sizes and loading times, especially when loading more than 2 fonts and the content is in one primary language.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Self hosted fonts are the best way to go, but google fonts is still pretty fast. Be sure to keep your assets on a CDN.
Formats used to be a mess. Nowadays, I usually just keep it at woff and woff2. That covers all modern browsers and IE11. Everything else can safely fall back to a system font.
You can strip out characters you don't need. If you write exclusively in english, let go of all the pesky umlauts, northern ligatures and cyrillic character sets. That goes for iconfonts as well, strip out any icons you don't need.
Font display is a really nice tool to prevent font flashes (as in, your font didn't download yet). You can set a fallback font until the webfont is loaded, or just leave it at the fallback, if the webfont takes a long time to download. Chances are, the user has already begun reading at that point.
As with any asset, you can preload it with
<link rel="preload" href="/path/to/font.woff2" as="font" crossorigin>. It moves the font further up the waterfall diagram and prioritizes it higher.
And last but not least, if you use lots of font styles of the same family, variable fonts are worth checking out. They let you use one (quite large) font file and style its properties (like thickness, slant, and custom ones) in css dynamically.
One of the most underrated tools for font loading is the
unicode-rangeproperty for@font-faceloading. It can really help decrease bundle sizes and loading times, especially when loading more than 2 fonts and the content is in one primary language.