Cum se adaugă Fonturile Google Web Fonts în Tema WordPress. Cum se conectează fontul de la Google Fonturi? Conectarea fonturilor de la Google Fonts CSS

Pentru a afla despre tot ceea ce tu - nu este ușor, dar foarte interesant. Dacă aveți cel puțin o idee superficială despre modul în care funcționează site-ul, atunci este mai bine pentru ei să vă implementeze singur proiectul. În același timp, nu veți salva doar o grămadă de bani, dar, de asemenea, să aflați o mulțime de "chipsuri", secrete etc. Utilizarea fonturilor Google de obicei nu atrage atenția, deși datorită lor un blog poate deveni mai interesant.

Serviciu

De mult timp, un serviciu major de fonturi web a apărut pe Internet. A fost dezvoltat de Google. Utilizatorii l-au putut folosi gratuit. În ciuda faptului că setarea acestui tip nu este considerată Super, există încă astfel de oameni care au făcut greșeli și nu au putut face față serviciului.

Pentru a face acest lucru, a fost proiectat un simplu design. Acum, lucrați cu fonturile Fonturilor Google a devenit mai ușor, iar numărul de vizitatori a crescut. Biblioteca sa extins. Anul trecut a avut loc un nou serviciu, care a adunat foarte mult feedback pozitiv. Acum, oamenii au devenit mai ușor să conectați fonturile pe site-urile lor și să le vizualizeze.

Aspect

Deci, pentru cei care nu au fost niciodată pe site cu vechiul design, trebuie să faceți o imagine generală a schimbărilor. În trecut, serviciul a părut destul de masiv. Oriunde erau cadre groase, butoane atrăgătoare de albastru, grafica nu a fost cea mai mare permisiune. Toate acestea au influențat semnificativ vizitatorul.

Acum, dezvoltatorii s-au concentrat pe designul materialului. Toate caracteristicile sofisticate dobândite. Aspect El a devenit "mai ușor". Animație fină, interactivitatea a devenit vizibilă. Nimic altceva nu distrage atenția de la selectarea fontului Google Fonts dorit.

A existat o adaptare convenabilă a resurselor sub dispozitive mobile. Desigur, o astfel de schimbare nu este mult vizibilă față de contextul inovațiilor, dar luând în considerare bug-urile versiunea anterioara Va fi pentru utilizatorii avid ai "Manna Ceresc".

Oportunitate

Servicii frecvent similare sunt folosite de designeri. În ciuda experienței și profesionalismului, ei lucrează și cu vizualizare. Redesign a prezentat caracteristici mai similare care vă vor permite să combinați în prealabil ceea ce va fi necesar să implementați mai târziu în proiectul dvs.

Prin urmare, problema cu modul în care un font este combinat cu o culoare diferită și a treia fundal, a dispărut. Compania a adăugat mai multe instrumente și o paletă cu tonuri universale, care ar permite experimentarea și a afla cum unul sau altul vor arăta într-o anumită culoare.

Selectat

Serviciul Google Fonts Fonts oferă utilizatorilor utilizând opțiunile selectate. Într-o filă specială, un set de stiluri pe care dezvoltatorul le recomandă utilizarea este colectată. Aceste colecții sunt alocate printre celelalte. Acestea sunt dezvoltate de experți de la agențiile Google și de la terți. Cele mai multe dintre ele au un anumit stil și filosofie specială.

Vedere

Una dintre schimbările importante afectate direct alegerea fonturilor. Se înțelege că mai devreme utilizatorul a văzut un desen cu butoane suplimentare și un albastru mare, care a adăugat un font la colecție. În general, această opțiune arăta bine, dar nu întotdeauna caseta a fost suficientă bună permisiune Imagini cu stil și, prin urmare, determinați cu siguranță, cum va arăta fontul, a fost dificil.

Au existat întrebări și aceste butoane suplimentare care au fost cunoscute la prima vedere. A fost necesar să le aduceți sau să le utilizați. Acum a devenit mai mult sau mai puțin clar. Există caracteristici suplimentare:

Selectați o propunere specifică, paragraf sau propriul element de text.
Experimente de saturație font.
Setarea rapidă a dimensiunilor utilizând un cursor.

Apropo, schimbarea dimensiunii fonturilor Google a devenit adaptabilă, ca un exemplu schimbat, și nu totul pe pagină. ÎN versiune veche Utilizatorii ar putea fi transferați de la o margine a paginii la alta, iar în noul dvs. rămâne doar pe exemplul care este reglementat.

Conexiune

Dacă sunteți gata să utilizați acest serviciu, puteți încerca să conectați fonturile la resursa dvs. Procesul de obținere a legăturilor este universal. Problemele pot apărea în funcție de sistemul dvs. CMS. Fiecare folosește propriile moduri. Prin urmare, pentru diferite proiecte va trebui să selecteze opțiunile individuale.

Ne vom uita la modul de a obține un link pentru a conecta Fonturile Google. Trebuie să mergeți la site-ul oficial al Fonturilor Google. Acolo veți vedea catalogul stilurilor și alegeți cel care se potrivește cel mai bine. Pentru a face acest lucru, alături de el, faceți clic pe "Plusik". După ce fontul va fi adăugat la blocul special din partea de jos a paginii.

Faceți clic pe această unitate și apoi configurați-l. Aici puteți alege inscripția și alfabetul necesar. Dacă aveți nevoie de Google Fonts Cyrilic, apoi marcați șirul chirilic. După ce link-ul va fi format. Acesta poate fi găsit în aceeași fereastră din fila Embed. Este suficient doar să o copiați sau să utilizați codul complet HTML.

De obicei, în setările site-ului există un font și culori. Există opțiuni standard și puteți adăuga extins. Acestea au o opțiune separată pentru Fonturile Google. Dacă trebuie să descărcați fonturile prin pluginul Suprem WebFonts.

Opțiuni populare

Este dificil, desigur, de a judeca ce stiluri sunt mai bune, în special pentru subiecte diferite ale site-ului. Când creați site-ul dvs., amintiți-vă că nu ar trebui să vă placă, ci publicul dvs. Prin urmare, este mai bine să vă uitați la site-urile concurenților.

De obicei, pentru resursele comerciale nimeni nu deranjează despre stiluri. La urma urmei, dacă vedeți fontul în Google Chrome. În magazinul online, este puțin probabil să o acordați atenție. Dar dacă aveți un blog, atunci, cel mai probabil, ceva ce vă place și ceva, dimpotrivă, se va supăra.

Fonturile Google a pregătit multe colecții în care există stiluri populare. De exemplu, homar dragostea de a utiliza pentru blocuri individuale din text. Este dificil să se citească dacă întregul articol este scris într-o astfel de caractere italice. Dar arată inserții bune și citate.

Scriptul rău este, de asemenea, o opțiune pentru bloguri. Cursiv Tip greu pentru a citi margini mari de text, dar puteți aloca ideea principală. Stilul imită scrierile de mână scrise de mână. Jura Normal 400 este o opțiune interesantă pentru chirilică. Autorul susține că este Eurostil de la familia SIP SENS. Arată foarte bine și are mai multe variante.

WebFonts este tehnologia utilizării fonturilor terțe pe pagina sa web. Un exemplu:

Dacă porniți de la sursă, eticheta fontului a fost introdusă în 1995 și deja în 1996 a fost scrisă o definiție software către CSS. Pornind de la versiunea CSS 2.0, sinteza fontului a fost introdusă și sinteza browserelor, dar totuși, atunci este încă populară și acum vechea și irelevantă, adică nu au avut suport pentru încărcarea fontului, care a împiedicat dezvoltarea rapidă a fonturilor pe site-ul său web.

ÎN internet modern Fonturile web sunt un lucru pe termen lung. Pe site-uri diferite, putem folosi tot felul de fonturi, care, la rândul său, nu sunt incluse în furnizarea unui anumit sistem de operare, dar există un efect secundar nedorit, pe care îl vom vorbi astăzi și vom vorbi.

Formate de fișiere

Pentru a conecta fonturile, se folosește introducerea software-ului în CSS, așa-numitul @ -evilo. Deci, B. formă simplă @ Font-fata este o astfel de declarație. Se pare așa:

/ * Declarați fontul * / @ Font-Face (Font-Face: "Numele fontului"; SRC: URL ("PATH / UP / IT");) / * Aplicați * / P (Font-Face: "Nume font" , Arial;)
TTF sau OTF - fișierul de font obișnuit, dar încărcat de pe server în timpul vizualizării site-ului;

Woff este o arhivă a sursei OTF sau TTF neprotejată, poate cel mai important format pe care majoritatea browserelor de browsere, și fișierele din Woff, de obicei, de 2-2,5 ori mai ușor decât originalul;

Eot - a introdus arhiva TT OpenType, cu mecanisme de protecție, necesare pentru a sprijini browserele vechi Internet Explorer. (începând cu IE8, cu excepția curbelor TrueType, acceptate și PostScript);

SVG - pentru a susține browserul Safari.

Pregătit pentru implementare (@ font-fata) la site-ul Fonturile de astăzi trebuie să fie imediat în mai multe formate. Ai realizat că există unele discrepanțe, precum și nu există un fel sisteme de operare. Formatele de fonturi sunt destul de multe, dar betonul va funcționa numai într-un anumit browser. În ceea ce privește cele mai multe formate, de ce este necesar să le specificați atât de mult atunci când sunt conectate, atunci sunt necesare pentru suportul încrucișat al site-ului.

@ Font-fata (Font-Family: "ashift_name"; SRC: URL ("file_name_shift.eot"); SRC: format URL ("File_File_Shift.eot? #Fix") ("embedded-opentype"), adresa URL ("fișier Numele_Shift font -style: normal;)
Dacă doriți să utilizați codul criptat în loc de fișier, în acest caz, Base64 vine la ajutor, care funcționează pe același principiu și cu imagini, totuși, pentru vechiul IE BASE64 nu este procesat.

@ Font-fata (Font-Family: "ashift_name"; SRC: URL ("file_name_shift.eot");) @ Font-Face (Font-Family: "ashift_name"; Src: URL (date: font / woff; charset \u003d UTF-8; Base64, Date), URL (date: font / TrueType, CHARSET \u003d UTF-8; BASE64, DATA) ("TrueType"), adresa URL ("file_name_svg #file_shot_name") ( "SVG"); Greutate font: normal; Font-stil: normal;)

OpenType încorporată?

După cum ați putea observa, plug-in-urile pentru IE au o linie cu un astfel de parametru:

SRC: format URL ("FILE_FILE_SET? #FIX") ("Embedded-OpenType")
În versiunea clasică, a trebuit să specificăm cu dvs. acest mod:

SRC: format URL ("File_Shift.eot") ("Embedded-OpenType")
Dar când adăugați un simbol "?" După formatul fontului, specificăm cu forța browser-ul să nu citească următorul format de indicare ("OpenType Embedded"). Internet Explorer acceptă încorporarea fonturilor prin așa-numitul Standard OpenType încorporat, începând cu versiunea IE 4.0. Utilizează o metodă de gestionare a drepturilor digitale pentru a preveni fonturile care se aplică licenței.

Ce se întâmplă dacă fontul nu este acceptat în browser?

Cu mult timp în urmă, drumurile de bypass au fost deja inventate, așa-numitele "cârje" pentru a afișa un font. Există cazuri în care fontul a fost proiectat numai în format SVG sau numai în format TTF.

1. În vremurile vechi, dezvoltatorii au conectat imaginea, care la rândul său a fost textul înscris editor vizual. Cu toate acestea, acum este considerat un ton rău, pentru că este prevăzut sprijinul (trebuie să deschideți din nou editorul pentru a schimba textul imaginii), respectiv, utilizatorul nu poate copia textul din imagine.

2. De asemenea, comună a fost utilizarea de soluții flash.

3. O altă soluție este folosind JavaScriptPentru a înlocui textul cu VML (pentru Internet Explorer) sau SVG (pentru toate celelalte browsere).

Ce probleme pot apărea în continuare?

Browserul va încerca să sincronizeze încărcarea fontului, va încerca să ascundă textul, adică să fie invizibil până când fontul a fost încărcat. Acest efect se numește FOIT, efectul "blițului alb".

Efect flash

Foit efect în browsere precum Safari, Chrome, Opera, Firefox tinde să ascundă textul în maxim 30 de secunde înainte de a refuza să obțină un font, după care este setat fontul implicit.

Un exemplu de utilizare a fontului:

Cu toate acestea, 2,7 secunde sunt mult timp!

Ce se poate face?

Inițial, abordarea a fost de a permite conversia fișierelor fontului la datele URI, astfel încât acele fonturi să poată fi incluse direct în definițiile familiei Font din fișierul CSS. Prin descărcarea acestui mod asincron al fișierului CSS, puteți garanta că browserul va da imediat text în pagină utilizând fonturi personalizate, iar fonturile noi vor fi utilizate de îndată ce CSS ar fi încărcat.

Cu toate acestea, în orice experiment există un efect secundar.

Inițial, Bram Stein a folosit un font personalizat, dar după ce fontul său a fost încărcat, a avut loc "Flicker", în exemplul de 0,7 al doilea:

Pe scurt, pâlpâirea apare atunci când browserul încearcă să afișeze fontul de la Font-Fally și să îl aplice la HTML. Fontul definit în fața fontului @ al declarației, care nu a fost încă încărcată.

Bram Stein a arătat cum să conectați corect fonturile, a dezvoltat un script, o alternativă la Google pentru o încărcare a fontului asincron, acesta este un script de fontfaceObserver.

Încercând

Analiză

Conexiune standard de la Google

Sincer, folosind mai mult de un font de pe site, puteți încetini în mod specific viteza de încărcare a site-ului, mărind astfel timpul de încărcare total. Google Fonts API vă permite să adăugați rapid un font la site folosind generatorul de fonturi, proiectați rapid site-ul dvs. web. Cu toate acestea, trebuie să vă amintiți efectul lui FOIT. Timpul total de încărcare - 322 ms.

Web Font încărcător de la Google

Web Font încărcător - Biblioteca Javascript pentru lucrări avansate cu API, o bibliotecă care ne oferă mai mult control asupra încărcării fontului decât standardul Google Fonts API. Scriptul ne permite să folosim multe fonturi, încărcarea lor secvențial sau asincron. Spre deosebire de conexiunea standard, textul cu font standard este afișat pe conexiuni slabe, până când fontul este încărcat.
Timpul total de încărcare: 1132 ms

FontfaceObServer.

FontfaceObServer este o bibliotecă JavaScript (5kb), un așa-numit bootter compatibil cu orice serviciu Web Font. Scriptul ne permite să ne notificăm dacă fontul încărcat sau nu, vă permite să urmăriți un eveniment după descărcarea și până la sarcina de fonturi. Timpul total de încărcare: 159 ms

Folosind scriptul.

Google Fonts este una dintre cele mai bune resurse cu fonturile web gratuite, iar Google vă oferă mai multe modalități de a le importa pe site-ul dvs. web. Din păcate, niciunul dintre ele nu include un motor popular WordPress. Aceasta înseamnă că trebuie să utilizați fie plugin-uri, care sunt multe mâini, crescând cu codul.

Vestea bună este că puteți instala orice font de la google Biblioteci Aproape orice subiect al WordPress fără prea multe necazuri. Cât de precis - vă vom învăța astăzi.

Există două opțiuni - Conectați pluginul sau un pic la Pierce cu fișierul funcțiilor.php.

Dar mai întâi aș dori să enumerez avantajele și dezavantajele Fonturilor Google, astfel încât să decideți în cele din urmă să le utilizați în proiectele noastre sau nu.

Fonturile Google Google Google și Bad Google

În ceea ce privește fonturile web, Google este unul opțiuni mai bune În ceea ce privește performanța . Toate datorită designului ușoare și a sistemului de caching. Vizitatorii nu ar trebui să aștepte fonturile Google, dacă au vizitat recent site-ul pe care au fost utilizate. Fonturi populare, cum ar fi SANS Open, vă pot îmbunătăți performanța site-ului prin reducerea timpului de descărcare.

O altă caracteristică este aceea Google vă permite să încărcați aceste fonturi Deci, le puteți folosi în aspectul tău.

Și, în sfârșit platforma este complet gratuită . Pentru a începe să utilizați fonturile, trebuie doar să vă conectați sau să începeți cutie poștală Pe Gmail (și cine nu are poștă astăzi la Gmail?).

De defecte Puteți specifica acest lucru alegerea Google-Fonts este mică Multe dintre ele sunt similare unul cu celălalt. Este necesar să petreceți o mulțime de timp în căutare pentru a găsi un font decent, original. Fonturi pentru chirilice foarte puțin.

În plus, există obișnuiți probleme de siguranță - Trebuie să specificați anumite date personale la instalarea fonturilor de pe Google pe site-ul dvs.

Cum se instalează Fonturile Google utilizând pluginurile WordPress

Dacă sunteți în căutarea pentru pluginuri, primul lucru pe care îl vedeți în rezultatele căutării - plagings WP Google Fonturi și Fonturi Easy Google Google . Acestea sunt într-adevăr cele două pluginuri cele mai bune.

Plugin-urile nu sunt soluția ideală pentru configurați Google- site-uri WordPress Site-uri - nu numai din punctul de vedere al performanței, ci și pentru că pluginurile nu vă permit să alegeți anumite piese de text. Cu toate acestea, dacă dvs. sau clientul dvs. sunteți încrezători că este mai bine să utilizați pluginurile, examinați aceste două opțiuni.

Acest plugin vă permite să vă concentrați asupra elementelor specifice, cum ar fi titlurile H1, paragrafe și citate. De asemenea, primiți o opțiune CSS personalizată pentru a lucra ulterior cu stilurile selectate. Adăugați și configurați fonturile de la Google pe site-ul dvs. WordPress cu acest plugin destul de ușor.

Easy Google Web Fonts justifică numele său și face ca instalarea de fonturi Google să fie super-ușor chiar și pentru începători. Puteți utiliza funcția Live Preview pentru vizualizarea, testarea și optimizarea fonturilor fără a părăsi site-ul web, precum și creați propriile reguli de font fără a scrie o linie de cod.

Modul corect de a instala Fonturile Google în șablonul WordPress

În cele din urmă, ajungem la opțiunea de a deschide funcțiile.php fișier și să lucrăm cu un cod. Înainte de a face acest lucru, trebuie să alegeți un font din biblioteca Google. De exemplu, să încercăm să luăm un foarte popular Deschideți Sans..

Apoi trebuie să alegeți stilul fontului - normal, gras sau italic. Poți să o faci singur :)

După ce alegeți stiluri, Google vă va oferi un cod de fragment. Arata ca aceasta:

În plus, avem stil CSS:

font-Family: "Open Sans", Sans-Seif;

Acum este timpul să deschideți funcțiile. Fișierul Fișier (calea către fișier: WP-Conținut / Teme / YouTheme). La sfârșitul fișierului, adăugați o nouă caracteristică:

funcție load_fonts ()
{
Wp_register_style ("et-googlefonts",
"http://fonts.googleapis.com/css?family\u003dopen+sans :300Italic 400,500,300"); Wp_enqueue_style ("et-googlefonts");
}
Add_ction ("wp_print_styles", "load_fonts");

Cheia acestei caracteristici este comanda "wp_enqueue_style", care provoacă WordPress pentru a apela mesa de stiluri de fonturi din antetul fiecărei pagini. Dacă vă uitați cu atenție, veți vedea, ștergem HREF \u003d și Rel Link \u003d 'Stylesheet' Type'Text / CSS ', de la codul pe care Google ne-a dat Google și va trebui să faceți același lucru dacă doriți să adăugați orice Alte fonturi Google pentru site-ul dvs. pe WordPress.

Tot ce trebuie să faceți acum este să deschideți fișierul CSS principal și să introduceți un stil cu SANS Open. Există reguli normale aici, deci adăugați următorul cod în foaia de stil, salvați și actualizați:

corp.
{
Font: Normal 1EM "Open Sans", Sans-Seif;
Culoare: # 313131;
}

Acest stil va funcționa pe întreg teritoriul site-ului. Pentru fragmentele de text individuale puteți seta un alt stil:

Bold-text
{
Font: Bold 1EM "Deschis Sans", Sans-Seif;
}

După cum puteți vedea, de fapt, totul este foarte simplu. Încercați să verificați rezultatul :)

În ciuda noilor tehnologii web și a întreprinderilor, până la recent am lipsit de cei bogați și frumoasă tipografie web.

Deși avem o selecție destul de largă de căști, am putea folosi doar un anumit set de fonturi adecvate instalate și susținute de majoritatea computerelor - aceste fonturi au fost cunoscute ca - Secure Fonts Web (Fonts Safe Web).

Tipografie web împotriva casei tipărite imprimate

Când creați conținut pe medii tradiționale (ziare, reviste, cărți) în utilizarea tipografiei, numai potențialul creativ vă limitează.

Dar acum, separarea dintre purtătorii tipăriți și virtuali este redusă. Acum @ Font-Face Suport Multe browsere moderne (inclusiv Internet Explorer. De la Version. IE4.0.).

Introducere în Google Font API

Directorul Google Font și Google Font API sunt servicii web gratuite de la Googlecare oferă proprietarilor de site-uri posibilitatea de a utiliza diferite fonturi simple, convenabile și eficiente.

Google Font API. - un nou reprezentant al nișei, care include Tipekit., Tipototheque. si etc.

Deci, să mergem în potențialul neexplorat Google Font API..

Ce este Google Font API?

Ai călătorit foarte mult pe Internet, dar ai văzut fonturi non-standard pe multe site-uri sau bloguri?

Să determinăm fonturi non-standard care nu sunt printre sigure ( Aria, Helvetica., Verdana., Georgia. și Times New Roman.).

Google Font API. - Acesta este un serviciu web care furnizează fonturi deschise de înaltă calitate (Open Source) care pot fi utilizate cu ușurință în designul dvs.

Noi sperăm asta colecția de fonturi Va continua să crească astfel încât să avem o alegere și mai mare a diferitelor căști.

Beneficiile utilizării Google Font API

Dacă încă mai decideți dacă doriți Google Font API., Iată câteva dintre avantajele sale.

Utilizarea textului HTML.

Spre deosebire de utilizarea imaginilor sau înlocuirilor cu Css. Imaginea de fundal, utilizând @ Font-Face, ca soluții pentru o tipografie web mai atractivă, mai favorabil în termeni de plan SEO..

În plus, nu va trebui să modificați conținutul existent - vă actualizați doar Css. Mese.

Disponibilitate

După cum utilizați HTML. Text, nu o imagine sau fundal Css.Acest lucru nu afectează persoanele care utilizează programe pentru citirea pe ecran.

Infrastructură fiabilă și o sarcină redusă pe serverul dvs.

Deoarece descărcarea dvs. @ Font-Face utilizează infrastructură fiabilă GooglePuteți fi sigur că serviciul de fișiere Font va fi rapid și puteți reduce sarcina pe serverul propriu.

Cum se utilizează Google Font API

Nu trebuie să fii un dezvoltator web profesionist de utilizat Google Font API.. Tot ce trebuie să faceți este să adăugați un element de legătură Stylesheet pe pagina dvs., după care puteți începe să utilizați acest font în Css..

Iată un proces generalizat de utilizare Google Font API.:

Pasul 1: Adăugarea unui link către o foaie de stil cu font selectat

Pentru a începe să mergeți la colecția de fonturi GooglePentru a vedea ce fonturi sunt disponibile pentru utilizare. Iată formatul principal pentru includerea unui font specific:

Dacă aveți nevoie de un font pentru o utilizare unică, puteți declara stilul unui rând.

Pasul 3: Aveți întotdeauna o opțiune de rezervă.

Este posibil să nu acordați atenție faptului că în fragmentele de cod anterior am folosit Serif ca un font de rezervă. Acest lucru se face pentru a evita rezultatele neașteptate. Aceasta înseamnă că, dacă cu serverele Google Ceva este greșit, browserul poate folosi fontul său standard Serif.. Fă-o cu un obicei când utilizați atributul Font-Face, nu contează dacă utilizați @ Font-Face sau nu, specificați întotdeauna fonturi suplimentare - această tehnologie se numește seturi de fonturi.

Exemplu de utilizare a Google Font API

Copiați și lipiți următorul cod bloc în dvs. HTML. Document, salvați-l, apoi deschideți în browserul dvs.

Vă sugerăm să vă testați HTML. Document în diferite browsere, astfel încât să puteți vedea diferențe trans-browser (sau absența acestora).

Puteți experimenta cu diferite fonturi, dar de exemplu, am folosit setul cu cască homar.

< html >

< head >

< link rel = "stylesheet" type = "text/css" href \u003d. "http://fonts.googleapis.com/css?family\u003dlobster">

< / head >

< body >

< h1 > Șase revizii sunt frumoase!< / h1 >

< / body >

< / html >

Rezultat:

Solicitați utilizarea mai multor fonturi cu Google Font API

Să presupunem că aveți nevoie de trei fonturi de la Google Font Directory.. Nu faceți mai multe cereri. Cererile multiple crește numărul Http. Cereri. Mai puțină cantitate Http. Solicitările reduc timpul de răspuns al paginii web.

În loc de o multitudine de etichete de link-uri de stil, utilizați următorul format pentru proprietatea Href a unei etichete de link-uri de stil.

Exemplu de mai jos va încărca toate cele trei fonturi ( Vollkorn., Yanone. și Droid sans.) Utilizarea unei cereri.

Vollkorn. | Yanone. | Droid + sans.

Acum puteți utiliza oricare dintre aceste trei fonturi în stilurile dvs.

Ce ar trebui să acorde atenție

Numele de fonturi separate utilizând | fără spații. Acordați atenție utilizării + în font Droid sans.. Utilizați simbolul + în numele fonturilor în loc de un spațiu.

Bacsis: Folosind și noi un numar mare Fonturi într-o singură interogare pot crește timpul de răspuns al paginii. Încărcați numai acele fonturi pe care chiar le aveți nevoie. Fii conservator.

Greutate și stil Fonturi Font Font API

Fonturile de greutate au, de asemenea, diferite parametri de greutate / stil. Pentru a le folosi, adăugați la numele fontului colonului (:), și apoi specificați stilul și greutatea.

În exemplul de mai jos indicăm Îndrăzneţ. și bold-italic pentru Vollkorn., I. cursiv pentru Inconsolata..

http: //fonts.googleapis.com/css?family\u003dvolkorn: b.,bi.| Inconsolata: i.| Droid + sanans

Ce să acorde atenție

Utilizați colonul (:) fără un spațiu după numele fontului, apoi specificați numele stilului (adică bolditalic) sau reducerea corespunzătoare (adică BI). Dacă aveți nevoie de multe soiuri de un font, împărțiți-le cu o virgulă (,) fără spații.

Google Font API face o tipografie web mai atractivă

Industria de web design este în căutarea activă pentru o soluție la vechea problemă de alegere și utilizare a fonturilor web și, cum ar fi, @ Font-Face este un răspuns.

Desigur, există mai multe pluginuri pentru a utiliza fonturile Google Web Fonturi pe site-ul WordPress, cu toate acestea, dacă vă dezvoltați propriul subiect, atunci este posibil să fie nevoie să închideți tipografia cu dvs., ocolind pluginurile. Mai jos vom arăta cum să folosim Fonturile Google Web în tema ta.

În primul rând, să mergem la site Fonturile Google Web. Și alegeți fontul pe care trebuie să-l aplice în subiect. Cu ajutorul instrumentelor speciale situate pe partea stângă, puteți să restrângeți zona de căutare, deoarece fonturile sunt într-adevăr foarte multe. Știam că am avut un font serif de grăsime pentru titluri și nume de blog, așa că am ales serif în meniul derulant categorii și apoi am mutat glisorul grosime (grosime) spre dreapta.

Ca rezultat, cele 617 de opțiuni mi-au fost oferite fără probleme la 5. Aveți destul de multe opțiuni pentru a efectua previzualizare Fonturi - Puteți vedea cum va arăta cuvântul, oferta, textul paragraf sau poster în fontul selectat. Puteți selecta un text predefinit, puteți specifica propriul text, selectați dimensiunea fontului dorit.

Odată ce ați găsit fontul pe care doriți să îl utilizați pe site-ul dvs., faceți clic pe butonul Adăugare la colectare.

Puteți adăuga zeci de fonturi la colecția dvs. Cu toate acestea, acest lucru nu este întotdeauna necesar. Dacă o poți face, nu înseamnă că ar trebui să o faci. Încercați să vă limitați cu maximum trei fonturi. Și chiar mai bine doi. Din motive, încă mai place să folosesc un font de siguranță web depășit pentru textul principal text și să salveze fonturile web pentru titluri și alte elemente care necesită expresivitate specială sau atenție pentru tine. Răspunsul despre claritatea fonturilor dvs. - nu ar trebui să utilizați un font atrăgător dacă vizitatorii dvs. nu pot dezasambla ceea ce este scris.

Când adăugați fonturile la colecție, le veți vedea în secțiunea albastră din partea de jos a site-ului. Odată ce colecția dvs. va apărea fonturile pe care doriți să le utilizați, faceți clic pe butonul Utilizare.

După aceasta, veți trece la ecranul pe care va fi prezentată o instrucțiune formată din patru pași. Din ea veți învăța cum să utilizați fonturile. Dacă doriți să descărcați fonturile selectate pentru a le utiliza într-un editor grafic pentru a le evalua sau a face o captură de ecran atractivă a screenshot.png pentru subiectul dvs., atunci faceți clic pe butonul de descărcare din partea de sus a paginii. Dacă doriți doar să utilizați fontul în tema dvs., atunci nu este nevoie să îl descărcați pe computer.

În primul pas, puteți alege stilurile și grosimea plug-in-ului. În al doilea pas, puteți alege un set de caractere pe care doriți să le conectați. De asemenea, puteți evalua modul în care colecția dvs. de fonturi va reflecta asupra vitezei încărcării paginilor.

Acum mergem la al treilea pas, care nu mai este la fel de simplu ca și cele anterioare. În al treilea pas, obținem codul pe care trebuie să-l adăugați la site-urile noastre - trei opțiuni diferite. Selectăm opțiunea Standard - Cu toate acestea, vom agita oarecum de instrucțiunile Google pentru a susține metodele stabilite pentru adăugarea de stiluri la temele WordPress. În cod pentru versiunea standard, copiați numai adresa URL, care este specificată ca atribut HREF pentru eticheta de legătură.

Apoi deschideți fișierul funcțiilor.php temă. Vom crea o caracteristică pentru a descărca CSS, pe care o vom folosi în subiectul nostru:

Funcție ggl_load_styles () ()

Consultați prefixul GGL din funcția mea? Acesta este unul dintre practicianul WordPress de succes. Adăugați întotdeauna un prefix la numele funcțiilor dvs. în WordPress pentru a reduce riscul de conflicte cu alte funcții în subiectul dvs., o filială sau plug-in-uri.

Acum, în această funcție trebuie să ne înregistram tabelul de stiluri primite de la Google:

Funcția ggl_load_styles () (dacă (is_admin ()) (wp_register_style ("googlefont", "http://fonts.googleapis.com/css?family\u003dholtwood+one+sc |roge+Script");))

Folosim funcția wp_register_style. Primul argument este un descriptor, adică. O reducere pe care o putem folosi pentru a face apel la acest tabel stilist în viitor în codul nostru. Al doilea argument este calea către dosar. Folosim adresa URL pe care am primit-o în a treia etapă a instrucțiunilor Google.

Apoi, conectăm tabelul nostru de stil de bază pentru subiectul nostru. Sper că nu ați plasat eticheta de legătură în secțiunea Head a fișierului antet.php? Dacă da, apoi reveniți la fișier și ștergeți acest cod. Apoi conectați tabelul de stil din fișierul funcțiilor.php:

Funcția ggl_load_styles () (dacă (is_admin ()) (wp_register_style ("googlefont", "http://fonts.googleapis.com/css?family\u003dholtwood "one+sc (wp_enqueue_style (" ggl ", get_stylesheet_uri (), matrice (" GoogleFont ");))))

Folosim funcția wp_enqueue_style. Are aceleași argumente ca wp_register_style. Mai întâi legați un descriptor la masa noastră de stilist. Apoi duceți-vă la masa noastră de stil. Din fericire, în WordPress, puteți obține calea prin funcția get_stylesheet_uri (). După aceea, indicăm dependențele. Fișierul nostru stil.css depinde de mesa de stil Google Web Fonts.

În cele din urmă, folosim cârligul WP_ENQUEUE_Scripts pentru a ne apela funcția:

Cu funcțiile.php fișierul este terminat. Acum am lăsat să facem ultimul pas pentru a utiliza fontul selectat. Pasul al patrulea B. instrucțiunile Google. Afișează ce valori trebuie să trecem la proprietatea familiei pentru a folosi fontul nostru. Vreau să fac toate titlurile mele cu Holtwood One SC:

H1, H2, H3, H4, H5, H6 (Font-Family: "Holtwood One SC", Serif;

Și vreau să fac o descriere a site-ului, vreau să fac un font de script Rouge:

Descrierea site-ului (Font-Family: "Script rotund", cursiv;)

Tot! Nu mai face nimic! Ați adăugat Fonturile Google Web Fonts la tema WordPress. Utilizați-i responsabili!