I in the middle of a page want to load a font lazily. I use Lazysizes and its plugin, Unveilhooks. This is what the author of the library answered some while ago on this topic: https://github.com/aFarkas/lazysizes/issues/169
As for the font, it is Google's Lobster: https://fonts.google.com/specimen/Lobster
fonts.css
@font-face {
font-family: 'Lobster';
src: '\wp-content\themes\nonverbis\assets\fonts\lobster\Lobster-Regular.ttf';
}
html
<span class="lazyload" data-link="\wp-content\themes\nonverbis\assets\css\custom\fonts.css"></span>
<p style='font-family: "Lobster script=latin rev=2";'>Lorem ipsum</p>
To the best of my ability fonts.css is loaded lazily. And inside the loaded fonts.css the path to the font is correct.
But visually the font of the text has not changed on the page. What can I try next?
Use LazyHTML, but you need to add lazyhtml script into Head
<script async src="https://cdn.jsdelivr.net/npm/lazyhtml@1.2.3/dist/lazyhtml.min.js" crossorigin="anonymous" debug></script>
Add the above script to Head
<div class="lazyhtml" onvisible data-lazyhtml>
<script type="text/lazyhtml">
<!--
<link rel="stylesheet" href="/wp-content/themes/nonverbis/assets/css/custom/fonts.css">
-->
</script>
</div>
<p style='font-family: "Lobster script=latin rev=2";'>Lorem ipsum</p>