- This topic has 4 replies, 2 voices, and was last updated 4 years, 3 months ago by
.
-
Posts
-
Hello, I followed the guide about intalling local fonts https://docs.generatepress.com/article/adding-local-fonts/
When installed I see this alert on speed insights: https://ibb.co/m9HB7LkI added this code in header
<link rel=”preload” href=”/wp-content/uploads/2022/01/questrial-v13-latin-regular.woff2″ as=”font” type=”font/woff2″ crossorigin>https://ibb.co/vv4snXt but the alert still appears.If I add this code in CSS
font-display: swap;https://ibb.co/6DkFHyg the alert disappears by my CLS rise so much. From https://ibb.co/8mP9gXw to https://ibb.co/XC46tLf.How can I solve that?
Thank you!
Customer Support
Hi Rostyslav,
It seems that the reason for the font not being pre-loaded properly is because of the curly quotations in your code. Normal “straight” quotation marks are sometimes replaced with “curly” ones during copying and pasting which in turn messes with the code.
See this for reference on what I mean: https://share.getcloudapp.com/GGuEEPOg
Also see: https://share.getcloudapp.com/mXuJJRBR
With that said, could you try replacing the quotation marks you have in your current code with straight ones, and see if it resolves the issue?
If this still doesn’t work, could you also try adding the complete url to the file path in the href attribute?
Hope this helps!
Hello again! Still not working I have same alert. https://ibb.co/pRYjPcY
Hook: https://ibb.co/2yshCj6
<link rel="preload" as="font" type="font/woff2" href="https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.woff2" crossorigin="anonymous">My CSS:
@font-face { font-family: 'Questrial'; font-style: normal; font-weight: 400; src: url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.woff') format('woff'), /* Modern Browsers */ url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.svg#Questrial') format('svg'); /* Legacy iOS */ }Just solved the problem:
Solution:
1) add properly written hook with “straight” quotation marks on head:
<link rel="preload" as="font" type="font/woff2" href="https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.woff2" crossorigin="anonymous">2) Added to css
font-display: swap;@font-face { font-family: 'Questrial'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.woff') format('woff'), /* Modern Browsers */ url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://agencia-seo.madrid/wp-content/uploads/2022/01/questrial-v13-latin-regular.svg#Questrial') format('svg'); /* Legacy iOS */ }That’s good to hear! Glad to be of help. Feel free to reach out if you have any further questions or assistance with anything and we’ll be here to help! 🙂
- You must be logged in to reply to this topic.
