Kako ugraditi Google fontove na svoj blog? Veza s Google fontovima

Fontovi iz Google API-ja izvrstan su način da svom blogu date svjež i besprijekoran stil. Trenutno se u setu nalazi 501 font, od kojih 35 podržava ćirilicu. Glavna stvar pri odabiru fonta je čitljivost i kompatibilnost s ostatkom bloga.
Prilagodba
Na primjer, izabrao sam font "Marck Script".

1. Idite u katalog i odaberite svoj font. Cijeli direktorij fontova možete pronaći ovdje: google.com/webfonts

Odaberite skup znakova koje želite:

latinski (latinski)
Latinski prošireni (latinski-ext)
ćirilica (ćirilica)

Odaberite "Latinica" i "Ćirilica". Savjetujem vam da ne birate ostale opcije, jer će se u tom slučaju stranica dugo učitavati, a ponekad font jednostavno neće raditi.

3. U trećem paragrafu vidjet ćete kod koji ćete morati umetnuti u blog, ali nakon male izmjene. Na primjer, za moj font - ovaj kod je namijenjen:
Ovaj kod se mora promijeniti radi ispravnog rada na blogu.

3.1 Dodajte "/" na kraj koda prije ">", a također ako vaš kod ima ovaj simbol - "&" zamijenite ga sa "&".

Montaža

1. Prijavite se na svoj blogger.com račun.
Zatim idite na Dizajn ---> Uredi HTML

2. Korištenjem pretraživanja (Ctrl + F) morat ćete pronaći ovaj redak u svom predlošku:

3. Nakon toga dodajte kod fonta i spremite predložak.
Korištenje

Instalirani font možete koristiti bilo gdje na svom blogu. Na primjer, ako želite da "naziv web-mjesta" ima ovaj font, trebate:

1. Idite na Dizajn ---> Promijeni HTML

2. Koristite pretragu (Ctrl + F) da biste pronašli ovaj redak u svom predlošku:
zaglavlje h1

#header h1 (
visina linije: 1,2em;
transformacija teksta: velika slova;
razmak između slova: .1em;
}

2.2 Ako vaš kod "header h1" nema liniju obitelji fontova, dodajte je:
font-family: Marck Script, Georgia, serif;

2.2.1 Umjesto "Marck Script" - stavite naziv vašeg fonta. Naziv se nalazi na stranici fonta, u četvrtom odlomku.
2.3 To je sve. Također možete pokušati dodati font na druga mjesta na svom blogu, kao što su "sidebar", "post-body" ili "post h2".

Konačno su se ruke stigle, kako promijeniti font zaglavlja stranice... Ne volim komplicirane stvari pa uvijek sve što više pojednostavim. Nudim Vam jednostavan, brz i ne zahtijeva duboko poznavanje html načina da promijenite font, veličinu i boju naslova Vaše stranice.

Samo tri retka u uređivaču i dobit ćete pravo zadovoljstvo u vlastitoj kreativnosti na stranici. Osim toga, ako koristite besplatni predložak, stranica će početi dobivati ​​pojedinačne značajke.

Mjere opreza za one koji nisu sigurni

  • Prvo, da se odlučimo? da govorimo o WordPress temama (predlošcima). Ako je tema vašeg bloga postavljena na ovaj motor, onda je ovaj članak za vas.
  • Ako niste sigurni u svoje sposobnosti, najbolje je prvo eksperimentirati na testnoj poddomeni. Nakon što se uvjerite da ste sposobni za rad, možete prenijeti vještinu na glavno mjesto. Međutim, radnje koje su potrebne kako bi se promijenite font zaglavlja stranice su toliko jednostavni da ih je teško zeznuti. Osobno uvijek sve prvo napravim na testu. Malo više vremena, ali pouzdanije.
  • U slučaju da je stranica još uvijek neispravna, pročitajte >>. Ali, ako se sve radi pažljivo, neće se dogoditi katastrofe.

Redak koda može izgledati drugačije u različitim predlošcima. Da biste razjasnili kako vaš predložak funkcionira, pogledajte članak,. Postoji detaljan video o tome kako pronaći bilo koju liniju koda - nakon čega možete napraviti gotovo sve promjene u predlošku svoje web stranice. Vještina će vas osloboditi potrebe za kopanjem po šiframa i odvezati će vam ruke.

Ako to sami ne shvatite i želite pronaći dobrog freelancera koji razumije kodove, onda u članku o tome postoji korisna poveznica kamo se obratiti ako se nešto dogodi.

Upute za promjenu fonta u zaglavlju stranice

A ako nemate vremena shvatiti, ali želite brže.Za sve o svemu potrebna nam je naša web stranica i word program (za odabir fonta).

  1. Ulazimo u administratorsku ploču naše stranice. Nadalje, u lijevoj bočnoj traci nalazimo Konzola - Izgled - Urednik.
  2. Na desnoj strani nalazimo Popis stilova (style.css) i otvori ga.
  3. Zaglavlje stranice je zaglavlje h1. Nalazi se bliže početku. Kako ne biste gledali svojim očima, možete pritisnuti Ctrl + F - pojavit će se traka za pretraživanje. Upišite u pretragu. Meni ovaj dio izgleda ovako:

Gornji kvadrat: redak za promjenu fonta.

Donji kvadrat: linija za promjenu veličine fonta.

Kasnije ćemo po potrebi promijeniti veličinu i boju fonta.

Kako promijeniti font zaglavlja stranice

  1. Sada otvaramo prazan Word dokument, kopiramo naslov na glavnu stranicu web-mjesta i prenosimo ga u Word dokument, odabiremo ga i počinjemo se igrati s različitim fontovima. Nalaze se na gornjoj ploči u lijevom kutu. Zašto je to prikladno učiniti u ovom programu - jer su sve promjene u fontu vašeg imena odmah vidljive. Odaberite font koji će odgovarati nazivu vaše stranice. Font koji će vam se sigurno svidjeti. Nakon odabira, kopirajte naziv fonta u Worde.
  2. Vraćamo se na administrativnu ploču stranice. U redak za promjenu fonta (na slici - gornji plavi kvadrat) unesite naziv odabranog fonta umjesto zadanog.
  3. Pri dnu stranice kliknite "Ažuriraj datoteku".
  4. Idite na stranicu i provjerite uklapa li se font dobro u opći kontekst. Ako ne, vratite se na Word i odaberite drugu. Sve.

Kako promijeniti veličinu fonta zaglavlja stranice

To se radi u istom predlošku uređivača. Slika iznad je drugi plavi kvadrat. Sve što trebate učiniti je staviti druge brojeve - font će postati veći ili manji, ovisno o tome što trebate. Spremamo promjene, odlazimo na stranicu i vidimo da li nam sve odgovara.

Kako promijeniti boju fonta zaglavlja stranice

To se radi na istom mjestu. U sljedećem bloku nakon onog u kojem smo promijenili sam font i njegovu veličinu nalazi se redak. Izgleda otprilike ovako:

Da biste odabrali boju, možete koristiti jednu od opcija teme: Konzola - Izgled - Pozadina... U retku "Boja pozadine" možete odabrati boju, kopirati njezinu alfanumeričku vrijednost i zalijepiti je umjesto onoga što je bilo (u mom slučaju, # 11006a). Spremi promjene. Idemo na stranicu i divimo se.

Tako da promijeniti font, boju i veličinu, trebate unijeti promjene u samo 3 retka uređivača. Uz malo vještine, potrebno je vrlo malo vremena.

Lijep, čitljiv naslov,

u skladu s općim duhom teme,

učinit će vaš blog privlačnijim i nezaboravnim.

Eksperimentirajte, odaberite ono što vam se sviđa!

p.s. Kada napravim čak i manje izmjene u datotekama uređivača tema, za svaki slučaj kopiram promijenjeni tekst u potpunosti u notepad - u mapu u kojoj je pohranjen zip teme instalirane na mojoj stranici. U slučaju da se stranica iznenada pokvari i dođe potreba za ponovnom instalacijom teme, spremio sam sve datoteke izmijenjene po mom ukusu. Ostat će samo kada ponovno instalirate wordpress ili temu za prijenos datoteka u odgovarajuće mape na hostingu.

U sljedećim člancima, tijekom transformacije mog bloga, jednako ćemo lako promijeniti boju pozadine, fontove naslova u naslovima, članke, boju linkova - ukratko, sve elemente

Irina Kudryavtseva

Justus je pokazao jednu verziju, želim vidjeti više mogućih fontova!

https://www.blogger.com/profile/03714046357448661094

Irina Kudryavtseva, nažalost ovo je jedini "nestandardni" font na koji sam naišao (na Blogspotu). Ako netko zna druge fontove, rado bih ga pročitao!

Si.A.A.

A u paketu, odnosno odjednom u svim porukama u isto vrijeme, moguće je promijeniti font? A onda s tisuću poruka prije mirovine, poruke će se morati prepravljati.

Si.A.A., treba razmisliti! Dajte vremena do sutra!

https://www.blogger.com/profile/13746790384341325111

Si.A.A.

Nagovorio. Ali samo jedan dan. ;)

https://www.blogger.com/profile/06106872544132460143

Si.A.A., vaš zahtjev je ispunjen! Na kraju posta sam objavio priručnik za instalaciju. Jednostavno rješenje nije uspjelo, morate "kopati dublje" u predlošku! Također, nije poznato kako će to utjecati na cjelokupni dizajn bloga?

https://www.blogger.com/profile/13746790384341325111

MagentaWAVE

"nažalost ovo je jedini "nestandardni" font na koji sam naišao (na Blogspotu). Ako netko zna druge fontove, rado bih ga pročitao!"
Uzet ću si slobodu da spamim link,
http://www.magentawave.com/2013/01/connect-and-use-web-fonts.html
Nedavno sam se svađao oko ovih stvari,

https://www.blogger.com/profile/05069681985675276048

magentaWAVE, hvala, stavit ću tvoj link na kraj posta, za iskusne čitatelje!

https://www.blogger.com/profile/13746790384341325111

Si.A.A.

Hvala, ali zastrašujuće nakon upozorenja "kako će to utjecati na dizajn bloga".

https://www.blogger.com/profile/06106872544132460143

Si.A.A., Mislio sam da će osim teksta font ići negdje drugdje! Gdje...? To će biti vidljivo tek nakon instaliranja koda! Mislim da neće biti gore. U svakom slučaju, možete sve vratiti!

https://www.blogger.com/profile/13746790384341325111

Marina Kouyarova

Hvala na savjetu. Ako promijenite font u kodu u bilo koji podržan predloškom, tada se fontovi mogu promijeniti, na primjer, u gadgetima (što sam i učinio :))

https://www.blogger.com/profile/05106932572444773407

OLENA SAVITSKAYA

Oprostite mi, molim vas, sam čajnik, ali gdje je uređivač teksta? na prazan raspon ... i gdje je HTML predloška tamo-gdje-kada sam kliknuo na-predložak-sljedeći-da promijenim HTML? ali ako je tu ne vidim nista o cemu pises, da, dobro, sta je dobro, ne kuzim nista.. a lisce je padalo, a sad vec drugi dan nema pad .. kamo su onda otišli?!

https://www.blogger.com/profile/04422214255958505740

OLENA SAVITSKAYA, na primjer, ukucao sam Google i odmah pronašao članak za vas s videom:
http://mlmvsem.blogspot.de/2012/01/blogspot.html

https://www.blogger.com/profile/13746790384341325111

Christina Azarova

Gdje ste vidjeli takve oznake! Ako pišete u hrpi, onda to napišite za standardne predloške, u samoopisanom nema ništa slično, i neće raditi.

https://www.blogger.com/profile/05518665193214781905

Christina Azarova, Oznake su preuzete iz standardnih predložaka i JESU tu, ali ih je pronaći u novom "Promijeni HTML" vrlo teško!

https://www.blogger.com/profile/13746790384341325111

Vladimir Televnoy

Stranica ima izbor web fontova, još uvijek ne razumijem kako ga koristiti, http://www.google.com/fonts/

Vladimir Televnoy

Ako želite predložiti. Stranica sadrži veze i skripte, ali što i gdje umetnuti ...

https://www.blogger.com/profile/16497829425382739102

Irina Busurmanova

Želim kaligrafski rukopis, ali za čajnik je ovo samo UŽAS!

https://www.blogger.com/profile/10826754143079211427

Kako mogu promijeniti font na svojoj web stranici? Kako spojiti javne fontove iz biblioteke Google fontova, a što ako je font ekskluzivan? Ako su vam pitanja relevantna, čitajte dalje

Formati fontova

Kao i druge vrste datoteka, fontovi dolaze u različitim formatima. Ukupno ih je nekoliko desetaka, a najpopularniji od onih koji se koriste na mreži su TTF, EOT, WOFF i SVG. Štoviše, svaki je podržan samo određenim verzijama softvera.

Osim što pripadaju određenim sustavima, razlikuju se po tehnologiji renderiranja simbola i načinu kompresije. Volumen primljene datoteke ovisi o potonjem, što izravno utječe na vrijeme njenog učitavanja, a time i na brzinu prikaza stranice. Ovo je kritično samo kada instalirate novi font, jer će nakon preuzimanja datoteke koja ga sadrži biti pohranjena u predmemoriju. U ovom trenutku, kada ugrađujete određeni font na stranicu, morate pripremiti sve ove formate fontova: TTF (ili OTF), WOFF, EOT i SVG.

Veza s Google fontovima

Kako bi olakšao rad s fontovima, Google je napravio uslugu Fontovi koja nudi nekoliko stotina fontova, uključujući desetke ćiriličnih.

Nakon odabira potrebnih fontova, a može ih biti nekoliko, usluga generira minimizirani prozor s "standardnim" i "uvoznim" načinima, od kojih svaki ima dvije vrste koda:

  • dodajte posebne ponude redak do glave HTML dokumenta između oznaka + propisati željenu kombinaciju u CSS datoteci;
  • ili napišite još jedan redak između oznaka