conexiune font css ttf. Setați fonturile în css

Fonturile joacă un rol important în designul site-urilor web. Același text scris în fonturi diferite poate produce impresii opuse asupra unei persoane.

Convinge-te singur:

Unele fonturi par mai convingătoare, altele mai intrigante.

Dar cum să conectați orice fonturi la site și să le aplicați oriunde doriți?

În acest articol I Vă voi arăta 3 moduri, cu care puteți conecta orice, cele mai diverse și nestandardizate fonturi la site-ul dvs. Și nu contează ce CMS folosești: WordPress, Joomla, Drupal sau Open Cart.

Veți vedea că nu este nimic complicat în conectarea fonturilor la site.

O sa inveti:

Metoda numărul 1. Conectarea rapidă a fonturilor la un site WordPress (dificultate: ⭐ ⭐ ⭐)

Dacă pe site-ul dvs. este instalată o temă premium, puteți conecta fonturi în 2 minute.

De exemplu:

Doriți să schimbați fontul titlurilor articolelor dvs. Pentru asta:

1. În panoul de administrare, accesați secțiunea Opțiuni teme. În funcție de șablonul dvs., această secțiune poate fi numită puțin diferit, dar sensul este întotdeauna același - „setările temei”.

2. Accesați secțiunea Tipografie.

3. Selectați elementul al cărui font doriți să îl schimbați (titluri, paragrafe):

Dacă site-ul dvs. rulează pe un alt motor sau tema dvs. nu oferă astfel de setări, mergeți la următoarea metodă.

Metoda numărul 2. Utilizați puterea Fonturilor Google
(dificultate: ⭐ ⭐ ⭐ ⭐)

Ați auzit vreodată de Google Fonts? Pe scurt, acesta este un serviciu prin care poți conecta peste 700 de fonturi la site-ul tău.

Pasul 1. Accesați site-ul web oficial al serviciului.

Pasul 2. Găsiți fonturile care vi se potrivesc în colecția de fonturi Google. În meniul din dreapta, puteți restrânge cercul setând limba, stilul și popularitatea fontului:

Pentru ca serviciul să afișeze fonturi cu suport pentru limba rusă, selectați Chirilic în elementul Limbi.

Pasul 3 Să presupunem că vă place fontul Roboto. Faceți clic pe pictograma „+”:

Puteți adăuga orice font făcând clic pe semnul „+”.

Pasul 4. După aceea, trebuie să extindeți coșul cu fonturile selectate:

Accesând fila Personalizare, puteți alege stiluri și limbi. În ceea ce privește stilurile, vă sfătuiesc să alegeți un set standard - normal (400), italic (400 italic), bold (700) și italic-bold (bold 700 italic):

Dar dacă vrei doar bold (pentru titluri), alege doar atât.

Rețineți, cu cât alegeți mai multe stiluri, cu atât dimensiunea fișierului încărcat va fi mai mare.

Pentru a nu încetini viteza de încărcare a site-ului, alegeți cât mai puține stiluri de font.

Pasul 5. Reveniți la secțiunea Încorporare și selectați fila @IMPORT. Apoi, copiați linia de cod care conține „@import” și inserați-o pe prima linie a fișierului CSS al site-ului dvs.:

Dacă aveți un site WordPress, fișierul CSS se află cel mai probabil aici: wp_content/themes/„yourtheme”/css/...În folderul CSS, cel mai probabil va exista un fișier Fonturi, unde trebuie să transferați codul de încorporare de la Google:

Nu contează pe ce CMS rulează site-ul dvs., doar lipiți codul și totul va fi 👌

Deoarece fonturile trebuie încărcate mai întâi, abia apoi orice altceva - plasați codul de conectare a fonturilor chiar la începutul fișierului CSS.

Puteți defini fontul pentru anumite elemente ale site-ului în același fișier CSS.

De exemplu:

Pentru a da fontul Roboto tuturor paragrafelor, voi scrie următoarele: p ( font-family: Roboto;)

Metoda numărul 3. Conexiune de font personalizat folosind CSS (dificultate: ⭐ ⭐ ⭐ ⭐ ⭐)

Dacă sunteți suficient de priceput, cel mai bun pariu este să includeți singur fonturile prin CSS. În acest caz, fonturile vor fi localizate pe serverul dvs. într-un folder special. Dar mai întâi trebuie să le duci undeva.

De unde să obțineți fonturi web pentru site

Știați că trebuie să cumpărați o licență separată pentru a utiliza fonturi web?

Conectați fonturi cu o licență gratuită. Cel mai simplu mod de a le găsi este cu serviciul Fontsquirrel, ceea ce vom face.

Pasul 1. Accesați site-ul web oficial al serviciului

Pasul 2. În meniul din dreapta, în secțiunea Limbi, selectați Chirilic.

Pasul 3. Găsiți un font potrivit. Acordați atenție numărului de fonturi.

De exemplu, dacă există 4 stiluri, se vor scrie 4 stiluri:

Desemnarea stilurilor de font - normal (400/regular), italic (italic), bold (700/bold), bold italic (700 italic).

Pasul 5. Faceți clic pe numele fontului și accesați pagina de setări.

Pasul 6. Accesați secțiunea Kit Webfont. Selectați toate formatele de font și faceți clic pe Descărcați @FONT-FACE KIT. Dacă sunt disponibile doar 1-2 formate, nu este înfricoșător.

Pentru a include fonturi, utilizați @Font-face

Prin directiva @font-face, puteți include unul sau mai multe fonturi pe site-ul dvs. Dar această metodă are avantaje și dezavantaje.

Pro:

Prin CSS, puteți include fonturi de orice format: ttf, otf, woff, svg.
Fișierele cu fonturi vor fi localizate pe serverul dvs. - nu veți depinde de servicii terțe.

Minusuri:

Pentru conectarea corectă a fontului pentru fiecare stil, trebuie să scrieți un cod separat.
Fără a cunoaște CSS, este ușor să fii confuz.

Puteți doar să copiați codul meu terminat și unde trebuie să vă puneți valorile.

Pasul 1. Transferați fișierele de font descărcate pe site-ul dvs. Acest lucru se poate face prin panoul de control al găzduirii sau prin FTP.

Vă sugerez să creați un folder cu fonturi în același director cu fișierul dvs. CSS. Mutați toate fișierele cu fonturi în acest folder.

Pasul 2. Scrieți următoarea intrare chiar la începutul fișierului CSS:

@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");
greutatea fontului: normal
stil font: normal
}

Unde MyWebFont este numele fontului, iar valoarea proprietății src (datele în paranteze între ghilimele) este locația lor (linkuri relative). Trebuie să specificăm fiecare stil separat.

Deoarece includem mai întâi un font normal, setăm proprietățile font-weight și font-style la normal.

Pasul 3. Când conectați stilul italic, scrieți următoarele:

@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");
greutatea fontului: normal
font-style: italic;
}

Acolo unde totul este la fel, numai că am dat proprietății font-style valoarea italic.

Pasul 4. Pentru a activa stilul aldine, adăugați următorul cod:

@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");
greutatea fontului: bold;
stil font: normal
}

Unde am setat proprietatea font-weight la bold.

Asigurați-vă că specificați locația corectă pentru fișierele de font pentru fiecare stil.

Pasul 5. Pentru a activa tipul aldine italic, scrieți următoarele:

@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");
greutatea fontului: bold;
font-style: italic;
}

Ei bine, asta este :) Tocmai ați adăugat 4 stiluri de font pe site-ul dvs.

Dar există o notă - această conexiune de fonturi nu va fi afișată corect în browserul Internet Explorer 8. Consolarea este că au mai rămas foarte puține dintre ele.

Cum să conectați fonturile pentru site-uri pe diferite CMS

Nu contează pe ce motor se află site-ul tău (WordPress, Joomla, Drupal, Opencart) - dacă ai acces la fișierul CSS, poți conecta fonturile fie prin Google Fonts, fie încărcându-le pe serverul tău prin Fontsquirrel.

OK, totul sa terminat acum. Dacă credeți că acest articol poate fi util altor webmasteri, vă rugăm să îl distribuiți pe rețelele de socializare.

Precum și:

Abonați-vă la newsletter-ul meu pentru a nu rata postări utile și interesante pe blog.

Mulți designeri care creează machete serioase și interesante au disponibile o mulțime de fonturi unice și frumoase. Datorită unor astfel de fonturi, designul capătă entuziasm și exclusivitate. Dar fonturile non-standard vor fi afișate doar pe computerul pe care sunt deja instalate, prin urmare, pentru a funcționa corect cu acestea, designerul trebuie să vă ofere toate fonturile pe care le folosește în aspectul său. Pentru că atunci când așezați aspectul, va trebui să instalați aceste fonturi pe computer. Dar utilizatorul site-ului dvs. nu va descărca toate fonturile pentru el însuși și nu le va instala pe computerul său, așa că trebuie să faceți browserul să scoată singur fonturile necesare. Regula va ajuta aici, există încă opțiuni pentru a utiliza Cufon sau a descărca fonturi din Google Webfonts sau Fontsquirrel, dar Google Webfonts și Fontsquirrel ar putea să nu aibă nevoie de un font, așa că luați în considerare cea mai bună opțiune - conectarea fonturilor unice folosind @font-face.

Cel mai simplu mod de a include un font este să îl scrieți într-o foaie de stil:

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

Aici „PF Din CompPro” este numele fontului și apoi puteți specifica acest font pentru elementele necesare site-ului, iar fonts/pfdintextcomppro-medium-webfont.ttf este calea către fontul dvs., care se află în folderul fonturi, este important ca in nume nu existau spatii in fisierul fontului, mai bine inlocuiti-le cu liniute.

Acesta este cel mai simplu mod, dar pur și simplu nu funcționează în toate browserele și aceasta este o mare problemă.

Fiecare browser acceptă propriile formate de font:
tip adevărat Fonturi pentru Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonturi pentru Internet Explorer 4+
WOFF fonturi pentru Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG Fonturi pentru iPad și iPhone

Prin urmare, va trebui să creați mai multe fonturi identice dintr-unul dintre fonturile dvs. în format .ttf, doar într-un format diferit. Aici este util generatorul de fonturi de la fontsquirrel.com. În această pagină, încărcați fontul, selectați Setările optime, bifați caseta de selectare care confirmă legalitatea fontului descărcat (unele fonturi costă mulți bani și trebuie să aveți permisiunea de a le folosi), apoi faceți clic pe butonul „Descărcați kitul” și veți primi arhiva necesară cu toate formatele fontului dvs.

Descărcați toate formatele fonturilor dvs. din arhivă, în teorie acestea sunt 4 fișiere cu extensiile .eot, .svg, .ttf și .woff, copiați aceste fișiere în folderul fonturi de pe site-ul dvs., fișierul stylesheet.css va fi și el fiți în arhivă - în ea vor fi deja scrise toate regulile pentru conectarea fonturilor, le puteți copia în siguranță în foaia de stil, dar nu uitați să specificați căile către fișierele cu fonturi, de exemplu, în folderul fonturi. Un exemplu de ceea ce s-a întâmplat pe unul dintre site-urile mele:

@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; )

Cu aceste setări, fonturile sunt afișate în toate browserele, inclusiv în iubitul IE-7-8-9.

Dacă utilizați fonturi non-standard pentru chirilice, adică pentru caractere rusești, iar fontul este afișat incorect pe site, atunci generarea unui font cu setări avansate poate ajuta, pe pagina http://www.fontsquirrel.com/tools /webfont-generator descărcați fontul și selectați setările „Expert”. Există o mulțime de setări, nu știu totul, dar citiți cu atenție și selectați-le pe cele de care aveți nevoie, iar pentru a suporta chirilic, selectați în blocul Subsetting: secțiunea Subsetting personalizat ... și bifați caseta de selectare Chirilic și, de asemenea marcați limbile și formatele de care aveți nevoie.

Iată un exemplu de ceea ce am primit:

Ce vede de fapt un vizitator al site-ului când folosește un font web nestandard în această etapă a dezvoltării browserului?

Mulți suferă când creează un site. În multe cazuri, site-ul necesită utilizarea unui font sau hieroglif non-standard. Descărcați un font frumos și începeți să aranjați pagina, dar nu toți utilizatorii au astfel de fonturi. Unii nu sunt jenați și creează pur și simplu un fișier grafic folosind fontul de care au nevoie, dar elementele grafice suplimentare nu se potrivesc întotdeauna paginii și mulți au oricum destule. Dar există o cale de ieșire potrivită! Această ieșire este să folosiți tehnologia CSS (Cascading Style Sheets) sau pur și simplu „Cascading Style Sheets”. De obicei, CSS este inclus în fișierul creat în sine, în pagină, dar puteți crea un fișier CSS (.css) separat și îl puteți conecta prin umplere între etichete prin urmare:

Și cu ajutorul CSS, trebuie să descarcăm și să instalăm automat fișierul font True Type Font (.ttf), dar instalarea va avea loc numai dacă computerul utilizatorului nu detectează fontul necesar. În primul rând, trebuie să specificăm locația fontului. Pentru a face acest lucru, scriem între etichete și Asa de:

Astfel, puteți utiliza orice fonturi de pe site-ul dvs. Dar vă sfătuiesc să nu fiți prea sofisticați, deoarece procesul de descărcare și instalare a unui font necesită și o anumită perioadă de timp. Și dacă fontul în sine „cântărește” 500 kb sau mai mult, atunci nu este recomandat să îl utilizați în acest caz.

Sincer să fiu, este mai ușor și mai corect să faci asta:

Deși fonturile web sunt acceptate de majoritatea browserelor, acestea au probleme în Opera încă de la început. Pe unele sisteme nu funcționează deloc, pe cele care funcționează, la reîncărcarea paginilor, pot funcționa sau nu:

Prin urmare, acest lucru nu trebuie folosit în proiecte serioase, doar în blogurile personale și doar pentru text mai mare de 30px, pentru a nu vedea minunile anti-aliasing și kerning.

În același timp, Google oferă - API pentru conexiunea între browsere a fonturilor non-standard.