Zdravo svima! Danas želim da vam kažem kako da koristite Google Font API da umetnete fontove koji su vam potrebni.

Na lijevoj strani možete vidjeti filter, a na desnoj strani su primjeri raznih fontova. Odaberite bilo koju koja vam se sviđa. Zatim kliknite na dugme brza upotreba.

Nakon toga, ispred vas će se pojaviti stranica na kojoj možete odabrati stilove fonta koji su vam potrebni.

Na primjer, izaberimo normalan (400) i podebljan (700) stil.

Ispod, ispod broja 3 , možete pronaći kod za ugradnju. Više volim da se povežem na datoteku stilova, pa ću kliknuti na karticu @import. Kopirajte ovaj kod.

Sada kreirajmo fajl index.html sa pasusom teksta.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, službeno?

Uključimo naš stilski list u oznaku glava

I u listu stilova, na početku datoteke, zalijepite kopirani kod.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

Ja sam izabrao font Otvori Sans kao primjer. On je prvi.

Na stranici sa fontom, ispod broja 4 , možete pronaći stil koji nam je potreban. Kopirajmo ga i primijenimo na naš paragraf.

P (familija fontova: "Open Sans", sans-serif; )

Sve! Sada možete uživati ​​u svom novom fontu!

Ali ne zaboravite da smo odabrali i hrabar stil. Da biste ga koristili, samo napišite font-weight sa brojem koji ste odabrali na sajtu. U mom slučaju - 700 .

P(
porodica fontova: "Open Sans", sans-serif;
font-weight: 700;
}

Baš kao i smjelost, možete koristiti i kurziv ako ste ga odabrali na web stranici.

Toliko je lako koristiti google fontovi. Na kraju, vrijedi samo reći da svi ovi fontovi učitavaju vašu stranicu. Da biste to učinili, kada odaberete font na stranici, na desnoj strani se nalazi indikator koji pokazuje koliko dugo će se stranica učitavati. Pazite da broj nije prevelik i koristite samo one fontove koji su vam zaista potrebni. Ne biste trebali birati sve stilove odjednom, nikad ne znate koliko će oni biti korisni.

To je to. Hvala na pažnji i vidimo se uskoro!

Sponzor materijala.
Klima uređaji u online trgovini http://www.technodom.kz/catalog/konditsionery. Klima uređaji - najbolji proizvodi, krediti, veliki izbor, besprijekorna usluga.

Dobar dan dragi čitaoci. Svi vi vjerojatno sanjate o tome da svoje ili klijentove web stranice učinite konciznijim i privlačnijim.

Jedan od glavnih faktora koji je odgovoran za percepciju informacija na web stranici su fontovi i način na koji ih zajedno koristimo. Budući da se na jednoj stranici najčešće koriste dvije ili više vrsta fontova, na primjer, za naslove i samo glavni tekst.

Jedna od mogućnosti za vizuelno poboljšanje čitljivosti tekstova je povezivanje fontova trećih strana. Uostalom, svi vjerovatno znaju koliko je loša standardna kolekcija ćiriličkih fontova u Windowsu, koja je odgovorna za prikazivanje teksta u pretraživaču.

Standardni fontovi:

Cufon i @font-face

Ranije sam već pisao o tome, pomoću kojih možete povezati nestandardne fontove na stranicu. Pogledajmo sada jednostavniji metod - pravilo @font-face u css-u i učitavanje samog fonta iz skladišta fontova Google Fonts.

Čitava razlika između Cufona i @font-face je u tome što prvi koristi js da emulira font i crta znakove koristeći svoja sredstva, dok @font-face učitava sam font na računar posjetitelja i pretraživač ga već koristi za prikaz teksta .

U svakom slučaju, Cufon i @font-face smanjuju brzinu učitavanja stranice, iako ne značajno.

Korištenje Google fontova na web stranici

Neću previše pisati i još dugo ću dati konkretan primjer povezivanja Google Fontova, koristeći ovaj blog kao primjer.

Kao što vidite, naslovi i podnaslovi mojih članaka su napravljeni nestandardnim fontom, sada ću vam u praksi pokazati kako se to radi, a vi ćete pokušati isto na svojim stranicama.

Odabir fonta u spremištu

Da se ne biste uplašili, objasniću - spremište je spremište, ali na buržoaski način :). I tako, idemo na http://www.google.com/fonts/ i potražite odgovarajući font za sebe:

Nema puno na meniju:
Na lijevoj strani, kao što vidite, nalazi se blok sa svim vrstama filtera za pretraživanje fontova, u kojima možete odabrati, na primjer, samo latinične ili ćiriličke fontove. A na vrhu, postavke za prikaz primjera, koji su podijeljeni u 4 kartice:

• Riječ— prikaz nekoliko slova. U ovom načinu rada, zgodno je usporediti više fontova odjednom i vidjeti kako izgledaju određeni znakovi;
• Rečenica— prikaz u obliku jedne rečenice;
• Paragraf— prikazuje se veliki dio teksta koji će vam omogućiti da vizualno uporedite font u samom tekstu;
• Poster— prikazani su naslovi; ovaj metod poređenja je pogodan za odabir fonta koji će se koristiti u naslovima.

Povezivanje fonta sa sajtom

Nakon toga, u panelu Kolekcija, koji se nalazi na dnu, idite na karticu Koristi, koja je odgovorna za korištenje fontova iz vaše kolekcije. Ovdje ćete odmah vidjeti da Google pokazuje koliko će se pogoršati brzina učitavanja stranice:

Ispod je panel sa izborom „vrste prikaza“, izaberite latinicu (latinica) i ćirilicu (ćirilicu), što će nam dati mogućnost da prikažemo i latinična i ćirilična slova:

Nakon toga prelazimo na treću tačku na ovoj stranici, odnosno na samu vezu. Google nam nudi tri opcije za ugradnju svojih fontova - preko js-a, standardni metod putem povezivanja na i @import u css datoteci. Koristim potonju metodu.

Otvorite svoju css datoteku i napišite red koji nam je google pružio:

To je to, povezali smo font iz Google Fontova sa sajtom, kako ga sada koristiti?

Upotreba u CSS-u

Sve je prilično jednostavno, nakon što smo povezali font preko @import , trebamo napisati standardne upute za one klase i identifikatore koji će koristiti naš novi font. npr.:

h1, h2, h3 (familija fontova: 'Cuprum', sans-serif;)

Nakon svih ovih manipulacija, vidjet ćete naslove s novim, nestandardnim fontom.

To je sve, hvala na pažnji i vidimo se uskoro.

Učiti o svemu samostalno nije lako, ali vrlo zanimljivo. Ako imate barem površno razumijevanje o tome kako stranica funkcionira, onda je za implementaciju svog projekta bolje to učiniti sami. Istovremeno, ne samo da ćete uštedjeti mnogo novca, već ćete naučiti i puno „trikova“, tajni itd. Upotreba Google fontova obično ne privlači pažnju, iako zahvaljujući njima blog može postati mnogo više zanimljivo.

Servis

Davno se na Internetu pojavila velika usluga web fontova. Razvio ga je Google. Korisnici su ga mogli koristiti besplatno. Unatoč činjenici da se ova vrsta podešavanja ne smatra superkompliciranom, još uvijek je bilo ljudi koji su pogriješili i nisu se mogli nositi s uslugom.

Jednostavan dizajn je posebno razvijen za ovu svrhu. Sada je rad s Google fontovima postao lakši, a broj posjetitelja se povećao. Biblioteka se takođe proširila. Prošle godine je redizajniran servis koji je dobio mnogo pozitivnih povratnih informacija. Sada je ljudima lakše povezati fontove sa svojim web stranicama i pregledati ih.

Izgled

Dakle, za one koji nikada nisu bili na sajtu sa starim dizajnom, morate da dobijete opštu sliku promena. U prošlosti je usluga izgledala prilično masivno. Posvuda je bilo debelih okvira, blistavih plavih dugmadi, a grafika nije bila najviše rezolucije. Sve je to značajno uticalo na posjetioca.

Sada su se programeri fokusirali na dizajn materijala. Sve je dobilo prefinjene karakteristike. Izgled je postao "lakši". Suptilna animacija i interaktivnost postali su primjetni. Ne postoji ništa drugo što bi vas odvratilo od odabira pravog Google Fonts fonta.

Pojavila se zgodna prilagodba resursa za mobilne uređaje. Naravno, takva promjena nije baš primjetna u pozadini inovacija, ali uzimajući u obzir greške prethodne verzije, za strastvene korisnike to će biti "mana s neba".

Prilika

Dizajneri često koriste ovu uslugu. Unatoč svom iskustvu i profesionalnosti, rade i sa vizualizacijom. Redizajn je pružio više sličnih mogućnosti koje bi vam omogućile da unapred kombinujete ono što bi trebalo da implementirate kasnije u svom projektu.

Stoga je nestao problem kako jedan font odgovara drugoj boji i trećoj pozadini. Kompanija je dodala više alata na stranicu i paletu sa univerzalnim tonovima koji bi vam omogućili da eksperimentišete i saznate kako bi određeni font izgledao u određenoj boji.

Favorites

Usluga fontova Google Fonts omogućava korisnicima da koriste svoje omiljene opcije. Posebna kartica sadrži skup stilova koje programer preporučuje za upotrebu. Ove kolekcije se izdvajaju od ostalih. Razvili su ih stručnjaci iz Google-a i agencija trećih strana. Većina njih ima određeni stil i posebnu filozofiju.

Pogled

Jedna od važnih promjena odnosila se na izbor fontova. To znači da je prethodno korisnik ispred sebe vidio određenu sliku s dodatnim gumbima i velikom plavom koja je dodala font kolekciji. Općenito, ova opcija je izgledala dobro, ali kutija nije uvijek imala dovoljno dobru rezoluciju slike sa stilom, pa je bilo teško nedvosmisleno odrediti kako će font izgledati.

Bilo je i pitanja o ovim dodatnim dugmadima, o kojima se na prvi pogled malo znalo. Morali ste ili pokazati na njih ili ih koristiti. Sada je sve postalo manje-više jasno. Pojavile su se dodatne funkcije:

• Odaberite određenu rečenicu, pasus ili prilagođeni element teksta.
• Eksperimentisanje sa težinom fonta.
• Brzo prilagodite veličine pomoću klizača.

Inače, promjena veličine Google fontova postala je prilagodljivija, jer je promijenjen samo jedan primjer, a ne sve na stranici. U staroj verziji korisnici su se mogli prebacivati ​​s jedne strane stranice na drugu, ali u novoj jednostavno ostajete na primjeru koji prilagođavate.

Veza

Ako ste spremni koristiti ovu uslugu, možete pokušati povezati fontove sa svojim resursom. Proces dobijanja veze je univerzalan. Problemi mogu nastati u zavisnosti od vašeg CMS sistema. Svaki od njih koristi svoje metode. Stoga ćete morati odabrati zasebne opcije za različite projekte.

Pogledat ćemo kako doći do linka za povezivanje Google fontova. Morate otići na službenu web stranicu Google Fonts. Tamo pregledavate katalog stilova i birate onaj koji vam najviše odgovara. Da biste to učinili, kliknite na znak plus pored njega. Nakon toga će font biti dodan u poseban blok na samom dnu stranice.

Kliknite na ovaj blok i zatim ga konfigurirajte. Ovdje možete odabrati stil i željenu abecedu. Ako su vam potrebni Google ćirilični fontovi, provjerite ćirilični red. Nakon toga će se generirati link. Može se naći u istom prozoru na kartici Embed. Samo ga trebate kopirati ili koristiti cijeli HTML kod.

Obično u postavkama stranice postoji postavka za fontove i boje. Postoje standardne opcije, a možete dodati i napredne. Sadrže posebnu opciju za Google fontove. Ako tada trebate preuzeti fontove putem dodatka Supreme Google Webfonts.

Popularne opcije

Teško je, naravno, procijeniti koji su stilovi bolji, posebno za različite teme web stranice. Kada kreirate svoju web stranicu, imajte na umu da ona ne treba da se dopada vama, već vašoj publici. Stoga je bolje bolje pogledati konkurentske stranice.

Obično, za komercijalne resurse, niko ne brine o stilovima. Uostalom, ako vidite font u Google Chromeu u online trgovini, malo je vjerovatno da ćete se fokusirati na njega. Ali ako imate blog ispred sebe, onda će vam se, najvjerovatnije, nešto dopasti, ali će vas nešto, naprotiv, iritirati.

Google Fontovi su pripremili mnoge kolekcije koje uključuju popularne stilove. Na primjer, vole koristiti Jastoga za pojedinačne blokove teksta. Teško je čitati kada je cijeli članak napisan tako podebljanim kurzivom. Ali umetci i citati izgledaju dobro.

Bad Script je također opcija za blogove. Kurziv je težak za čitanje velikih količina teksta, ali može istaknuti glavnu ideju. Stil imitira rukopis. Jura normal 400 je zanimljiva opcija za ćirilicu. Autor tvrdi da se radi o eurostilu iz porodice Sans Serif. Zaista izgleda jako dobro i ima nekoliko varijacija.

Zdravo svima! O onome što sam napisao možete pročitati u lekciji 132. U ovom članku ću vam reći kako lako i brzo možete povezati font sa svojom web lokacijom iz Google Fontova. Koristeći uslugu Google Font, trebate odabrati font za svoju web lokaciju, a zatim ga povezati.

Nije potrebno uploadati datoteku fonta na hosting. Dovoljno je upisati traženi HTML kod u zaglavlje stranice i u naziv novog fonta. Fontovi se mogu povezati ne samo na WordPress stranicu, već i na bilo koju drugu stranicu.

Kako povezati Google fontove sa web lokacijom

Odlazimo na uslugu Google Font koristeći ovu vezu i odabiremo font koji nam je potreban.
Fontovi se mogu odabrati kroz filter. Odnosno, mi postavljamo parametre i tako servis pronalazi fontove sa odabranim parametrima.

Po potrebi možete podesiti i druge parametre: debljinu (debljinu fonta), nagib (koso), širinu (širina fonta).

Takođe morate da izaberete ćirilično pismo ako je vaš sajt na ruskom jeziku: ćirilica (ćirilica), ili proširena ćirilica (ćirilica proširena).

Kada se odaberu parametri, servis će pokazati sve fontove koji su dostupni uz njih.

Pomeramo kursor miša na font koji želimo da instaliramo na sajt, nakon čega se pojavljuju dodatna podešavanja/parametri: Quick-use (brza upotreba), Pop out (pogledajte font u posebnom prozoru) i Add to Collection (dodaj u kolekciju).

Odaberite " Brza upotreba"i vidimo widget u obliku brzinomjera na desnoj strani. Pokazuje koliko se brzo učitava odabrani font. Što je manji broj na ovom brzinomjeru, to bolje.

U nastavku možete odabrati jednu od tri opcije za instaliranje fonta na web stranicu: standardni, @import ili javascript.

Svaka opcija ima upute na engleskom kako pravilno povezati font sa web-mjestom. pokazaću ti prvu opciju" standard“, jer je jednostavnije.

Kopirajte liniju označenu crvenom bojom, a zatim je zalijepite u datoteku header.php između oznaka ….

Zatim otvaramo datoteku style.css, pronalazimo font koji treba promijeniti i dodajemo novi. Jednostavno napišemo naziv novog fonta. Font Google Fonts stavljamo pod navodnike, na primjer, porodica fontova: "Aladin", Arial, Helvetica, Sans-serif.

Ako uopšte ne razumete ništa o tome šta sam ovde rekao, onda pogledajte video gde detaljno govorim, kako povezati Google Font sa WordPress web lokacijom

______________________
Za lekciju 204. bez dodatka

Pozdrav dragi čitaoci. Danas ćemo pričati o google fontovima (google web fontovima), kako ih preuzeti i povezati sa web lokacijom.

Idemo na stranicu www.google.com/fonts/, u filteru desno biramo: 1. željenu kategoriju, 2. ako je potrebno, sortiramo ih i 3. biramo jezik koji nam je potreban (ako vam je potreban ruski font u meniju sa leve strane izaberite Ćirilica).

Dakle, odabrali smo font, sada moramo odabrati njegov stil, da biste to učinili, proširite panel na dnu ( Otvorite ladicu za odabir) i idite na karticu PRILAGODI i odaberite stilove i jezike koji su vam potrebni.

Za preuzimanje kliknite na dugme download.

Povezivanje preuzetog fonta

Kopirajte fontove sadržane u arhivi u /fonts folder, koji bi trebao biti u istom direktoriju kao i /css folder Vaše HTML stranice.

Standardno povezivanje preuzetih fontova izgleda tako

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("embedded-opentype"), url("Font_file_name .woff") format("woff"), url("Font_file_name.ttf") format("truetype"), url("Font_file_name.svg#DSNoteRegular") format("svg"); font-weight: normalan; font -stil: normalan;)

U mom slučaju veza će izgledati ovako

/* Kod za uključivanje fonta u /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font - stil: normalan; font-weight: normal; )

Da biste povezali font koji ste odabrali sa web lokacijom, idite na karticu EMBED, tamo ćete vidjeti 2 načina povezivanja:

1.STANDARD

Ovaj kod treba dodati u odjeljak vaš HTML dokument.

2. @IMPORT

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Bitan. Bez obzira na način povezivanja, koristite sljedeća CSS pravila za definiranje ovih porodica: font-family: 'Roboto', sans-serif; više o ovome u nastavku.

Problemi