Local fonts: Ensure text remains visible during webfont load

[strizhakovanatalya]

Hello. I receive a warning from PageSpeed during use local fonts: Ensure text remains visible during webfont load. Leverage the font-display CSS feature to ensure that text is user-visible while webfonts are loading. I tried adding code to my custom.css file: @font-face { font-family: 'Open Sans'; src: url('../../../media/templates/site/tp_bike/fonts/OpenSans-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }, but it didn't help, PageSpeed doesn't see it. Please add font-display: swap; to the right place in Astroid) Thank you

[Chacapamac]

Don’t know if that can help you?

Try using that Github Tool to generate your css/scss code —> https://gwfh.mranftl.com/fonts

When I use local fonts my code is in my “custom.scss” file (in the media —> scss folder)

My SCSS code is: //::::::::::::::::::::::::: BODY FONT - SOURCE SANS PRO :::::::::::::::::::: ///* Source-sans-pro 400 - regular - latin */ @font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('../fonts/sourcesanspro/source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/sourcesanspro/source-sans-pro-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } ///* Source-sans-pro - 400 - italic - latin */ @font-face { font-family: "Source Sans Pro"; font-style: italic; font-weight: 400; src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url('../fonts/sourcesanspro/source-sans-pro-v13-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/sourcesanspro/source-sans-pro-v13-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } ///* Source-sans-pro - 600 - latin */ @font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 600; src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url('../fonts/sourcesanspro/source-sans-pro-v13-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/sourcesanspro/source-sans-pro-v13-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } ///* Source-sans-pro - 600 - italic - latin */ @font-face { font-family: "Source Sans Pro"; font-style: italic; font-weight: 600; src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'), url('../fonts/sourcesanspro/source-sans-pro-v13-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/sourcesanspro/source-sans-pro-v13-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

and my corresponding fonts files are in the media —> YourTemplate —> fonts folder

Remark that my fonts files are in a fonts folder to their names because, in this case, I prefer to control all typography in the SCSS file. — You will have to take out the “,,/” in the path of the fonts and put them loose in the “fonts” folder (not in a folder like my example) if you want to control the fonts by the Astroid Template Manager (not by the SCSS).

[strizhakovanatalya]

No, this solution didn't help. I generated the code: @font-face { font-display: swap; / Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. / font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url('../../fonts/open-sans-v40-cyrillic_latin-300.woff') format('woff'), / Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5 + / } I put it in a file media/templates/site/tp_bike/scss/custom/custom.scss I put the fonts in media/templates/site/tp_bike/fonts But it still doesn't see font-display: swap; Maybe the problem is in the path? But I checked the path to the fonts carefully…

[strizhakovanatalya]

What helped me was managing fonts through CSS, not the Astroid Template Manager