Open chillitom opened 5 years ago
+1. Shouldn't be that hard to add as opt-in, or even make it default with opt-out config?
I found myself in the same position and decided I'll host the webfont CSS myself for now.
I wrote a small script that downloads the webfont CSS from Typekit and adds font-display
automatically, in case it is helpful for anyone: https://github.com/swissspidy/local-webfont
+1
+1
+1
+1
+1
Please stop adding "+1" responses, they're not useful in anyway and just clog up the issue thread with noise.
Instead :+1: the issue up top like many others are doing. Thanks.
I'm not sure about TypeKit, but we are shipping font-display support to Google Fonts soon which will hopefully avoid needing extra steps to locally host. This could be passed through configuration to webfontloader the same way the font-family currently is.
Google already understands the 'display' parameter. Is there any hope that this option will be available in WFL?
Is there a way to set the new &display=swap
parameter for Google Fonts in Webfontloader?
I'm not sure about TypeKit, but we are shipping font-display support to Google Fonts soon which will hopefully avoid needing extra steps to locally host. This could be passed through configuration to webfontloader the same way the font-family currently is.
@addyosmani Can you give an example of how this might be done using webfontloader?
As a temporary solution, instead of google
module, I’m using custom
to specify the font:
WebFont.load({
custom: {
families: [
'Roboto:n4,n7',
],
urls: [
'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap',
],
},
});
Looks like Google Fonts and other third parties are starting to support this no news from Typekit disappointing.
Similar to @Cinamonas example above, I've noticed you can also get away with doing the following:
WebFont.load({
google: {
families: [
'Roboto:400,400i,700,700i&display=swap'
]
}
});
Though I must admit it feels pretty hacky.
Update: This seems to have some issues with multiple font families, see @tzjoke answer below.
@rawksteady It seems that your approach does not support multi fonts while @Cinamonas 's one does.
Update: @rawksteady Oh my bad, it does work.
WebFont.load({
google: {
families: [
'Montaga|Roboto:400,400i,500&display=swap'
]
}
});
But this case does not work:
WebFont.load({
google: {
families: [
'Lato:300,300i,400|Roboto:400,400i,500&display=swap'
]
}
});
From Network tab:
https://fonts.googleapis.com/css?family=Lato:300,300i,400|Roboto&subset=400,400i,500&display=swap
@tzjoke Gotcha! Like I said, felt pretty hacky.
Workarounds proposed by @Cinamonas & @tzjoke does not work as it renders wrong body-class list (sticking all class names to each other without spaces)
@pmpr-ir
I found that by separating the families in the array does work and does not render the body-class wrong. It does not work when adding &display=swap
or any other value behind the first two families. It only works when adding it to the last item in the array.
WebFont.load({
google:{
families:[
'Arimo:400,400i,700',
'Didact+Gothic',
'Playfair+Display:400,400i,700&display=swap'
]
});
This resolves to the URL below: https://fonts.googleapis.com/css?family=Arimo:400,400i,700%7CDidact+Gothic%7CPlayfair+Display:400,400i,700&display=swap
Would prefer a built in setting or property to specify the font-display value per loaded font.
&display=swap
hack doesn't work on Edge browser.
@EmielZuurbier What if you have different font-display
spec for separate fonts? Consider:
WebFont.load({
google:{
families:[
'Harmattan&display=swap',
'Lalezar&display=swap',
'Material+Icons&display=block'
]
});
Everybody, please vote on this pull request
@pmpr-ir That too would be a feature that is very welcome. Maybe a syntax like the following would be a nice way to write it down?
WebFont.load({
google:{
families:[
{
family: 'Arimo',
styles: ['400', '400i', '700'],
display: 'swap'
},
{
family: 'Playfair+Display',
styles: ['400', '400i', '700'],
display: 'block'
}
]
}
});
Or maybe:
WebFont.load({
google:{
families:[
{
'Arimo': {
styles: ['400', '400i', '700'],
display: 'swap'
}
},
{
'Playfair+Display': {
styles: ['400', '400i', '700'],
display: 'block'
}
}
]
}
});
Both would provide a way to be more explicit when requesting the fonts with their associated styles and the desired display value. Although I can see how this could be a compatibility issue with previous implementations of the WebFont loader. What are your thoughts on this?
I have upvoted your referenced pull request!
Edit: I just realized that both examples would result in two separate requests. How silly of me.
Any update on this? Thanks
+1
I've made it work with the following config:
WebFont.load({
google: {
families: [
'Overpass Mono:400,700',
'Roboto:400,500&display=swap',
],
},
})
The trick, at least for me is to put the &display=swap
ONLY on the last font.
@taverasmisael is correct.
This config:
WebFontConfig = {
google: {
families:
[
'Hind:400,600:latin-ext',
'Ubuntu:700:latin-ext&display=swap'
]}
};
Generates a CSS get to:
https://fonts.googleapis.com/css?family=Hind:400,600%7CUbuntu:700&subset=latin-ext,latin-ext&display=swap
So the URL is clearly built from the parameters.
(Before, I was using to get the same result <link href="https://fonts.googleapis.com/css?family=Hind:400,600,700|Ubuntu:700&subset=latin-ext&display=swap" rel="stylesheet">
).
CSS file have the font-display:swap; for both.
/* devanagari */
@font-face {
font-family: 'Hind';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Hind Regular'), local('Hind-Regular'), url(https://fonts.gstatic.com/s/hind/v10/5aU69_a8oxmIdGh4BCOz.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Hind';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Hind Regular'), local('Hind-Regular'), url(https://fonts.gstatic.com/s/hind/v10/5aU69_a8oxmIdGd4BCOz.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hind';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Hind Regular'), local('Hind-Regular'), url(https://fonts.gstatic.com/s/hind/v10/5aU69_a8oxmIdGl4BA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
font-family: 'Hind';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Hind SemiBold'), local('Hind-SemiBold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfLZcER2SjQpf.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Hind';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Hind SemiBold'), local('Hind-SemiBold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfLZcERKSjQpf.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hind';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Hind SemiBold'), local('Hind-SemiBold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfLZcERySjQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
font-family: 'Hind';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Hind Bold'), local('Hind-Bold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfNJdER2SjQpf.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Hind';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Hind Bold'), local('Hind-Bold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfNJdERKSjQpf.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Hind';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Hind Bold'), local('Hind-Bold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfNJdERySjQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjsGyN.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Hi there, it is possible to fix webfont.js directly. For example, you can use dynamic integration (generated code for multiple fonts) without problems. Check this out: https://heiko-frenzel.de/fix-web-font-loader-pagespeed-insights-15782/
Cheers!
Chrome's Lighthouse suggests setting the
font-display
CSS property to deal with the trade offs between FOUT/FOIT and missing content and links to the following article: https://developers.google.com/web/updates/2016/02/font-displayUnfortunately there doesn't appear to be a way to pass this configuration to
webfontloader
which I believe is responsible for assigning the@font-face
definitions.