Ottimizzare un font TTF per il web
All'inzio dello sviluppo di questo sito ho deciso di utilizzare il font Quicksand di Google, caricando ben 5 file woff2 per avere a disposizione i vari pesi disponibili.
Come ottimizzare un font TTF in python?
Per il web ci serve un font in formato woff2, quindi bisogna convertirlo, durante questo processo si può selezionare un range di caratteri o anche i singoli caratteri, visto che su questo sito mi interessano i caratteri per scrivere in italiano/inglese, ho escluso tutti gli altri.
Con questo sistema sono passato da un TTF di 127kb ad un woff2 di 29kb!
Lo script che ho fatto (che ho chiesto a Gemini, è un bel tempo per programmare…) si basa su fontTools, come prima cosa serve installarlo, insieme alla libreria di compressione brotli:
pip install fonttools brotli
Per richiamare la libreria da python:
from fontTools.subset import main as subset_main
def ottimizza_font(input_path, output_path):
# Definiamo gli argomenti come faresti da riga di comando
args = [
input_path,
'--unicodes=U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
'--flavor=woff2',
f'--output-file={output_path}'
]
try:
subset_main(args)
print(f"Font ottimizzato con successo: {output_path}")
except Exception as e:
print(f"Errore durante l'ottimizzazione del font: {e}")
# Esempio di utilizzo nel tuo flusso di build:
ottimizza_font('__fonts/Quicksand-VariableFont_wght.ttf', '_assets/Quicksand-Variable.woff2')
Ho creato con questo codice uno script font_minify.py anzichè integrarlo nel blog_render.py, visto che ripeterò l'operazione di rado.
A questo punto basta importarlo tramite tag <style> all'inizio della pagina che vi interessa, nel mio caso su trova nel template jinja2 di base:
<style>
@font-face {
font-family: 'Quicksand';
src: url('/fonts/Quicksand-Variable.woff2') format('woff2 supports variations'),
url('/fonts/Quicksand-Variable.woff2') format('woff2-variations'); /* Fallback per browser più vecchi */
font-weight: 300 700; /* Definisce il range di pesi supportato dal file */
font-style: normal;
font-display: swap;
}
</style>
Ed infine usarlo specificando la famiglia che avete appena impostato nel CSS:
body {
font-family: 'Quicksand', sans-serif;
font-weight: 400; /* Regular */
}
h2 {
font-weight: 500; /* Medium */
}
h1 {
font-weight: 700; /* Bold */
}
Buona programmazione 🍺