în acest tutorial, vă voi arăta cum să încărcați orice Font web Google pe blogul dvs. Blogger. Există câteva modalități de a face acest lucru, dar acesta este modul în care o fac.
acest tutorial este cel mai potrivit pentru cei care au unele cunoștințe CSS. Pentru acest tutorial folosesc șablonul „simplu” al bloggerului.
Iată un exemplu de font web Google personalizat instalat pe șablonul nostru Lemon Macaron.
Pasul 1
înainte de a începe, vă recomand întotdeauna să faceți o copie de rezervă a șablonului curent înainte de a efectua modificări (doar în cazul în care ceva nu merge bine).
puteți face acest lucru în tabloul de bord accesând șablonul > Backup/Restore (situat în colțul din dreapta sus) > Descărcați șablonul complet.
Pasul 2
după ce faceți backup pentru șablonul dvs., faceți clic pe editare HTML (suntem încă în fila „șablon”).
Pasul 3
lăsând această pagină deschisă, Deschideți o filă sau o fereastră nouă și accesați site-ul web Google Web Fonts. Căutați fontul pe care doriți să îl utilizați și selectați Utilizare rapidă.
am ales să folosesc fontul ‘Lobster Two’.
Pasul 4
pentru Secțiunea 1: alegeți stilurile dorite, alegeți stilurile dorite disponibile pentru fontul dvs. (puteți selecta mai multe stiluri). Rețineți că selectarea prea multor stiluri vă poate încetini blogul. Am selectat Normal 400 după cum puteți vedea mai jos.
pentru Secțiunea 3: Adăugați acest cod pe site-ul dvs. web, faceți clic pe fila @import.
Pasul 5
copiați informațiile din caseta @import.
acum, lăsând această pagină deschisă, reveniți la blogul dvs. (unde ați selectat editare HTML). Vom lipi codul de import al fontului în șablonul dvs.
Căutați textul de urmărire situat spre începutul editorului de șabloane (de obicei situat pe liniile 13 sau 14):
<b:skin>...</b:skin>
odată extins, lipiți informațiile pe care le-ați copiat din caseta @ import de pe site-ul web Google Web Fonts, următorul text:
/* Variable definitions
ar trebui să arate astfel:
Faceți clic pe salvați șablonul. Fontul dvs. a fost acum importat! Acum Puteți plasa familia de fonturi unde doriți să se afișeze în șablonul dvs.
Pasul 6
rapid, vă voi arăta cum să utilizați fontul nou importat. În acest exemplu, voi folosi fontul pentru titlul postării mele. În căutarea editorului HTML pentru:
h3.post-title, .comments h4
eliminați următoarea linie:
font: $(post.title.font);
și înlocuiți-l cu textul listat la Secțiunea 4: integrați fonturile în CSS-ul dvs. pe site-ul web Google Fonts.
font-family: 'Lobster Two', cursive;
ar trebui să arate ceva de genul asta după ce ați lipit informațiile familiei fonturilor:
