✨ feat: support disabling header font-subset (#458)

Co-authored-by: welpo <welpo@users.noreply.github.com>

config.toml

@@ -334,10 +334,14 @@ allowed_domains = [
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 enable_csp = true
 
-# Custom subset of characters for the header.
+# Font subsetting configuration.
-# If set to true, the `static/custom_subset.css` file will be loaded first.
+# This feature helps prevent text flashing in Firefox when using custom fonts.
-# This avoids a flashing text issue in Firefox.
+# See: https://welpo.github.io/tabi/blog/custom-font-subset/
-# Please see https://welpo.github.io/tabi/blog/custom-font-subset/ to learn how to create this file.
+# Enable or disable font subsetting completely, both built-in and custom subsets.
+enable_subset = true
+# Use a custom subset of characters for the header.
+# If true, tabi will load the `static/custom_subset.css` file.
+# If false, tabi will use the default language-specific subset (English or Spanish).
 custom_subset = true
 
 [extra.analytics]

content/blog/custom-font-subset/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Optimitza la càrrega amb un subconjunt de font personalitzat"
 date = 2023-04-29
-updated = 2023-07-08
+updated = 2025-01-12
 description = "Aprèn com crear un subconjunt personalitzat que només inclogui els glifs necessaris."
 
 [taxonomies]
@@ -21,7 +21,11 @@ Per solucionar això, tabi carrega un subconjunt de glifs per a l'encapçalament
 
 Per defecte, tabi inclou fitxers de subconjunts per a caràcters en anglès i espanyol (amb alguns símbols). Aquests fitxers es carreguen quan la pàgina o el lloc web de Zola està en aquest idioma.
 
-Per a una optimització addicional, pots crear un subconjunt de fonts personalitzat que només inclogui els caràcters utilitzats en el teu encapçalament.
+{% admonition(type="tip") %}
+Si estàs fent servir una font personalitzada, pots crear el teu propi subconjunt (segueix llegint) o desactivar completament els subconjunts predeterminats amb `enable_subset = false` a `config.toml`.
+{% end %}
+
+Per a una optimització addicional, a continuació t'expliquem com crear un subconjunt de fonts personalitzat que només inclogui els caràcters utilitzats en el teu encapçalament.
 
 ## Requisits
 

content/blog/custom-font-subset/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Optimiza la carga con un subconjunto de fuente personalizado"
 date = 2023-04-29
-updated = 2023-07-08
+updated = 2025-01-12
 description = "Aprende cómo crear un subconjunto personalizado que solo incluya los glifos necesarios."
 
 [taxonomies]
@@ -21,7 +21,11 @@ Para solucionar esto, tabi carga un subconjunto de glifos para el encabezado. Da
 
 Por defecto, tabi incluye archivos de subconjuntos para caracteres en inglés y español (con algunos símbolos). Estos archivos se cargan cuando la página o el sitio de Zola está en ese idioma.
 
-Para una optimización adicional, puedes crear un subconjunto de fuentes personalizado que solo incluya los caracteres utilizados en tu encabezado.
+{% admonition(type="tip") %}
+Si estás usando una fuente personalizada, puedes crear tu propio subconjunto (ver más abajo) o desactivar completamente los subconjuntos predeterminados con `enable_subset = false` en tu `config.toml`.
+{% end %}
+
+Para una optimización adicional, a continuación verás cómo crear un subconjunto de fuentes personalizado que solo incluya los caracteres utilizados en tu encabezado.
 
 ## Requisitos
 

content/blog/custom-font-subset/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Optimise loading times with a custom font subset"
 date = 2023-04-29
-updated = 2023-07-08
+updated = 2025-01-12
 description = "Learn how to create a custom subset that only includes the necessary glyphs."
 
 [taxonomies]
@@ -21,7 +21,11 @@ To fix this, tabi loads a subset of glyphs for the header. Since this (slightly)
 
 By default, there are subset files for English and Spanish characters (with a few symbols). These files are loaded when the Zola page/site is set to that language.
 
-For further optimisation, you can create a custom font subset that only includes the characters used in your header.
+{% admonition(type="tip") %}
+If you're using a custom font, either create your custom subset (see below) or disable the built-in subsets completely with `enable_subset = false` in your `config.toml`.
+{% end %}
+
+Here's how you can create a custom font subset that only includes the characters used in your header, for maximum efficiency.
 
 ## Requirements
 

content/blog/mastering-tabi-settings/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2025-01-02
+updated = 2025-01-12
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -710,10 +710,12 @@ Consulta la [documentació de Mermaid](@/blog/shortcodes/index.ca.md#diagrames-d
 |:------:|:------:|:-------------:|:------------------:|:--------------------:|
 |   ❌   |   ❌   |      ✅       |        ❌          |          ❌          |
 
-Les tipus de lletra personalitzades causen parpalleig del text en Firefox. Per resoldre això, tabi carrega un subconjunt de glifs per a la capçalera. Donat que això (lleugerament) augmenta el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d'aquest subconjunt.
+Les tipus de lletra personalitzades causen parpalleig del text en Firefox. Per resoldre això, tabi carrega un subconjunt de glifs per a la capçalera. Donat que això (lleugerament) augmenta el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d'aquest subconjunt, o desactivar-lo completament si no estàs fent servir un tipus de lletra personalitzat al teu tema.
 
 Pots crear un subconjunt personalitzat adaptat al teu lloc, guardar-lo com a `static/custom_subset.css`, i fer que es carregui amb `custom_subset = true`.
 
+Per desactivar el subconjunt, utilitza `enable_subset = false`.
+
 Per obtenir més informació, incloent instruccions sobre com crear un subconjunt personalitzat, consulta la [documentació](@/blog/custom-font-subset/index.ca.md).
 
 ### Contingut complet al feed

content/blog/mastering-tabi-settings/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2025-01-02
+updated = 2025-01-12
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -710,10 +710,12 @@ Consulta la [documentación de Mermaid](@/blog/shortcodes/index.es.md#diagramas-
 |:------:|:-------:|:-------------:|:---------------:|:-------------------:|
 |   ❌   |   ❌    |      ✅       |        ❌       |         ❌          |
 
-Las fuentes personalizadas causan parpadeo del texto en Firefox. Para solucionar esto, tabi carga un subconjunto de glifos para el encabezado. Dado que esto (ligeramente) aumenta el tiempo de carga inicial, es una buena idea intentar minimizar el tamaño de este subconjunto.
+Las fuentes personalizadas causan parpadeo del texto en Firefox. Para solucionar esto, tabi carga un subconjunto de glifos para el encabezado. Dado que esto (ligeramente) aumenta el tiempo de carga inicial, es una buena idea intentar minimizar el tamaño de este subconjunto, o desactivarlo por completo si no estás usando una fuente personalizada en tu tema.
 
 Puedes crear un subconjunto personalizado adaptado a tu sitio, guardarlo como `static/custom_subset.css`, y hacer que se cargue con `custom_subset = true`.
 
+Para desactivar el subconjunto, puedes usar `enable_subset = false`.
+
 Para obtener más información, incluyendo instrucciones sobre cómo crear un subconjunto personalizado, consulta la [documentación](@/blog/custom-font-subset/index.es.md).
 
 ### Contenido completo en el feed

content/blog/mastering-tabi-settings/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2025-01-02
+updated = 2025-01-12
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -720,9 +720,9 @@ See the [Mermaid documentation](@/blog/shortcodes/index.md#mermaid-diagrams) for
 |:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
 |  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
 
-Custom fonts cause flashing text in Firefox. To amend this, tabi loads a subset of glyphs for the header. Since this (slightly) increases the initial load time, it's a good idea to try and minimise the size of this subset.
+Custom fonts cause flashing text in Firefox. To amend this, tabi loads a subset of glyphs for the header. Since this (slightly) increases the initial load time, it's a good idea to try and minimise the size of this subset, or disable it completely if you're not using a custom font in your skin.
 
-You can create a custom subset tailored to your site, save it as `static/custom_subset.css`, and have it load with `custom_subset = true`.
+You can create a custom subset tailored to your site, save it as `static/custom_subset.css`, and have it load with `custom_subset = true`. Disabling the subset can be done with `enable_subset = false`.
 
 For more information, including instructions on how to create a custom subset, see the [docs](@/blog/custom-font-subset/index.md).
 

templates/partials/header.html

@@ -36,12 +36,14 @@
 
     {# CSS #}
     {# Load subset of glyphs for header. Avoids flashing issue in Firefox #}
-    {% if config.extra.custom_subset and config.extra.custom_subset == true %}
+    {% if config.extra.enable_subset %}
-        <link rel="stylesheet" href="{{ get_url(path="custom_subset.css" , cachebust=true) }}">
+        {% if config.extra.custom_subset == true %}
-    {% elif lang == 'en' %}
+            <link rel="stylesheet" href="{{ get_url(path="custom_subset.css" , cachebust=true) }}">
-        <link rel="stylesheet" href="{{ get_url(path="inter_subset_en.css", cachebust=true ) }}">
+        {% elif lang == 'en' %}
-    {% elif lang == 'es' %}
+            <link rel="stylesheet" href="{{ get_url(path="inter_subset_en.css", cachebust=true ) }}">
-        <link rel="stylesheet" href="{{ get_url(path="inter_subset_es.css", cachebust=true ) }}">
+        {% elif lang == 'es' %}
+            <link rel="stylesheet" href="{{ get_url(path="inter_subset_es.css", cachebust=true ) }}">
+        {% endif %}
     {% endif %}
 
     {# Define array of CSS files to load. main.css is always loaded. #}

theme.toml

@@ -291,11 +291,15 @@ allowed_domains = [
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 enable_csp = true
 
-# Custom subset of characters for the header.
+# Font subsetting configuration.
-# If set to true, the `static/custom_subset.css` file will be loaded first.
+# This feature helps prevent text flashing in Firefox when using custom fonts.
-# This avoids a flashing text issue in Firefox.
+# See: https://welpo.github.io/tabi/blog/custom-font-subset/
-# Please see https://welpo.github.io/tabi/blog/custom-font-subset/ to learn how to create this file.
+# Enable or disable font subsetting completely, both built-in and custom subsets.
-# custom_subset = true
+enable_subset = true
+# Use a custom subset of characters for the header.
+# If true, tabi will load the `static/custom_subset.css` file.
+# If false, tabi will use the default language-specific subset (English or Spanish).
+custom_subset = true
 
 [extra.analytics]
 # Specify which analytics service you want to use.