Skip to content

Fonts: Hard-code fonts to open-sans and optimize loading #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dabrorius merged 2 commits into from
Aug 11, 2026
Merged

Fonts: Hard-code fonts to open-sans and optimize loading #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a9baec5
Fonts: Hard-code fonts to open-sans and optimize loading
dabrorius Aug 10, 2026
b2262d9
Clean up unused fonts
dabrorius Aug 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,8 @@

/* Font weights */
--font-weight-regular: 400;
--font-weight-medium: 500;

@dabrorius dabrorius Aug 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Weights 500 and 800 are mentioned, but they were never loaded. We only loaded 400,600,700,400i,600i,700 through the font_link filter.
They would fall back to the closest fall weight silently. Now we explicitly use the font weight that exists.

--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
}

*,
Expand Down
2 changes: 1 addition & 1 deletion assets/core.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/image-banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@
font-size: 52px;
line-height: 60px;

font-weight: var(--font-weight-extrabold);
font-weight: var(--font-weight-bold);
}

.image-banner__text {
Expand Down
2 changes: 1 addition & 1 deletion assets/product.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
font-size: 16px;
line-height: 24px;

font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-regular);

color: var(--color-primary-foreground);
}
Expand Down
2 changes: 0 additions & 2 deletions config/settings_data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
19 changes: 0 additions & 19 deletions config/settings_schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
3 changes: 2 additions & 1 deletion layout/checkout.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Booqable" />

{% render 'fonts' %}

{{ content_for_checkout_header }}

{% render 'fonts', settings: settings %}
{% render 'color-palette-styles', settings: settings, branding_color: branding_color %}

{% render 'page-metadata',
Expand Down
3 changes: 2 additions & 1 deletion layout/minimal.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Booqable" />
{% render 'fonts' %}

{% comment %} Base stylesheets {% endcomment %}
{{ "base.css" | asset_url | stylesheet_tag }}

Expand All @@ -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 -%}
Expand Down
3 changes: 2 additions & 1 deletion layout/session.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Booqable" />
{% 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',
Expand Down
4 changes: 2 additions & 2 deletions layout/theme.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Booqable" />
{% 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',
Expand Down
9 changes: 3 additions & 6 deletions snippets/color-palette-styles.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }};
Expand Down
32 changes: 23 additions & 9 deletions snippets/fonts.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
{% if settings.heading_font != blank or settings.body_font != blank %}
<link rel="preconnect" href="https://fonts.bunny.net">
{% 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.
Comment thread
dabrorius marked this conversation as resolved.
- 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 %}

<link rel="preconnect" href="https://fonts.bunny.net">
Comment thread
dabrorius marked this conversation as resolved.

<link rel="preload" as="font" type="font/woff2" crossorigin
href="https://fonts.bunny.net/open-sans/files/open-sans-latin-400-normal.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin
href="https://fonts.bunny.net/open-sans/files/open-sans-latin-600-normal.woff2">

<link rel="stylesheet" media="print" onload="this.media='all'"
href="https://fonts.bunny.net/css?family=open-sans:400,600,700,400i&amp;display=swap">
<noscript>
<link rel="stylesheet"
href="https://fonts.bunny.net/css?family=open-sans:400,600,700,400i&amp;display=swap">
</noscript>
2 changes: 1 addition & 1 deletion snippets/form.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<style>
.form__field, .form__textarea, .form__field::placeholder, .form__textarea::placeholder {
font-family: {{ settings.body_font.family }}, {{ settings.body_font.fallback_families }};
font-family: var(--font-body);
}

.bq-button--{{ section.key }} {
Expand Down