Οι web γραμματοσειρές παραμένουν το ευκολότερο κέρδος απόδοσης στους περισσότερους ιστότοπους

Το μοτίβο που εμφανίζεται ξανά και ξανά

Αν ελέγξετε δέκα τυχαίους ιστότοπους παραγωγής σήμερα, θα βρείτε περίπου την ίδια κατάσταση με τις γραμματοσειρές στους περισσότερους από αυτούς:

• Έξι έως δέκα αρχεία γραμματοσειρών φορτωμένα στην αρχική σελίδα
• Όλα σε WOFF2 (καλό), αλλά χωρίς στρατηγική font-display (κακό)
• Αρκετά πάχη και στυλ που δεν χρησιμοποιούνται πουθενά στη σελίδα
• Ολόκληρη η στοίβα σερβίρεται από domain τρίτου μέρους (Google Fonts, συνήθως), με όλο το κόστος DNS, TLS και ιδιωτικότητας που αυτό συνεπάγεται
• Χωρίς subsetting με unicode-range, οπότε κάθε επισκέπτης κατεβάζει τα κυριλλικά και ελληνικά glyphs ακόμη κι αν η σελίδα είναι στα αγγλικά

Αυτό δεν είναι πρόβλημα που αφορά μόνο μικρούς ιστότοπους. Πολλές καλά χρηματοδοτημένες marketing σελίδες εξακολουθούν να φορτώνουν 600 KB γραμματοσειρών πριν μπορέσει να αποδοθεί η πρώτη παράγραφος. Μόλις αρχίσετε να παρατηρείτε το μοτίβο, δεν μπορείτε να το αγνοήσετε.

Η λύση δεν είναι κάτι εξωτικό. Είναι μια χούφτα καλά κατανοημένες τεχνικές που υπάρχουν στους browsers εδώ και χρόνια.

Χρησιμοποιήστε μία variable font αντί για έξι στατικές

Αν φορτώνετε Inter Regular, Inter Medium, Inter SemiBold, Inter Bold και τα αντίστοιχα italics, κατεβάζετε περίπου έξι φορές περισσότερα bytes από όσα χρειάζεστε. Μία μόνο Inter variable font καλύπτει ολόκληρο τον άξονα βάρους (και την κλίση, σε ορισμένα builds) σε ένα αρχείο που είναι μόλις λίγο μεγαλύτερο από δύο στατικά πάχη.

Το ζήτημα της υποστήριξης από browsers έχει λυθεί εδώ και χρόνια — οι variable fonts λειτουργούν παντού όπου έχει σημασία. Ο εναπομένων δισταγμός είναι κυρίως κληρονομημένη μυϊκή μνήμη από την εποχή των στατικών γραμματοσειρών.

Ένας πρακτικός κανόνας: ένα αρχείο variable font ανά σύστημα γραφής, ανά οικογένεια. Λατινικά σε ένα αρχείο, κυριλλικά σε άλλο, ελληνικά σε τρίτο, φορτωμένα υπό όρους με unicode-range. Αυτό είναι όλο.

Ορίστε ένα λογικό font-display

Η προεπιλεγμένη συμπεριφορά όταν μια custom γραμματοσειρά εξακολουθεί να φορτώνει είναι να μην εμφανίζεται τίποτα — αόρατο κείμενο — για έως και τρία δευτερόλεπτα. Είναι η χειρότερη δυνατή προεπιλογή. Οι χρήστες βλέπουν μια κενή σελίδα και υποθέτουν ότι κάτι έχει χαλάσει.

Προσθέστε αυτό σε κάθε κανόνα @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

Το swap εμφανίζει αμέσως την εφεδρική γραμματοσειρά και αλλάζει στην custom γραμματοσειρά όταν φορτώσει. Ο χρήστης μπορεί να διαβάσει τη σελίδα από το μηδενικό χιλιοστό του δευτερολέπτου. Το αντάλλαγμα είναι μια σύντομη μετατόπιση διάταξης όταν συμβεί η αλλαγή, την οποία μετριάζετε με την επόμενη τεχνική.

Ταιριάξτε τα metrics της εφεδρικής γραμματοσειράς

Ένα flash of unstyled text μοιάζει ενοχλητικό μόνο όταν η εφεδρική και η custom γραμματοσειρά έχουν πολύ διαφορετικά metrics. Το σύγχρονο CSS το διορθώνει αυτό με size-adjust, ascent-override και συναφή:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Με ρυθμισμένα fallback metrics, η αλλαγή είναι σχεδόν ανεπαίσθητη — οι λέξεις καταλαμβάνουν τον ίδιο οριζόντιο χώρο πριν και μετά την άφιξη της custom γραμματοσειράς.

Το έργο της Google γύρω από το --allow-fallback-font-metrics αποτελεί πλέον βασική υποστήριξη στους browsers, και υπάρχει μια αλυσίδα εργαλείων (η βιβλιοθήκη fontaine και παρόμοιες) που υπολογίζει τους σωστούς αριθμούς για εσάς σε δευτερόλεπτα.

Κάντε self-host

Το Google Fonts είναι βολικό, δωρεάν, και φέρνει δύο πραγματικά κόστη:

1. Ένα δεύτερο TLS handshake. Ακόμη και με HTTP/3 και connection coalescing, ένα επιπλέον origin σπάνια είναι δωρεάν.
2. Ένα ζήτημα ιδιωτικότητας και συμμόρφωσης. Αρκετά ευρωπαϊκά δικαστήρια έχουν κρίνει ότι η φόρτωση Google Fonts από το fonts.gstatic.com συνιστά μετάδοση προσωπικών δεδομένων (της διεύθυνσης IP) σε τρίτο μέρος. Το self-hosting αφαιρεί πλήρως το ερώτημα.

Η διαδικασία λήψης και φιλοξενίας είναι:

1. Πάρτε το αρχείο WOFF2 (variable build αν υπάρχει)
2. Κάντε subset στα συστήματα γραφής που χρησιμοποιεί πραγματικά το κοινό σας
3. Σερβίρετέ το από το ίδιο origin με τον υπόλοιπο ιστότοπό σας, με μεγάλο Cache-Control: max-age=31536000, immutable
4. Κάντε preload το πιο κρίσιμο βάρος: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Αυτή είναι όλη η διαδικασία. Παίρνει ένα απόγευμα για έναν υπάρχοντα ιστότοπο, και σχεδόν ποτέ δεν γυρίζετε πίσω.

Πότε να παραλείψετε εντελώς τις custom γραμματοσειρές

Αξίζει να το πούμε ξεκάθαρα: δεν χρειάζεται κάθε ιστότοπος custom γραμματοσειρά. Η στοίβα γραμματοσειρών συστήματος είναι πλέον πραγματικά όμορφη σε κάθε λειτουργικό σύστημα:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Το βάρος είναι σωστό, τα metrics είναι σωστά, η απόδοση είναι ρυθμισμένη για τη συσκευή, και το κόστος σε bytes-on-the-wire είναι ακριβώς μηδέν. Για έναν ιστότοπο εργαλείων, μια εσωτερική εφαρμογή, ένα portfolio που δίνει προτεραιότητα στο περιεχόμενο ή οτιδήποτε απευθύνεται σε χρήστες με αργά δίκτυα, η στοίβα συστήματος είναι η σωστή απάντηση.

<!-- tool-cta:start -->

💡 Δοκιμάστε αυτό: Μετατρέψτε τα αρχεία TTF ή OTF σας σε σύγχρονο WOFF2 με έτοιμο προς χρήση CSS χρησιμοποιώντας το Webfont Generator, που είναι η αλλαγή μορφής που προτείνει η ανάρτηση.

<!-- tool-cta:end -->

Η ειλικρινής σύνοψη

Για έναν τυπικό μικρό ιστότοπο, τέσσερα βήματα καλύπτουν ολόκληρη την ιστορία απόδοσης των web γραμματοσειρών:

1. Μία variable font ανά οικογένεια ανά σύστημα γραφής
2. font-display: swap με ταιριασμένα fallback metrics
3. Self-hosted με μεγάλης διάρκειας cache headers και ένα preload για το κρίσιμο βάρος
4. Ή παραλείψτε εντελώς τις γραμματοσειρές και χρησιμοποιήστε τη στοίβα συστήματος

Κάντε το μία φορά και ανακτάτε αρκετές εκατοντάδες kilobytes από την αρχική σελίδα, κερδίζετε μερικές εκατοντάδες χιλιοστά του δευτερολέπτου σε αντιληπτή απόδοση, και αφαιρείτε στην πορεία μια εξάρτηση από τρίτο μέρος. Λίγες αλλαγές έχουν καλύτερη αναλογία προσπάθειας προς απόδοση.