Πώς να φιλοξενείτε γραμματοσειρές τοπικά αντί να χρησιμοποιείτε Google Fonts

Γιατί να φιλοξενείτε μόνοι σας τα Google Fonts;

Τα Google Fonts έκαναν την καλή τυπογραφία εύκολη. Προσθέτετε ένα stylesheet, επιλέγετε μερικά βάρη, δημοσιεύετε τη σελίδα. Για χρόνια, αυτό ήταν η λογική προεπιλογή για μικρές ομάδες.

Το αντάλλαγμα είναι ότι ο browser κάθε επισκέπτη επικοινωνεί με μια υπηρεσία τρίτου για να ανακτήσει το font CSS και τα αρχεία γραμματοσειρών. Αυτό έχει δύο συνέπειες.

Πρώτον, προσθέτει μια εξωτερική εξάρτηση στην απόδοση της σελίδας. Αν το font CSS είναι αργό, μπλοκάρεται ή δεν είναι διαθέσιμο στην περιοχή ή στο δίκτυο του χρήστη, η σελίδα σας περιμένει ή επιστρέφει σε fallback.

Δεύτερον, δημιουργεί ένα ζήτημα ιδιωτικότητας. Ένα αίτημα γραμματοσειράς μπορεί να αποκαλύψει τη διεύθυνση IP του χρήστη, το user agent, το πλαίσιο της referrer policy και πληροφορίες χρονισμού σε τρίτο μέρος. Τα Google Fonts δηλώνουν ότι δεν ορίζουν cookies μέσω του Fonts API, αλλά το «χωρίς cookies» δεν είναι το ίδιο με το «χωρίς προσωπικά δεδομένα». Σύμφωνα με το GDPR, μια διεύθυνση IP μπορεί ακόμη να είναι προσωπικό δεδομένο ανάλογα με το πλαίσιο.

Η αυτοφιλοξενία γραμματοσειρών δεν είναι αυτόματα απαραίτητη για κάθε website, και αυτό δεν αποτελεί νομική συμβουλή. Όμως για ευρωπαϊκά sites, sites του δημόσιου τομέα, υγείας, εκπαίδευσης, χρηματοοικονομικών ή για οποιαδήποτε ομάδα προσπαθεί να μειώσει τα περιττά αιτήματα προς τρίτους, η τοπική φιλοξενία είναι συνήθως η πιο καθαρή επιλογή.

Συχνά είναι επίσης κέρδος απόδοσης, όταν γίνεται σωστά. Η παγίδα είναι το «σωστά». Το να αντιγράψετε έξι αρχεία γραμματοσειρών στο /assets/fonts/ και να τα φορτώνετε όλα σε κάθε σελίδα μπορεί να είναι χειρότερο από τη χρήση της φιλοξενούμενης υπηρεσίας. Αν θέλετε το ευρύτερο πλαίσιο απόδοσης, το προηγούμενο άρθρο μας για το γιατί τα web fonts παραμένουν το πιο εύκολο κέρδος απόδοσης στα περισσότερα sites καλύπτει τα συνηθισμένα μοτίβα σπατάλης.

Τι αλλάζει όταν κάνετε self-hosting

Όταν χρησιμοποιείτε τα Google Fonts με τον συνηθισμένο τρόπο, η σελίδα σας κάνει αυτό:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

Ο browser ζητά πρώτα CSS από το fonts.googleapis.com και στη συνέχεια κατεβάζει αρχεία γραμματοσειρών από το fonts.gstatic.com.

Όταν κάνετε self-hosting, η σελίδα σας θα πρέπει να ζητά τόσο το CSS όσο και τα αρχεία γραμματοσειρών από το δικό σας domain:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Αυτό αφαιρεί το αίτημα γραμματοσειράς προς τρίτο. Σας καθιστά επίσης υπεύθυνους για την επιλογή μορφών αρχείων, cache headers, fallback γραμματοσειρών και ενημερώσεων.

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

Βήμα 1: Ελέγξτε τι χρησιμοποιείτε πραγματικά

Πριν κατεβάσετε οτιδήποτε, καταγράψτε τις οικογένειες γραμματοσειρών, τα βάρη, τα στυλ και τα σύνολα χαρακτήρων που χρειάζεται πραγματικά το site σας.

Ένα τυπικό marketing site μπορεί να χρειάζεται:

• Regular 400 για το κυρίως κείμενο
• Semibold 600 ή bold 700 για επικεφαλίδες και κουμπιά
• Italic 400 μόνο αν το design χρησιμοποιεί πράγματι italics
• Μόνο λατινικό σύνολο χαρακτήρων, εκτός αν το site υποστηρίζει περισσότερες γλώσσες

Να είστε επιφυλακτικοί με παλιές προεπιλογές design system. Πολλά sites φορτώνουν 300, 400, 500, 600, 700, italics και πολλαπλά scripts επειδή κάποιος τα επέλεξε κάποτε σε έναν font picker.

Στα browser DevTools, ανοίξτε το Network panel, φιλτράρετε με βάση το “font”, φορτώστε ξανά τη σελίδα και ελέγξτε ποια αρχεία ζητούνται. Έπειτα εξετάστε το CSS σας για χρήση του font-weight. Αν το CSS σας δεν χρησιμοποιεί ποτέ 300, μην φιλοξενείτε 300.

Αν αξιολογείτε αργότερα τον αντίκτυπο, το Lighthouse μπορεί να βοηθήσει, αλλά μην αντιμετωπίζετε τη βαθμολογία του ως όλη την ιστορία. Χρησιμοποιήστε το ως διαγνωστικό εργαλείο, όχι ως κριτή. Έχουμε έναν ξεχωριστό οδηγό για το πώς να διαβάζετε ένα Lighthouse report χωρίς πανικό, χρήσιμο όταν βάζετε προτεραιότητες στις διορθώσεις γραμματοσειρών.

Βήμα 2: Κατεβάστε τα σωστά αρχεία γραμματοσειρών

Τα Google Fonts προσφέρουν γραμματοσειρές ανοικτού κώδικα. Μπορείτε να τις κατεβάσετε από το website των Google Fonts ή από το σχετικό repository του project της γραμματοσειράς. Ελέγξτε την άδεια, αλλά οι περισσότερες γραμματοσειρές των Google Fonts διανέμονται με ανοικτές άδειες, όπως η SIL Open Font License ή η Apache License.

Για το web, προτιμήστε WOFF2. Υποστηρίζεται ευρέως από σύγχρονους browsers και συνήθως είναι πολύ μικρότερο από TTF ή OTF. Το 2026, η απευθείας διάθεση TTF σε browsers σπάνια δικαιολογείται για δημόσια websites.

Μια λογική δομή φακέλων μοιάζει έτσι:

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

Χρησιμοποιήστε περιγραφικά ονόματα αρχείων. Έξι μήνες αργότερα, το font.woff2 θα είναι ενοχλητικό. Το inter-latin-600.woff2 είναι βαρετό και χρήσιμο.

Αν το site σας χρησιμοποιεί build system, κρατήστε τις πηγαίες γραμματοσειρές σε ένα σαφές σημείο και αφήστε το build pipeline να αντιγράφει τα βελτιστοποιημένα αρχεία στον φάκελο δημόσιων assets.

Βήμα 3: Δημιουργήστε υποσύνολα γραμματοσειρών όπου έχει νόημα

Το subsetting σημαίνει αφαίρεση χαρακτήρων που δεν χρειάζεστε. Μια πλήρης γραμματοσειρά μπορεί να περιλαμβάνει λατινικά, κυριλλικά, ελληνικά, βιετναμικά, σύμβολα και πολλές λειτουργίες OpenType. Αν μια landing page μόνο στα αγγλικά χρειάζεται μόνο λατινικούς χαρακτήρες, ένα υποσύνολο μπορεί να είναι δραματικά μικρότερο.

Υπάρχουν δύο συνηθισμένες προσεγγίσεις:

1. Χρησιμοποιήστε ένα έτοιμο υποσύνολο από τον πάροχο ή το repository της γραμματοσειράς.
2. Δημιουργήστε το δικό σας υποσύνολο με ένα εργαλείο γραμματοσειρών όπως το pyftsubset από το fonttools.

Για πολλές ομάδες, τα έτοιμα λατινικά υποσύνολα είναι αρκετά. Το custom subsetting είναι χρήσιμο όταν έχετε πολύ περιορισμένες σελίδες, όπως μια μεμονωμένη campaign page με περιορισμένο κείμενο ή ένα product UI με προβλέψιμη κάλυψη χαρακτήρων.

Προσέξτε τα πολυγλωσσικά sites. Οι χαρακτήρες που λείπουν προκαλούν ανάμειξη με fallback γραμματοσειρές, κάτι που μπορεί να φαίνεται χαλασμένο και να βλάπτει την αναγνωσιμότητα. Αν υποστηρίζετε πολλές γλώσσες, αντιστοιχίστε υποσύνολα γραμματοσειρών σε language routes αντί να επιβάλλετε ένα μικροσκοπικό υποσύνολο παντού.

Βήμα 4: Γράψτε τους κανόνες @font-face

Μια ελάχιστη τοπική ρύθμιση μοιάζει έτσι:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Μερικές λεπτομέρειες έχουν σημασία εδώ.

Χρησιμοποιήστε font-display: swap για τα περισσότερα content sites. Λέει στον browser να εμφανίσει γρήγορα το fallback κείμενο και στη συνέχεια να αλλάξει στη web font όταν αυτή φτάσει. Αυτό αποφεύγει τη χειρότερη εκδοχή του FOIT: flash of invisible text.

Ορίστε ένα ρητό fallback stack. Αν η custom γραμματοσειρά αποτύχει, οι χρήστες πρέπει και πάλι να βλέπουν αναγνώσιμο κείμενο. Τα fallbacks δεν είναι ύστερη σκέψη· είναι μέρος του design. Αν χρειάζεται να επανεξετάσετε μεγέθη, μήκος γραμμής και επιλογές κυρίως κειμένου, ξεκινήστε με έναν πρακτικό οδηγό για αναγνώσιμη τυπογραφία στο σύγχρονο web.

Αντιστοιχίστε σωστά τα βάρη. Αν το CSS σας ζητά font-weight: 500 αλλά εσείς ορίζετε μόνο 400 και 700, ο browser μπορεί να συνθέσει ένα ενδιάμεσο βάρος. Αυτό δεν είναι πάντα τρομερό, αλλά μπορεί να φαίνεται ασυνεπές.

Βήμα 5: Αφαιρέστε τις εξωτερικές κλήσεις προς Google Fonts

Αφού προσθέσετε τοπικό font CSS, αφαιρέστε τις παλιές απομακρυσμένες κλήσεις από τα templates σας.

Αναζητήστε:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">

Ελέγξτε επίσης:

• Ρυθμίσεις theme σε CMS platforms
• Πάνελ τυπογραφίας page-builder
• Third-party widgets
• Tag managers
• Παλιά CSS imports όπως @import url('https://fonts.googleapis.com/...')

Το τελευταίο είναι συνηθισμένο. Το CSS @import για γραμματοσειρές είναι συνήθως χειρότερο για την απόδοση, επειδή καθυστερεί την ανακάλυψη. Αν κάνετε self-hosting, ορίστε τις γραμματοσειρές απευθείας στο κύριο CSS σας ή σε ένα font CSS file που φορτώνεται νωρίς.

Η δουλειά γύρω από την ιδιωτικότητα συχνά αποτυγχάνει επειδή οι ομάδες διορθώνουν το προφανές template, αλλά χάνουν scripts, widgets και παλιά embeds. Το ίδιο μοτίβο εμφανίζεται και στη δουλειά για consent· ο οδηγός μας για το τι άλλαξε για τα cookies το 2026 είναι χρήσιμος συνοδός αν μειώνετε ευρύτερα την επιφάνεια έκθεσης προς τρίτους.

Βήμα 6: Ορίστε cache headers

Τα αρχεία γραμματοσειρών είναι static assets. Θα πρέπει να αποθηκεύονται επιθετικά στην cache αν τα ονόματα αρχείων τους είναι versioned ή content-hashed.

Ένα καλό production header είναι:

Cache-Control: public, max-age=31536000, immutable

Χρησιμοποιήστε long-lived immutable caching μόνο αν το URL αλλάζει όταν αλλάζει το αρχείο. Για παράδειγμα:

inter-latin-400.a8f3c2.woff2

ή ένα versioned path:

/fonts/v2/inter-latin-400.woff2

Αν αντικαταστήσετε το /fonts/inter-latin-400.woff2 χωρίς να αλλάξετε το URL, ορισμένοι χρήστες μπορεί να κρατήσουν το παλιό αρχείο για μεγάλο διάστημα. Αυτό είναι εντάξει μέχρι να μην είναι. Το versioning αποφεύγει το πρόβλημα.

Επίσης, σερβίρετε τις γραμματοσειρές με τον σωστό MIME type:

Content-Type: font/woff2

Οι περισσότερες σύγχρονες hosting platforms το χειρίζονται αυτόματα, αλλά αξίζει να το επαληθεύσετε.

Βήμα 7: Εξετάστε το preload μόνο για την κρίσιμη γραμματοσειρά

Το preloading μπορεί να βοηθήσει τον browser να ανακαλύψει νωρίτερα μια σημαντική γραμματοσειρά:

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

Χρησιμοποιήστε το με φειδώ. Κάντε preload την κύρια γραμματοσειρά του κειμένου above-the-fold, όχι κάθε βάρος γραμματοσειράς. Το υπερβολικό preloading ανταγωνίζεται το CSS, τις εικόνες και το JavaScript.

Ακόμη και για same-origin γραμματοσειρές, συμπεριλάβετε crossorigin στα font preloads. Η ανάκτηση γραμματοσειρών χρησιμοποιεί CORS mode, και η παράλειψή του μπορεί να προκαλέσει διπλές λήψεις σε ορισμένες ρυθμίσεις.

Αν δεν είστε σίγουροι, δοκιμάστε. Μην αντιγράφετε άκριτα preloads επειδή το είπε ένα checklist.

Βήμα 8: Δοκιμάστε ιδιωτικότητα και απόδοση

Η δοκιμή είναι απλή.

Ανοίξτε τα DevTools, φορτώστε ξανά τη σελίδα με απενεργοποιημένη την cache και φιλτράρετε το Network panel για:

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

Θα πρέπει να βλέπετε αρχεία γραμματοσειρών που σερβίρονται από το δικό σας domain και κανένα αίτημα προς Google Fonts.

Έπειτα δοκιμάστε με cold cache και warm cache. Στην πρώτη επίσκεψη, οι γραμματοσειρές θα πρέπει να κατεβαίνουν μία φορά. Σε επόμενες επισκέψεις, θα πρέπει να έρχονται από memory ή disk cache, ανάλογα με τον browser.

Ελέγξτε για layout shift όταν η γραμματοσειρά γίνεται swap. Αν οι επικεφαλίδες μετακινούνται, τα metrics της fallback γραμματοσειράς σας διαφέρουν υπερβολικά από τη web font. Μπορείτε να μειώσετε την ορατή μετατόπιση επιλέγοντας ένα πιο κοντινό fallback ή χρησιμοποιώντας νεότερα CSS font metric overrides όπως size-adjust, ascent-override, descent-override και line-gap-override. Αυτά είναι πιο προχωρημένα, αλλά χρήσιμα για προσεγμένα interfaces.

Τέλος, δοκιμάστε σελίδες σε private browsing ή με ενεργοποιημένα content blockers. Ένα όφελος του self-hosting είναι ότι τα εργαλεία ιδιωτικότητας είναι λιγότερο πιθανό να μπλοκάρουν κατά λάθος την τυπογραφία σας.

Συνηθισμένα λάθη προς αποφυγή

Φιλοξενία υπερβολικά πολλών βαρών

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

Να ξεχνάτε τα italics

Αν το περιεχόμενό σας χρησιμοποιεί πραγματική έμφαση, φορτώστε ένα πραγματικό italic αρχείο. Τα synthetic italics μπορεί να φαίνονται φτωχά, ειδικά σε editorial περιεχόμενο μεγάλης έκτασης.

Να κρατάτε το παλιό Google CSS link

Αυτό ακυρώνει τον σκοπό. Μετά τη μετάβαση, κανένα αίτημα γραμματοσειράς δεν πρέπει να πηγαίνει στην Google, εκτός αν το εισάγει κάποιο άλλο component.

Διάθεση γραμματοσειρών χωρίς μακροχρόνια caching

Το self-hosting σας δίνει έλεγχο. Χρησιμοποιήστε τον. Οι γραμματοσειρές είναι ιδανικές υποψήφιες για μεγάλης διάρκειας cache lifetimes.

Παράβλεψη νομικής και τεκμηριωτικής εργασίας

Αν η privacy policy σας ανέφερε προηγουμένως Google Fonts ή φόρτωση γραμματοσειρών από τρίτους, ενημερώστε την μετά τη μετάβαση. Αν διατηρείτε inventory επεξεργασίας δεδομένων, ενημερώστε και αυτό. Η τεχνική αλλαγή και το compliance record πρέπει να συμφωνούν.

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

💡 Δοκιμάστε αυτό: Μετατρέψτε τα αρχεία TTF που κατεβάσατε από το Google Fonts σε WOFF2 για αυτο-φιλοξενία μαζί με CSS με το Webfont Generator.

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

Ένα απλό checklist μετάβασης

1. Καταγράψτε τις οικογένειες γραμματοσειρών, τα βάρη, τα στυλ και τα scripts που χρησιμοποιείτε πραγματικά.
2. Κατεβάστε WOFF2 files και επιβεβαιώστε την άδεια.
3. Δημιουργήστε υποσύνολα γραμματοσειρών αν το site έχει περιορισμένες γλωσσικές ανάγκες.
4. Προσθέστε τοπικούς κανόνες @font-face με font-display: swap.
5. Αφαιρέστε όλες τις αναφορές Google Fonts link, preconnect και @import.
6. Σερβίρετε γραμματοσειρές από το δικό σας domain με long-lived cache headers.
7. Κάντε preload μόνο την πιο σημαντική above-the-fold γραμματοσειρά, αν οι δοκιμές το υποστηρίζουν.
8. Επαληθεύστε στα DevTools ότι δεν απομένουν αιτήματα προς Google Fonts.
9. Ενημερώστε την τεκμηρίωση ιδιωτικότητας αν χρειάζεται.

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