<p>So I'm not sure what you're accomplishing with this line:</p>

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

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

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

CC BY-SA 4.0
2019-01-12T17:07:31.700Z
Right - ok - are you saying FontFaceObserver isn't really required now due to font-display?
Dan Lee
CC BY-SA 4.0
2019-01-13T15:48:40.133Z
If you're ok with there being FOUT on older browsers that do not support the `font-display` property, then yes.
andrew.welch
CC BY-SA 4.0
2019-01-15T09:48:11.123Z
Ok that is clear - about 8% of our users are using an older browser past IE11...
Dan Lee
CC BY-SA 4.0
2019-01-17T15:40:22.720Z
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
CC BY-SA 4.0
2019-01-11T21:33:00.337Z
2019-01-11T21:33:00.337Z
andrew.welch
<p>I'm trying to re-write my font loading detection using the <a href="https://github.com/nystudio107/craft-cookies" rel="nofollow noreferrer">Craft Cookies Plugin</a>. I'm unsure if what I have done is correct...</p>

<p><strong>Before</strong></p>

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

<p><strong>After</strong></p>

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

<craft3><cookies>
Craft Cookies Plugin: Font Loading Detection
# Craft Cookies Plugin: Font Loading Detection

(Asked by: username_0 on 2019-01-11)

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






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

**Tags:** craft3, cookies


---

## 1 answers

### Answer by username_1 on 2019-01-11. Score: 1 | Accepted answer

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

> **Comments:**
> **username_0**: Right - ok - are you saying FontFaceObserver isn't really required now due to font-display?  
> **username_1**: If you're ok with there being FOUT on older browsers that do not support the `font-display` property, then yes.  
> **username_0**: Ok that is clear - about 8% of our users are using an older browser past IE11...  
> **username_1**: 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.  

---

