1

I'm trying to re-write my font loading detection using the Craft Cookies Plugin. I'm unsure if what I have done is correct...

Before

<!--# if expr="$HTTP_COOKIE=/fonts\-loaded\=1/" -->
<html class="fonts-loaded" lang="{{ craft.app.language |slice(0,2) }}" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<!--# else -->
<html lang="{{ craft.app.language |slice(0,2) }}" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<!--# endif -->

After

{% if getCookie('fonts-loaded') %}
    {% do setCookie('fonts-loaded', fontLoad, now | date_modify("+1 hour").timestamp) %}
    <html class="fonts-loaded" lang="{{ craft.app.language |slice(0,2) }}" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
{% else %}
      <html lang="{{ craft.app.language |slice(0,2) }}" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
{% endif %}
1

So I'm not sure what you're accomplishing with this line:

    {% do setCookie('fonts-loaded', fontLoad, now | date_modify("+1 hour").timestamp) %}

I guess trying to give the cookie a longer duration if it was already set? Probably it's best to set the fonts-loaded cookie via JavaScript once FontFaceObserver tells us that the font as been loaded; there's probably no reason to do it here.

FWIW, we can start using the font-display property as a progressive enhancement now to want to eliminate FOUT on modern browsers. Older browsers will still work, but they'll get FOUT: https://caniuse.com/#search=font-display

  • Right - ok - are you saying FontFaceObserver isn't really required now due to font-display? – Dan Lee Jan 12 at 17:07
  • If you're ok with there being FOUT on older browsers that do not support the font-display property, then yes. – andrew.welch Jan 13 at 15:48
  • Ok that is clear - about 8% of our users are using an older browser past IE11... – Dan Lee Jan 15 at 9:48
  • Right so everything will still work for that 8% if you use font-display but there will be FOUT as the font loads. I think this is probably fine, but it's your call. – andrew.welch Jan 17 at 15:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.