Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-12T17:07:31.700Z
Answers.Text: Right - ok - are you saying FontFaceObserver isn't really required now due to font-display?
Answers.UserDisplayName: Dan Lee
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-13T15:48:40.133Z
Answers.Text: If you're ok with there being FOUT on older browsers that do not support the `font-display` property, then yes.
Answers.UserDisplayName: andrew.welch
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-15T09:48:11.123Z
Answers.Text: Ok that is clear - about 8% of our users are using an older browser past IE11...
Answers.UserDisplayName: Dan Lee
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-17T15:40:22.720Z
Answers.Text: 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.
Answers.UserDisplayName: andrew.welch
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-11T21:33:00.337Z
Answers.LastActivityDate: 2019-01-11T21:33:00.337Z
Answers.UserDisplayName: andrew.welch
Body: <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>
  
Tags: <craft3><cookies>
Title: Craft Cookies Plugin: Font Loading Detection
ThreadText: # 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](https://github.com/nystudio107/craft-cookies). 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 %}
  
  ```
  
  **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.  
  
  ---
  
  