Request: current best practice for font preload

[gideonb]

Skeleton would be a great place to demo best practices for font preloads, and update them when they change.

The docs say to use preload_tag, and CLI reinforces:

{{ settings.font_body_family | font_url | preload_tag: as: 'font' }}

Horizon and Dawn do something more like this:

{% # theme-check-disable %}
  <link
    rel="preload"
    as="font"
    href="{{ settings.font_body_family | font_url }}"
    type="font/woff2"
    crossorigin
  >
{% # theme-check-enable %}

Horizon and Dawn both include this preconnect:

<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>

I assume Dawn needs backwards compatibility with Monotype for stores with deprecated fonts, but the Horizon preconnect is confusing.

Having a font pattern in Skeleton would let devs know when it's safe to revert to preload_tag and whether preconnect is still relevant.

Related: Shopify/liquid#1738

[graygilmore]

Thanks @gideonb! It is in fact still best practice but you're right to point out that it's missing the crossorigin attribute to be fully valuable. I've fired up an issue for this and we'll tackle it.