Ensure text remains visible during webfont load

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! :)