Kako koristiti vlastiti font na web stranici (prvo ga testiraj)

Da bi na web stranici koristio vlastiti font, datoteku fonta učitaš na svoju stranicu, pravilom @font-face kažeš CSS-u gdje se nalazi, a zatim je koristiš s font-family. Prije svega toga možeš font testirati na svojim pravim stranicama: besplatnom ekstenzijom FontMee učitaš datoteku .woff2, .ttf ili .otf sa svog računala i vidiš je na bilo kojoj stranici jednim klikom, bez ikakve promjene i bez ikakvog učitavanja na poslužitelj.

Što je vlastiti font

Vlastiti font je jednostavno datoteka fonta koja nije ni jedan od fontova koje svako računalo već ima, ni jedan od besplatnih fontova s Google Fontsa. To može biti brend font od dizajnera, font koji si kupio ili koji si sam napravio. Obično dolazi kao datoteka koja završava s .woff2, .woff, .ttf ili .otf. Još nemaš datoteku? Naš vodič o dodavanju Google fontova pokriva besplatne.

Za web stranice je najbolji izbor .woff2: malen je pa se stranice brže učitavaju, a čitaju ga svi današnji preglednici. .ttf i .otf su formati koje koristiš na računalu. Rade i u preglednicima, ali su datoteke veće. Ako imaš samo .ttf ili .otf, to je za testiranje sasvim u redu.

Korak 1: Prvo ga testiraj na pravoj stranici

Učitavati font i pisati kod samo da bi otkrio da ti se ne sviđa troši cijelo poslijepodne. FontMee je besplatna Chrome ekstenzija, mali dodatak koji Chromeu daje jednu novu mogućnost, i omogućuje ti da prvo isprobaš fontove na živoj stranici. Prima i tvoje vlastite datoteke. Kratki video prikazuje panel.

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 stranicu svog weba i klikni ikonu FontMee. Panel se otvori uz stranicu. Možeš i pritisnuti Alt + Shift + F. Chromeove vlastite stranice (Nova kartica, web-trgovina, stranice chrome://) ne mogu se mijenjati.
3. Pritisni Upload i odaberi datoteku fonta. Možeš odabrati više datoteka odjednom, do 6 MB svaka. FontMee imenuje font prema datoteci, pa my_brand_sans.woff2 postane my brand sans.
4. Nađi ga pod Moji fontovi. Tvoji učitani fontovi imaju vlastiti filter i označeni su s Tvoj. Prijeđi mišem preko jednog da ga preimenuješ olovkom ili obrišeš kantom.
5. Klikni font da ga isprobaš. Pod Primijeni promjene na odaberi Sve, Naslovi ili Tekst. S Podesi namjesti veličinu, debljinu i razmak redaka, a između Originalni font i FontMee pregled prebacuj radi usporedbe.
6. Upiši vlastite riječi. U okvir za vlastiti tekst upiši pravi naslov, ime ili rečenicu s posebnim slovima, da vidiš kako ih font podnosi.

Tvoje datoteke fonta ostaju u tvom pregledniku, na tvom računalu. Ništa se ne učitava na poslužitelj, a test mijenja samo ono što ti vidiš, pa nitko drugi ništa ne primijeti. Želiš rezultat pokazati klijentu? FontMee može napraviti sliku prije i poslije: evo kako.

Korak 2: Stavi datoteku fonta na svoju stranicu

Kad si zadovoljan, font mora živjeti na tvojoj stranici, jer preglednici posjetitelja mogu učitati samo datoteke koje su na internetu, a ne na tvom računalu. Napravi mapu fonts i učitaj datoteku u nju, isto kao što učitavaš slike: preko upravitelja datoteka svog hostinga, preko FTP-a ili preko učitavanja fontova koje možda nudi tvoj graditelj stranica. Mapa bi mogla izgledati ovako:

your-website/
  index.html
  style.css
  fonts/
    my-brand-sans.woff2
    my-brand-sans.ttf

Koristi jednostavna imena datoteka malim slovima i bez razmaka (my-brand-sans.woff2, a ne My Brand Sans (1).woff2). Tako izbjegavaš klasičan uzrok problema „moj se font ne prikazuje“.

Korak 3: Reci CSS-u za font

Sada u CSS, pravila koja stranici govore kako izgleda, pišeš dvije male stvari. Prvo blok @font-face, koji kaže „postoji font s ovim imenom i njegova je datoteka ovdje“. Zatim obično pravilo koje taj font koristi.

@font-face {
  font-family: 'My Brand Sans';
  src: url('/fonts/my-brand-sans.woff2') format('woff2'),
       url('/fonts/my-brand-sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'My Brand Sans', sans-serif;
}

h1, h2 {
  font-family: 'My Brand Sans', serif;
}

Jednostavno rečeno: font-family u prvom bloku je ime koje sam izmisliš. src je mjesto datoteke, a drugi redak je rezerva u .ttf za starije preglednike. font-display: swap prikazuje tvoj tekst rezervnim fontom dok pravi ne stigne, pa posjetitelji nikad ne gledaju prazan prostor. U pravilima pri dnu riječ nakon zareza (sans-serif) je taj rezervni font, a dobra je praksa uvijek ga dodati.

Taj CSS stavi tamo gdje tvoja stranica drži stilove: u style.css, u WordPressu pod Izgled, Prilagodi, Dodatni CSS ili u okvir za vlastiti CSS svog graditelja stranica. Ako ti je datoteka u drugoj mapi, promijeni putanju unutar url().

Prečac: neka FontMee napiše kod

Vrati se u FontMee i pritisni Kopiraj CSS. Za font koji si učitao FontMee napiše tvoja pravila i doda komentar s retkom @font-face od kojeg možeš krenuti. Promijeni ime datoteke i nastavak ako se razlikuju, na primjer u .ttf. Želiš sve gotovo? Pritisni Preuzmi ZIP za vlastiti hosting. Dobiješ mapu s datotekom fonta u fonts, fonts.css s blokom @font-face, fontmee.css s tvojim pravilima i kratki README. Učitaj mapu, poveži dva stylesheeta i gotovo.

Četiri provjere prije objave

• Provjeri licencu. Datoteka fonta na tvom računalu nije automatski slobodna za stavljanje na web stranicu. Mnoge licence pokrivaju samo uporabu na računalu i imaju zasebnu web licencu. FontMee te podsjeti porukom „tvoja vlastita datoteka: provjeri licencu prije objave“. Ako nisi siguran, pitaj gdje si font nabavio.
• Provjeri svoja slova. U okvir za primjer upiši riječi s posebnim znakovima (č, ć, ž, š, đ). Font može izgledati savršeno, a ipak nemati neka slova, i tada se ta slova pojave u rezervnom fontu.
• Zadrži rezervni font. Svaki font-family završi s serif ili sans-serif, da tekst i dok se font učitava dobro izgleda.
• Neka bude lagano. Jedna ili dvije datoteke fonta sasvim su dovoljne. Svaka dodatna datoteka stranicu malo otežava, pa kad možeš odaberi .woff2.

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.

Nabavi 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