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.

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

font-display #253

Open
vijayaraghavanramanan opened this issue May 15, 2019 · 4 comments

Comments

@vijayaraghavanramanan
Copy link

commented May 15, 2019

Hi Frank/other contributors,

Google Fonts has already implemented font-display: google/fonts#358 and is live.

Would be relevant for AO.

@futtta

This comment has been minimized.

Copy link
Owner

commented May 15, 2019

@futtta

This comment has been minimized.

Copy link
Owner

commented May 20, 2019

No font-display option (yet), but surely a filter is a first step ? ;-)

@vijayaraghavanramanan

This comment has been minimized.

Copy link
Author

commented May 28, 2019

Yeah that's good for a start.

I am thinking maybe you can have the option to use webfont-loader as a polyfill and not expose it to new browsers, so that users who don't know these things don't choose webfontloader as the main option. font-display support is high 82.29% according to caniuse

And preload the css. So the html output might look like:

<script>
	var linkSupportsPreload = (function() {
		try {
			return document.createElement("link").relList.supports("preload");
		} catch (e) {
			return false;
		}
	})();

	var fontDisplaySupported = window.FontFace && window.FontFace.prototype.hasOwnProperty("display");

	function preloadFinished( el ) {
		var res = document.createElement("link");
		res.rel = "stylesheet";
		res.href = el.href;
		res.crossOrigin = el.crossOrigin;
		el.parentNode.insertBefore(res, el.nextSibling);
	}
</script>

<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans&font-display=swap" as="style" onload="fontDisplaySupported&&preloadFinished(this)" crossorigin>

<script>
	if (!fontDisplaySupported || !linkSupportsPreload) {
		document.write('<link href="https://fonts.googleapis.com/css?family=Open+Sans&font-display=swap" rel="stylesheet" crossorgin="anonymous">');
	}
</script>

Simplified a bit with document.write but could use webfontloader as the fallback.

Congrats on 1m+ active installs!

@futtta

This comment has been minimized.

Copy link
Owner

commented Jul 23, 2019

added display=swap to AO's CSS-based (aggregate & link + aggregate & preload) Google Font optimizations in 2.6.0-beta-1 @vijayaraghavanramanan

have time, no need to worry about not being able to test immediately ;-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.