From a9baec52f18c97472df4063ca2c9ab26bb9d7503 Mon Sep 17 00:00:00 2001 From: Filip Defar Date: Mon, 10 Aug 2026 15:53:34 +0200 Subject: [PATCH 1/2] Fonts: Hard-code fonts to open-sans and optimize loading --- config/settings_data.json | 2 -- config/settings_schema.json | 19 ---------------- layout/checkout.liquid | 3 ++- layout/minimal.liquid | 3 ++- layout/session.liquid | 3 ++- layout/theme.liquid | 4 ++-- snippets/color-palette-styles.liquid | 9 +++----- snippets/fonts.liquid | 34 ++++++++++++++++++++-------- snippets/form.liquid | 2 +- 9 files changed, 37 insertions(+), 42 deletions(-) diff --git a/config/settings_data.json b/config/settings_data.json index 8f65223..a417da1 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -5,8 +5,6 @@ "primary_background_color": "#FFFFFF", "primary_foreground_color": "#140202", "primary_color": "#2B67C1", - "heading_font": "open-sans", - "body_font": "open-sans", "sections": { "header": { "type": "header", diff --git a/config/settings_schema.json b/config/settings_schema.json index c801bee..4f8f9a3 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -51,25 +51,6 @@ } ] }, - { - "name": "Typography", - "settings": [ - { - "type": "font_picker", - "id": "heading_font", - "label": "Heading", - "info": "Font used for headers", - "default": "source-sans-pro" - }, - { - "type": "font_picker", - "id": "body_font", - "label": "Body", - "info": "Font used for texts", - "default": "source-sans-pro" - } - ] - }, { "name": "Images", "settings": [ diff --git a/layout/checkout.liquid b/layout/checkout.liquid index e99635a..3b547ad 100644 --- a/layout/checkout.liquid +++ b/layout/checkout.liquid @@ -6,9 +6,10 @@ + {% render 'fonts' %} + {{ content_for_checkout_header }} - {% render 'fonts', settings: settings %} {% render 'color-palette-styles', settings: settings, branding_color: branding_color %} {% render 'page-metadata', diff --git a/layout/minimal.liquid b/layout/minimal.liquid index a93a19d..61b1147 100644 --- a/layout/minimal.liquid +++ b/layout/minimal.liquid @@ -5,6 +5,8 @@ + {% render 'fonts' %} + {% comment %} Base stylesheets {% endcomment %} {{ "base.css" | asset_url | stylesheet_tag }} @@ -21,7 +23,6 @@ {{ content_for_header }} {% endif %} - {% render 'fonts', settings: settings %} {% render 'color-palette-styles', settings: settings, branding_color: branding_color %} {%- unless section_preview -%} diff --git a/layout/session.liquid b/layout/session.liquid index 0df57c9..c18817e 100644 --- a/layout/session.liquid +++ b/layout/session.liquid @@ -5,13 +5,14 @@ + {% render 'fonts' %} + {% comment %} Base stylesheets {% endcomment %} {{ "base.css" | asset_url | stylesheet_tag }} {{ "sessions-layout.css" | asset_url | stylesheet_tag }} {{ "header.css" | asset_url | stylesheet_tag }} {{ content_for_header }} - {% render 'fonts', settings: settings %} {% render 'color-palette-styles', settings: settings, branding_color: branding_color %} {% render 'page-metadata', diff --git a/layout/theme.liquid b/layout/theme.liquid index 6855a14..835f821 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -5,11 +5,11 @@ + {% render 'fonts' %} + {% comment %} Base stylesheets {% endcomment %} {{ "core.min.css" | asset_url | stylesheet_tag }} {{ content_for_header }} - - {% render 'fonts', settings: settings %} {% render 'color-palette-styles', settings: settings, branding_color: branding_color, is_local_theme: is_local_theme %} {% render 'page-metadata', diff --git a/snippets/color-palette-styles.liquid b/snippets/color-palette-styles.liquid index edb0af2..bc04a23 100644 --- a/snippets/color-palette-styles.liquid +++ b/snippets/color-palette-styles.liquid @@ -20,12 +20,9 @@ --cart-lines-background-color: var(--color-accent-background); --cart-lines-color: var(--color-accent-foreground); - {% if settings.heading_font != blank %} - --font-heading: "{{ settings.heading_font.family }}", {{ settings.heading_font.fallback_families }}; - {% endif %} - {% if settings.body_font != blank %} - --font-body: "{{ settings.body_font.family }}", {{ settings.body_font.fallback_families }}; - {% endif %} + {% comment %} Hard-coded to match the faces loaded in the `fonts` snippet {% endcomment %} + --font-heading: "Open Sans", sans-serif; + --font-body: "Open Sans", sans-serif; {% if is_local_theme %} --branding-color: {{ settings.primary_color }}; diff --git a/snippets/fonts.liquid b/snippets/fonts.liquid index 8d120f7..f5c2674 100644 --- a/snippets/fonts.liquid +++ b/snippets/fonts.liquid @@ -1,9 +1,25 @@ -{% if settings.heading_font != blank or settings.body_font != blank %} - -{% endif %} -{% if settings.heading_font != blank %} - {{ settings.heading_font | font_link }} -{% endif %} -{% if settings.body_font != blank %} - {{ settings.body_font | font_link }} -{% endif %} +{% comment %} + - The woff2 files for the latin subset are preloaded, so they download in + parallel with the stylesheet instead of only being discovered after it + arrives. + - The stylesheet itself is loaded non-blocking (`media="print"` until it has + loaded). It is only needed to map the faces, and `display=swap` means text + paints in the fallback font either way, so it does not belong in the + critical path. +{% endcomment %} + + + + + + + + + diff --git a/snippets/form.liquid b/snippets/form.liquid index f84dc0a..ab5dca9 100644 --- a/snippets/form.liquid +++ b/snippets/form.liquid @@ -2,7 +2,7 @@