css veza fontova ttf. Postavite fontove u css

Fontovi igraju veliku ulogu u dizajnu web stranice. Isti tekst napisan različitim fontovima može proizvesti suprotne utiske na osobu.

Uvjerite se sami:

Neki fontovi izgledaju uvjerljivije, drugi intrigantnije.

Ali kako spojiti bilo koje fontove na stranicu i primijeniti ih gdje god želite?

U ovom članku I Pokazat ću vam 3 načina, s kojim možete povezati bilo koje, najrazličitije i nestandardne fontove na svoju web stranicu. I nije bitno koji CMS koristite: WordPress, Joomla, Drupal ili Open Cart.

Vidjet ćete da nema ništa komplicirano u povezivanju fontova s web-mjestom.

Naučićeš:

Metoda broj 1. Brzo povezivanje fontova na WordPress stranicu (teškoća: ⭐ ⭐ ⭐)

Ako je na vašoj web lokaciji instalirana premium tema, možete povezati fontove za 2 minute.

Na primjer:

Želite promijeniti font naslova vaših članaka. Za ovo:

1. U administrativnom panelu idite na odjeljak Opcije teme. Ovisno o vašem šablonu, ovaj odjeljak se može zvati malo drugačije, ali značenje je uvijek isto - "Postavke teme".

2. Idite na odjeljak Tipografija.

3. Odaberite element čiji font želite promijeniti (naslove, pasuse):

Ako vaša web lokacija radi na drugom motoru ili vaša tema ne pruža takve postavke, idite na sljedeću metodu.

Metoda broj 2. Iskoristite snagu Google fontova
(teškoća: ⭐ ⭐ ⭐ ⭐)

Jeste li ikada čuli za Google fontove? Ukratko, ovo je usluga s kojom možete povezati više od 700 fontova na svoju stranicu.

Korak 1. Idite na službenu web stranicu usluge.

Korak 2. Pronađite fontove koji vam odgovaraju u Google kolekciji fontova. U desnom meniju možete suziti krug postavljanjem jezika, stila i popularnosti fonta:

Da bi usluga prikazala fontove s podrškom za ruski jezik, odaberite ćirilicu u stavci Jezici.

Korak 3 Recimo da vam se sviđa Roboto font. Kliknite na ikonu "+":

Možete dodati bilo koje fontove klikom na znak "+".

Korak 4. Nakon toga, potrebno je proširiti korpu sa odabranim fontovima:

Odlaskom na karticu Prilagodi, možete odabrati stilove i jezike. Što se tiče stilova, savjetujem vam da odaberete standardni set - normalan (400), kurziv (400 kurziv), podebljan (700) i italic-bold (podebljan 700 kurziv):

Ali ako želite samo podebljano (za naslove), odaberite samo to.

Zapamtite, što više stilova odaberete, veća će biti veličina učitane datoteke.

Kako ne biste usporili brzinu učitavanja stranice, odaberite što je moguće manje stilova fonta.

Korak 5. Vratite se na odjeljak Embed i odaberite karticu @IMPORT. Zatim kopirajte redak koda koji sadrži "@import" i zalijepite ga u prvi red CSS datoteke vaše web stranice:

Ako imate WordPress stranicu, CSS datoteka se najvjerovatnije nalazi ovdje: wp_content/themes/"yourtheme"/css/... U CSS folderu će se najvjerovatnije nalaziti fajl Fonts, u koji trebate prenijeti embed kod sa Googlea:

Nije bitno na kom CMS-u radi vaša stranica, samo zalijepite kod i sve će biti 👌

Pošto se prvo moraju učitati fontovi, tek onda sve ostalo - postavite kod za povezivanje fontova na sam početak CSS datoteke.

Možete definirati font za određene elemente stranice u istoj CSS datoteci.

Na primjer:

Da dam Roboto font svim paragrafima, napisat ću sljedeće: p ( font-family: Roboto;)

Metoda broj 3. Prilagođena veza fonta pomoću CSS-a (teškoća: ⭐ ⭐ ⭐ ⭐ ⭐)

Ako ste dovoljno vješti, najbolje je da sami uključite fontove putem CSS-a. U tom slučaju, fontovi će se nalaziti na vašem serveru u posebnoj mapi. Ali prvo ih morate negdje nabaviti.

Gdje nabaviti web fontove za stranicu

Jeste li znali da morate kupiti posebnu licencu za korištenje web fontova?

Povežite fontove besplatnom licencom. Najlakši način da ih pronađete je pomoću usluge Fontsquirrel, što ćemo i učiniti.

Korak 1. Idite na službenu web stranicu usluge

Korak 2. U desnom meniju, u odeljku Jezici, izaberite ćirilicu.

Korak 3. Pronađite odgovarajući font. Obratite pažnju na broj fontova.

Na primjer, ako postoje 4 stila, 4 stila će biti napisano:

Označavanje stilova fonta - normalni (400/običan), kurziv (kurziv), podebljan (700/bold), podebljan kurziv (700 kurziv).

Korak 5. Kliknite na naziv fonta i idite na stranicu postavki.

Korak 6. Idite na odjeljak Webfont Kit. Odaberite sve formate fontova i kliknite na Preuzmi @FONT-FACE KIT. Ako su dostupna samo 1-2 formata, nije strašno.

Da biste uključili fontove, koristite @Font-face

Putem direktive @font-face, možete uključiti jedan ili više fontova na svoju web stranicu. Ali ova metoda ima svoje prednosti i nedostatke.

Pros:

Putem CSS-a možete uključiti fontove bilo kojeg formata: ttf, otf, woff, svg.
Datoteke fontova će se nalaziti na vašem serveru - nećete ovisiti o uslugama trećih strana.

minusi:

Za ispravnu vezu fonta za svaki stil, potrebno je napisati poseban kod.
Bez poznavanja CSS-a, lako se zbuniti.

Možete samo kopirati moj gotov kod i gdje trebate staviti svoje vrijednosti.

Korak 1. Prenesite preuzete datoteke fontova na svoju stranicu. Ovo se može učiniti preko vašeg hosting kontrolnog panela ili putem FTP-a.

Predlažem kreiranje foldera fontova u istom direktoriju kao i vaša CSS datoteka. Premjestite sve datoteke fontova u ovaj folder.

Korak 2. Napišite sljedeći unos na samom početku CSS datoteke:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") format("eot"),
url("../fonts/WebFont.woff") format("woff"),
url("../fonts/WebFont.ttf") format("truetype"),
url("../fonts/WebFont.svg#webfont") format("svg");
font-weight: normalan
stil fonta: normalan
}

Gdje je MyWebFont naziv fonta, a vrijednost svojstva src (podaci u zagradama u navodnicima) je njihova lokacija (relativne veze). Svaki stil moramo specificirati posebno.

Pošto prvo uključujemo normalan font, postavljamo svojstva font-weight i font-style na normalna.

Korak 3. Prilikom povezivanja kurzivnog stila napišite sljedeće:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic.woff") format("woff"),
url("../fonts/WebFont-Italic.ttf") format("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") format("svg");
font-weight: normalan
stil fonta: kurziv;
}

Gdje je sve isto, samo smo svojstvu stila fonta dali vrijednost kurzivom.

Korak 4. Da biste omogućili podebljani stil, dodajte sljedeći kod:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Bold.woff") format("woff"),
url("../fonts/WebFont-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
font-weight: bold;
stil fonta: normalan
}

Gdje smo svojstvo font-weight postavili na podebljano.

Obavezno navedite ispravnu lokaciju za datoteke fontova za svaki stil.

Korak 5. Da biste omogućili podebljani kurziv, napišite sljedeće:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic-Bold.woff") format("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
font-weight: bold;
stil fonta: kurziv;
}

Pa, to je to :) Upravo ste dodali 4 stila fonta na svoju stranicu.

Ali postoji jedna napomena - ova veza fontova neće biti ispravno prikazana u pretraživaču Internet Explorer 8. Utjeha je što ih je ostalo jako malo.

Kako povezati fontove za web stranice na različitim CMS-ima

Nije važno na kojem je motoru vaša stranica (WordPress, Joomla, Drupal, Opencart) - ako imate pristup CSS datoteci, možete povezati fontove ili preko Google Fontova ili tako što ćete ih postaviti na vaš server preko Fontsquirrel-a.

OK, sve je gotovo. Ako mislite da bi ovaj članak mogao biti koristan drugim webmasterima, podijelite ga na društvenim mrežama.

Kao i:

Pretplatite se na moj bilten kako ne biste propustili korisne i zanimljive objave na blogu.

Mnogi dizajneri koji kreiraju ozbiljne i zanimljive izglede imaju na raspolaganju mnoštvo jedinstvenih i lijepih fontova. Zahvaljujući takvim fontovima, dizajn dobija svoj polet i ekskluzivnost. Ali nestandardni fontovi će biti prikazani samo na računaru na kojem su već instalirani, stoga, da bi ispravno radio s njima, dizajner vam mora dati sve fontove koje koristi u svom izgledu. Jer kada postavljate raspored, moraćete da instalirate ove fontove na svom računaru. Ali korisnik vaše stranice neće preuzeti sve fontove za sebe i neće ih instalirati na svoj računar, tako da morate natjerati pretraživač da sam povuče potrebne fontove. Ovdje će pravilo pomoći, još uvijek postoje opcije za korištenje Cufona ili preuzimanje fontova sa Google Webfonts ili Fontsquirrel, ali Google Webfonts i Fontsquirrel možda neće trebati font, pa razmislite o najboljoj opciji - povezivanju jedinstvenih fontova pomoću @font-face.

Najlakši način da uključite font je da ga napišete u listu stilova:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( font-family: "PF Din CompPro", Arial, sans-serif ; )

Ovdje je 'PF Din CompPro' naziv fonta, a zatim možete odrediti ovaj font za potrebne elemente stranice, a fonts/pfdintextcomppro-medium-webfont.ttf je putanja do vašeg fonta, koji se nalazi u folderu fontova, to je važno je da u nazivu nije bilo razmaka u datoteci fonta, bolje ih zamijeniti crticama.

Ovo je najlakši način, ali jednostavno ne radi u svim pretraživačima i to je veliki problem.

Svaki pretraživač podržava sopstvene formate fontova:
pravi tip Fontovi za Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fontove za Internet Explorer 4+
WOFF fontovi za Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG Fontovi za iPad i iPhone

Stoga ćete morati napraviti još nekoliko istih fontova od jednog od vaših fontova u .ttf formatu, samo u drugom formatu. Ovdje je koristan generator fontova na fontsquirrel.com. Na ovoj stranici učitajte svoj font, odaberite Optimalne postavke, potvrdite okvir za potvrdu legalnosti preuzetog fonta (neki fontovi koštaju puno novca i morate imati dozvolu da ih koristite), a zatim kliknite na dugme "Preuzmi svoj komplet" i dobićete potrebnu arhivu sa svim formatima vašeg fonta.

Preuzmite sve formate vaših fontova iz arhive, u teoriji ovo su 4 fajla sa ekstenzijama .eot, .svg, .ttf i .woff, kopirajte ove fajlove u fasciklu fontova na vašoj web stranici, datoteka stylesheet.css će takođe biti u arhivi - u njoj će već biti napisana sva pravila za povezivanje fontova, možete ih sigurno kopirati u svoj stilski list, samo ne zaboravite navesti svoje staze do datoteka fontova, na primjer, do mape fontova. Primjer onoga što se dogodilo na jednoj od mojih stranica:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") format("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); font-weight: normal; font-style: normal; ) body( font-family: "PF Din CompPro", Arial, Tahoma, Verdana, sans-serif; )

Sa ovim postavkama, fontovi se prikazuju u svim pretraživačima, uključujući i omiljeni IE-7-8-9.

Ako koristite nestandardne fontove za ćirilicu, odnosno za ruske znakove, a font je pogrešno prikazan na sajtu, onda može pomoći generisanje fonta sa naprednim postavkama, na stranici http://www.fontsquirrel.com/tools /webfont-generator preuzmite svoj font i odaberite "Expert" postavke. Ima dosta podešavanja, ne znam sve, ali pažljivo pročitajte i izaberite one koje su vam potrebne, a da podržite ćirilicu izaberite u bloku Podpostavke: odeljak Prilagođene podpostavke ... i potvrdite izbor u polju za potvrdu Ćirilica i takođe označite jezike i formate koji su vam potrebni.

Evo primjera onoga što sam dobio:

Šta posjetitelj stranice zapravo vidi kada koristi nestandardni web font u ovoj fazi razvoja pretraživača?

Mnogi pate prilikom kreiranja stranice. U mnogim slučajevima, stranica zahtijeva korištenje nestandardnog fonta ili hijeroglifa. Skinete prekrasan font i počnete da postavljate stranicu, ali nemaju svi korisnici takve fontove. Nekima nije neugodno i jednostavno kreiraju grafičku datoteku koristeći font koji im je potreban, ali dodatna grafika ne stane uvijek na stranicu i mnogi ih ionako imaju dovoljno. Ali postoji jedan prikladan izlaz! Ovaj izlaz je korištenje CSS tehnologije (Cascading Style Sheets) ili jednostavno "Cascading Style Sheets". Obično je CSS uključen u samu kreiranu datoteku, stranicu, ali možete kreirati CSS datoteku (.css) zasebno i povezati je dodavanjem između oznake ovako:

A uz pomoć CSS-a, moramo automatski preuzeti i instalirati datoteku fonta True Type Font (.ttf), ali će se instalacija dogoditi samo ako računar korisnika ne otkrije traženi font. Prije svega, moramo odrediti lokaciju fonta. Da bismo to učinili, pišemo između oznaka i dakle:

Dakle, možete koristiti bilo koje fontove na svojoj web stranici. Ali savjetujem vam da ne budete previše sofisticirani, jer proces preuzimanja i instaliranja fonta također zahtijeva određeno vrijeme. A ako sam vaš font "teži" 500 kb ili više, onda se ne preporučuje da ga koristite u ovom slučaju.

Da budem iskren, lakše je i ispravnije uraditi ovo:

Iako većina pretraživača podržava web fontove, oni od samog početka imaju greške u Operi. Na nekim sistemima uopće ne rade, na onima koji rade, prilikom ponovnog učitavanja stranica mogu, ali i ne moraju raditi:

Stoga ovo ne treba koristiti u ozbiljnim projektima, samo u ličnim blogovima, i to samo za tekst veći od 30px, da se ne vide čuda anti-aliasinga i kerninga.

U isto vrijeme Google pruža - API za povezivanje nestandardnih fontova na više pretraživača.