Kako dodati Google Fonts na web stranicu (3 laka načina)

Da bi dodao Google font na web stranicu, trebaš obaviti dva mala posla: učitati font, pa reći tekstu da ga koristi. Učitati ga možeš <link> oznakom u zaglavlju (headu) stranice, linijom @import na vrhu CSS-a ili iz datoteka fonta koje sam hostaš. Najbrži način da dobiješ točne retke je besplatno proširenje FontMee: isprobaš font na svojoj stranici, pritisneš Kopiraj CSS i zalijepiš. Ispod su sva tri načina, s kodom koji možeš kopirati kakav jest.

Što zapravo znači “dodati font”

Zamisli font kao gosta na večeri. Prvo ga moraš pozvati, a to znači da tvoja stranica mora preuzeti datoteku fonta. Zatim mu moraš dati mjesto za stolom, a to znači reći tekstu da ga koristi. Ako preskočiš poziv, font se nikad ne pojavi. Ako preskočiš mjesto, on sjedi u kutu, a tvoj tekst ostaje na starom fontu.

Oba posla pišu se u CSS-u, skupu pravila koja stranici govore kako da izgleda. Poziv ide u head stranice (skriveni dio na vrhu HTML-a gdje preglednik čita svoje upute) ili na sam vrh CSS datoteke. Mjesto za stolom je jedno kratko pravilo, kao ono u primjerima ispod. Koji god način odabereš, ta dva posla ostaju ista.

Način 1: link oznaka u headu stranice

Ovo je metoda koju Google pokazuje na svojoj stranici. U head stranice staviš tri retka: dva koja govore pregledniku da se pripremi za spajanje na Google i jedan koji učitava font. Obično se učita malo prije nego ostali načini, jer preglednik može početi dohvaćati font i prije nego pročita tvoj CSS.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">
  <style>
    h1, h2 { font-family: 'Lora', serif; }
  </style>
</head>

Zadnji dio linka, display=swap, govori pregledniku da odmah prikaže tekst rezervnim fontom i zamijeni ga pravim čim stigne, pa posjetitelji nikad ne gledaju prazan prostor. Riječ iza zareza u tvom pravilu (serif) je ta rezerva, a Google preporučuje da je uvijek dodaš. Ovaj način koristi kad možeš uređivati HTML stranice.

Način 2: @import linija na vrhu CSS-a

Ponekad ne možeš dirati head stranice, samo CSS. Tako je s okvirom Additional CSS u WordPressu, CSS odjeljkom mnogih alata za izradu stranica ili običnom datotekom style.css. Tada poziv može živjeti unutar CSS-a, kao jedan redak koji mora biti sasvim na vrhu, iznad svih ostalih pravila.

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

h1, h2 { font-family: 'Lora', serif; }

Najlakše ga je zalijepiti, ali je obično malo sporiji od link oznake, jer preglednik font otkrije tek nakon što pročita tvoj CSS. Na maloj stranici to nećeš ni primijetiti.

Način 3: sam hostaj datoteke fonta

Ovdje preuzmeš datoteke fonta od Googlea, učitaš ih na svoju stranicu i usmjeriš na njih, pa se preglednici tvojih posjetitelja uopće ne spajaju na Google. Neki to biraju zbog privatnosti, neki zbog brzine, a neki jer se pravila o tome razlikuju od države do države, pa provjeri što vrijedi za tvoje posjetitelje. Treba nekoliko koraka više, ali ništa nije teško: kopiraš mapu, pa dodaš pravilo koje kaže gdje datoteka živi.

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

h1, h2 { font-family: 'Lora', serif; }

Google Fonts su otvorenog koda, pa ih smiješ preuzeti i hostati, i za komercijalne projekte. Sporo je pronaći i preuzeti svaku datoteku te ručno napisati svaki @font-face blok. FontMee to radi za tebe, kao što ćeš odmah vidjeti.

Koji način odabrati?

• Možeš uređivati HTML stranice: koristi link oznaku (način 1).
• Možeš uređivati samo CSS ili koristiš alat za izradu stranica s CSS okvirom: koristi @import (način 2).
• Želiš da preglednici posjetitelja sve učitavaju s tvog poslužitelja: hostaj datoteke (način 3).

Nisi siguran? Počni s načinom 1 ili 2. Kasnije možeš prijeći na drugi, a mijenja se samo jedan redak koji učitava font.

Točan kod dobiješ s FontMeeom

Ručno tipkanje ovih redaka je mjesto gdje se događa većina grešaka: izostavljen plus, debljina koju font nema, pravilo koje ne odgovara tvojim naslovima. FontMee je besplatno Chromeovo proširenje, mali dodatak koji pregledniku daje jednu novu mogućnost, i on piše te retke umjesto tebe. Prvo isprobaš font na svojoj pravoj stranici, vidiš kako izgleda, pa kopiraš kod točno za taj izbor. Ima više od 1900 fontova, a video pokazuje panel na djelu.

1. Instaliraj FontMee. Dodaj ga iz Chrome web-trgovine. Besplatan je i ne treba račun. Klikni ikonu slagalice u Chromeu i prikvači ga, pa je uvijek na jedan klik.
2. Otvori svoju stranicu i klikni ikonu FontMeea. Panel se otvori pokraj stranice. Možeš pritisnuti i Alt + Shift + F. Chromeove vlastite stranice (Nova kartica, web-trgovina, stranice chrome://) ne mogu se mijenjati.
3. Odaberi gdje font ide. Pod Primijeni promjene na odaberi Sve, Naslovi ili Tekst, pa klikni font. Naslove i tekst možeš raditi zasebno.
4. Provjeri na pravoj stranici. Prebacuj između Originalni font i FontMee pregled, a Podesi koristi za veličinu, debljinu i razmak redaka dok ne izgleda kako treba.
5. Pritisni Kopiraj CSS. Otvori se prozor s četiri kartice: CSS (način s @importom), HTML (način s link oznakom), Varijable i Tailwind za one koji ih koriste. Odaberi karticu koja odgovara tvom načinu, pritisni Kopiraj u međuspremnik i zalijepi u svoju stranicu. FontMee od Googlea traži samo debljine koje font stvarno ima, pa ne završiš s pokvarenim linkom.
6. Želiš način 3? U istom prozoru pritisni Preuzmi ZIP za vlastiti hosting. Dobiješ mapu s datotekama fonta, fonts.css, fontmee.css i kratki README. Učitaj mapu na stranicu i dodaj dva linka na stilske datoteke.

Četiri stvari za provjeriti prije objave

• Učitaj samo ono što koristiš. Svaki dodatni font i debljina stranicu čine malo težom. Dva fonta i dvije debljine dovoljni su za većinu stranica.
• Imaj rezervni font. Svaki font-family završi općenitim nazivom poput serif ili sans-serif, da tekst izgleda dobro i dok se font učitava.
• Provjeri slova koja trebaš. Naglasci poput č, ć, š, đ te ćirilica ili vijetnamska slova nisu u svakom fontu. Pregledaj svoje riječi u FontMeeu prije kopiranja.
• Provjeri licencu. Google Fonts su otvorenog koda i besplatni za komercijalnu uporabu. Prozor s kodom u FontMeeu navodi licencu svakog fonta, pa je možeš vidjeti prije objave.

Još nemaš stranicu? Onda je font tek drugi na redu. Stranici treba i dom u kojem živi, a graditelj stranica je najbrži način da ga dobiješ bez koda.

Preuzmi ekstenziju

FontMee je besplatan, s 1900+ fontova, kopiranjem CSS-a u četiri formata, ZIP-om za vlastiti hosting i učitavanjem vlastitih fontova. Bez računa, bez pretplate. Dodaj ga iz Chrome web-trgovine ili prvo pročitaj stranicu o FontMeeu.

Dobro je znati prije nego počneš

FAQ