Google Fonts → lokalt (utan att byta typsnitt)

Målet: åtgärda GDPR-risken genom att ladda typsnitten lokalt — men behålla exakt samma familj, vikter och stilar som sidan redan använder.

Snabb checklista Stötta oss

Innehåll

Varför detta spelar roll (GDPR)
A) Identifiera vilka varianter som används
B) Ladda ner exakt samma varianter
C) Lägg filerna lokalt på servern
D) Skriv @font-face (spegla 1:1)
E) Ta bort externa Google-länkar
WordPress: manuellt vs. plugin
Verifiera & felsök
Snabb checklista

Varför detta spelar roll (GDPR)

När en sida laddar typsnitt från fonts.googleapis.com/gstatic skickas besökarens IP-adress till Google (USA). Genom att hosta typsnitten lokalt undviker du onödig persondata-överföring och behåller samma design.

A) Identifiera vilka varianter som används (ändra inget ännu)

Öppna sidan → DevTools (F12) → fliken Network. Ladda om sidan och filtrera på fonts.googleapis.com eller gstatic.
Notera familj (t.ex. Inter), vikter (400/600/700) och stilar (normal/italic).
Bekräfta även via Elements → Computed på rubrik och brödtext: kontrollera font-family och font-weight.

B) Ladda ner exakt samma varianter

Gå till fonts.google.com, välj samma familj och klicka Download family.
Behåll bara de .woff2-filer som motsvarar just de vikter/stilar du använder.
Om det finns en variabel .woff2 (100–900) kan du använda den som ersätter flera vikter.

C) Lägg filerna lokalt på servern

Skapa en mapp, t.ex. /fonts/[FAMILJ]/. Exempel: /fonts/Inter/Inter-Regular.woff2

D) Skriv `@font-face` för de varianter du faktiskt använder

Behåll samma font-family-namn som sidan redan använder (t.ex. "Inter"). Då slipper du ändra all befintlig CSS.

Mall – fasta vikter

/* Byt [FAMILY] och filvägarna till dina */
@font-face{
  font-family: "[FAMILY]";
  src: url("/fonts/[FAMILY]/[FAMILY]-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "[FAMILY]";
  src: url("/fonts/[FAMILY]/[FAMILY]-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Om sidan redan sätter font-family – låt det vara. Annars: */
html, body { font-family: "[FAMILY]", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

Variabel font (om tillgänglig)

@font-face{
  font-family: "[FAMILY]";
  src: url("/fonts/[FAMILY]/[FAMILY]-Variable.woff2") format("woff2");
  font-weight: 100 900; /* intervall */
  font-style: normal;
  font-display: swap;
}

E) Ta bort externa Google-länkar

Ta bort <link rel="stylesheet" href="https://fonts.googleapis.com/..."> i <head> och/eller @import url(...) i CSS.
Rensa cache/CDN så att de nya lokala filerna laddas.

WordPress: två vägar

1) Manuellt

Snabbaste: välj systemtypsnitt i Utseende → Anpassa → Typsnitt (inga externa anrop).
Behåll din familj: ladda ner .woff2 → lägg i /wp-content/uploads/fonts/ → lägg in @font-face i Anpassad CSS → ta bort Google-länkar.

2) Plugin (enklast)

Installera OMGF – Host Google Fonts Locally.
Settings → Optimize Google Fonts → Detect → Download. Pluginet hostar dina befintliga fonter lokalt.

Tips: Efter ändring, kontrollera i DevTools → Network att inga anrop går till fonts.googleapis.com/gstatic.

Verifiera & felsök

Utseende lika? Samma familj, vikt och italic som före ändringen.
Inga externa anrop: Network visar bara din domän för font-filer.
Om det ser fel ut: kontrollera att du laddat rätt vikter/italic, filvägar och att cache/CDN är tömd.

Snabb checklista

Lista exakt familj + vikter/stilar som används nu.
Ladda ner samma varianter (.woff2).
Lägg filer lokalt och skriv @font-face med samma font-family-namn.
Ta bort fonts.googleapis.com/gstatic-länkar/importer.
Verifiera att utseendet är oförändrat och att inga externa anrop sker.