Skip to content

Request: current best practice for font preload #46

@gideonb

Description

@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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions