Cum să încorporezi fonturi Google pe blogul tău? Conexiune Google Fonts
Personalizare
De exemplu, am ales fontul „Marck Script”.
1. Accesați catalogul și alegeți fontul. Puteți găsi întregul director de fonturi aici: google.com/webfonts
Alegeți seturile de caractere dorite:
latină (latină)
latină extinsă (latin-ext)
chirilic (chirilic)
Selectați „Latina” și „Chirilic”. Vă sfătuiesc să nu alegeți restul opțiunilor, deoarece în acest caz pagina va dura mult timp să se încarce și, uneori, fontul pur și simplu nu va funcționa.
3. În al treilea paragraf, vei vedea codul care va trebui introdus în blog, dar după o mică modificare. De exemplu, pentru fontul meu - acest cod este destinat:
Acest cod trebuie schimbat pentru a funcționa corect în blog.
3.1 Adăugați „/” la sfârșitul codului înainte de „>”, și, de asemenea, dacă codul dvs. are acest simbol - „&” înlocuiți-l cu „&”.
Instalare
1. Conectați-vă la contul dvs. blogger.com.
Apoi accesați Design ---> Edit HTML
2. Folosind căutarea (Ctrl + F), va trebui să găsiți această linie în șablonul dvs.:
3. După aceasta adăugați codul fontului și salvați șablonul.
Utilizare
Puteți utiliza fontul instalat oriunde pe blogul dvs. De exemplu, dacă doriți ca „numele site-ului” să aibă acest font, atunci trebuie să:
1. Accesați Design ---> Schimbați HTML
2.Utilizați căutarea (Ctrl + F) pentru a găsi această linie în șablonul dvs.:
antet h1
#header h1 (
înălțimea liniei: 1,2 em;
text-transform: majuscule;
spațiere între litere: .1em;
}
2.2 Dacă codul dvs. „header h1” nu are o linie de familie de fonturi, adăugați-l:
familie de fonturi: Marck Script, Georgia, serif;
2.2.1 În loc de „Marck Script” - puneți numele fontului dvs. Numele poate fi găsit pe pagina cu font, în al patrulea paragraf.
2.3 Asta e tot. De asemenea, puteți încerca să adăugați fontul în alte locuri de pe blogul dvs., cum ar fi „bara laterală”, „post-body” sau „post h2”.
În cele din urmă, mâinile întinse, cum se schimbă fontul antetului site-ului... Nu-mi plac lucrurile complicate, așa că întotdeauna simplific totul cât mai mult posibil. Vă ofer o modalitate simplă, rapidă și care nu necesită cunoștințe profunde a html pentru a schimba fontul, dimensiunea și culoarea titlului site-ului dvs.
Doar trei rânduri în editor și veți obține o adevărată plăcere din propria creativitate pe site. În plus, dacă utilizați un șablon gratuit, site-ul va începe să dobândească funcții individuale.
Măsuri de precauție pentru cei care nu sunt siguri
- În primul rând, să decidem? că vorbim despre teme (şabloane) WordPress. Dacă tema blogului tău este setată pe acest motor, atunci acest articol este pentru tine.
- Dacă nu sunteți sigur de abilitățile dvs., cel mai bine este să experimentați mai întâi pe un subdomeniu de testare. După ce vă asigurați că sunteți capabil să lucrați, puteți transfera abilitățile pe site-ul principal. Cu toate acestea, acțiunile care sunt necesare pentru a schimbați fontul antetului site-ului sunt atât de simple încât este greu să le dai peste cap. Personal, fac întotdeauna totul primul test. Mai mult timp, dar mai fiabil.
- În cazul în care site-ul este încă stricat, citiți, >>. Dar, dacă totul este făcut cu grijă, nu se vor întâmpla dezastre.
O linie de cod poate arăta diferit în diferite șabloane. Pentru a clarifica modul în care funcționează șablonul, consultați articolul. Există un videoclip detaliat despre cum să găsiți orice linie de cod - după care puteți face aproape orice modificări șablonului site-ului dvs. Abilitatea te va elibera de nevoia de a scotoci prin coduri și îți va dezlega mâinile.
Dacă nu vă dați seama singur și doriți să găsiți un freelancer bun care să înțeleagă codurile, atunci în articolul despre există un link util unde să apelați dacă se întâmplă ceva.
Instrucțiuni pentru schimbarea fontului din antetul site-ului
Și dacă nu ai timp să-l dai seama, dar îl vrei mai repede.Pentru totul despre orice, avem nevoie de site-ul nostru și de programul Word (pentru alegerea unui font).
- Intrăm în panoul de administrare al site-ului nostru. Mai departe, în bara laterală din stânga găsim Consolă - Aspect - Editor.
- În partea dreaptă găsim Lista de stiluri (style.css)și deschide-l.
- Antetul site-ului este antetul h1. Situat mai aproape de început. Pentru a nu privi cu ochii, puteți apăsa Ctrl + F - va apărea bara de căutare. Introduceți căutarea. Partea asta arata asa pentru mine:
Pătrat superior: linia de schimbare a fontului.
Pătrat de jos: linia de schimbare a mărimii fontului.
Mai târziu vom schimba dimensiunea și culoarea fontului dacă este necesar.
Cum se schimbă fontul antetului site-ului
- Acum deschidem un document Word gol, copiem titlul pe pagina principală a site-ului și îl transferăm într-un document Word, îl selectăm și începem să ne jucăm cu diferite fonturi. Acestea sunt situate pe panoul superior din colțul din stânga. De ce este convenabil să o faci în acest program - pentru că toate modificările fontului din numele tău sunt imediat vizibile. Alegeți un font care să se potrivească cu numele site-ului dvs. Un font care vă va plăcea cu siguranță. Odată selectat, copiați numele fontului în Worde.
- Revenim la panoul de administrare a site-ului. În linia pentru schimbarea fontului (în figură - pătratul albastru de sus), introduceți numele fontului selectat în locul celui implicit.
- În partea de jos a paginii, faceți clic pe „Actualizați fișierul”.
- Accesați site-ul și vedeți dacă fontul se potrivește bine în contextul general. Dacă nu, reveniți la Word și alegeți altul. Tot.
Cum se schimbă dimensiunea fontului antetului site-ului
Acest lucru se face în același șablon de editor. Imaginea de mai sus este al doilea pătrat albastru. Tot ce trebuie să faceți acolo este să puneți alte numere - fontul va deveni mai mare sau mai mic, în funcție de ceea ce aveți nevoie. Salvăm modificările, mergem pe site și vedem dacă totul ni se potrivește.
Cum se schimbă culoarea fontului antetului site-ului
Acest lucru se face în același loc. Există o linie în blocul următor după cel în care am schimbat fontul în sine și dimensiunea acestuia. Arata cam asa:
Pentru a alege o culoare, puteți folosi una dintre opțiunile temei: Consolă - Aspect - Fundal... În linia „Culoare de fundal” puteți selecta o culoare, copiați valoarea ei alfanumerică și lipiți-o în loc de ceea ce a fost (în cazul meu, # 11006a). Salvează modificările. Mergem pe site și admirăm.
Deci să schimba fontul, culoarea și dimensiunea, trebuie să faceți modificări în doar 3 rânduri ale editorului. Cu puțină îndemânare, este nevoie de foarte puțin timp.
Titlu frumos, ușor de citit,
în concordanță cu spiritul general al temei,
va face blogul dvs. mai atractiv și mai memorabil.
Experimentează, alege ce îți place!
P.S. Când fac chiar și modificări minore fișierelor editorului de teme, pentru orice eventualitate, copiez textul modificat în întregime în notepad - în folderul în care este stocat zip-ul temei instalate pe site-ul meu. În cazul în care site-ul se rupe brusc și apare nevoia de a reinstala tema, am salvat toate fișierele modificate după gustul meu. Acesta va rămâne doar când reinstalați wordpress sau o temă pentru a transfera fișierele în folderele corespunzătoare de pe găzduire.
În articolele următoare, în cursul transformării blogului meu, vom schimba la fel de ușor culoarea de fundal, fonturile titlurilor în titluri, articole, culoarea linkurilor - pe scurt, orice elemente
Irina Kudryavtseva
Justus a arătat o versiune, vreau să văd mai multe fonturi posibile!
https://www.blogger.com/profile/03714046357448661094
Irina Kudryavtseva, din păcate, acesta este singurul font „non-standard” pe care l-am întâlnit (pe Blogspot). Dacă cineva știe alte fonturi, mi-ar plăcea să le citesc!
Si.A.A.
Și în lot, adică simultan în toate mesajele în același timp, este posibil să schimbați fontul? Și apoi cu o mie de mesaje înainte de pensionare, mesajele vor trebui refăcute.
Si.A.A., trebuie sa te gandesti! Dă-i timp până mâine!
https://www.blogger.com/profile/13746790384341325111
Si.A.A.
Convins. Dar doar o zi. ;)
https://www.blogger.com/profile/06106872544132460143
Si.A.A., cererea ta a fost finalizată! La finalul postării am postat un manual de instalare. O soluție simplă nu a funcționat, trebuie să „sapă mai adânc” în șablon! De asemenea, nu se știe cum va afecta acest lucru designul general al blogului?
https://www.blogger.com/profile/13746790384341325111
MagentaWAVE
"din păcate, acesta este singurul font „non-standard” pe care l-am întâlnit (pe Blogspot). Dacă cineva știe alte fonturi, mi-ar plăcea să le citesc!"
Îmi voi lua libertatea de a trimite spam linkul,
http://www.magentawave.com/2013/01/connect-and-use-web-fonts.html
Destul de recent m-am certat pe aceste chestiuni,
https://www.blogger.com/profile/05069681985675276048
MagentaWAVE, mulțumesc, voi plasa link-ul tău la sfârșitul postării, pentru cititorii experimentați!
https://www.blogger.com/profile/13746790384341325111
Si.A.A.
Mulțumesc, dar înfricoșător după avertismentul „cum va afecta acest lucru designul blogului”.
https://www.blogger.com/profile/06106872544132460143
Si.A.A., Am vrut să spun că, pe lângă text, fontul va merge în altă parte! Unde...? Acest lucru va fi vizibil numai după instalarea codului! Nu cred că va fi mai rău. În orice caz, poți returna totul înapoi!
https://www.blogger.com/profile/13746790384341325111
Marina Kouyarova
Multumesc pentru sfat. Dacă schimbați fontul din cod cu oricare suportat de șablon, atunci fonturile pot fi schimbate, de exemplu, în gadget-uri (ceea ce am făcut eu :))
https://www.blogger.com/profile/05106932572444773407
OLENA SAVITSKAYA
Iertați-mă, vă rog, ceainic în sine, dar unde este editorul de text? la punctul liber... și unde este HTML-ul șablonului acolo-unde-când am făcut clic pe-șablon-următorul-pentru a schimba HTML-ul? dar daca e acolo, nu vad nimic despre ce scrii tu, da, pai, ce e asa de bine, nu primesc nimic.. si cadeau frunzele, iar acum a doua zi nu mai dau. cad.. unde s-au dus atunci?!
https://www.blogger.com/profile/04422214255958505740
OLENA SAVITSKAYA, de exemplu, am tastat Google și am găsit imediat un articol pentru tine cu un videoclip:
http://mlmvsem.blogspot.de/2012/01/blogspot.html
https://www.blogger.com/profile/13746790384341325111
Christina Azarova
Unde ai văzut astfel de etichete! Dacă scrieți într-o grămadă, atunci scrieți asta pentru șabloane standard, în auto-descris nu există nimic de genul acesta și nu va funcționa.
https://www.blogger.com/profile/05518665193214781905
Cristina Azarova, Etichetele sunt preluate din șabloane standard și SUNT acolo, dar găsirea lor în noul „Schimbare HTML” este foarte dificilă!
https://www.blogger.com/profile/13746790384341325111
Vladimir Televnoi
Site-ul are o selecție de fonturi web, încă nu înțeleg cum să-l folosesc, http://www.google.com/fonts/
Vladimir Televnoi
Dacă doriți să sugerați. Site-ul conține link-uri și scripturi, dar ce și unde să inserați...
https://www.blogger.com/profile/16497829425382739102
Irina Busurmanova
Vreau un scris de mână caligrafic, dar pentru un ceainic este doar HORROR!
https://www.blogger.com/profile/10826754143079211427
Cum schimb fontul de pe site-ul meu? Cum se conectează fonturile publice din biblioteca Google Fonts și ce se întâmplă dacă fontul este exclusiv? Dacă întrebările sunt relevante pentru dvs., citiți mai departe
Formate de font
Ca și alte tipuri de fișiere, fonturile vin într-o varietate de formate. În total, sunt câteva zeci de ele, iar cele mai populare dintre cele utilizate în rețea sunt TTF, EOT, WOFF și SVG. Mai mult, fiecare este acceptat doar de anumite versiuni ale software-ului.
Pe lângă faptul că aparțin unor sisteme specifice, ele diferă prin tehnologia de redare a simbolurilor și metoda de compresie. Volumul fișierului primit depinde de acesta din urmă, care afectează direct timpul de încărcare a acestuia și, prin urmare, viteza de afișare a paginii. Acest lucru este esențial numai atunci când instalați un font nou, deoarece după descărcare fișierul care îl conține va fi stocat în cache. În momentul de față, atunci când încorporați un anumit font pe un site, trebuie să pregătiți toate aceste formate de font: TTF (sau OTF), WOFF, EOT și SVG.
Conexiune Google Fonts
Pentru a facilita lucrul cu fonturile, Google a creat serviciul Fonturi, care oferă câteva sute de fonturi, inclusiv zeci de fonturi chirilice.
După alegerea fonturilor necesare și pot fi mai multe dintre ele, serviciul generează o fereastră minimizată cu modurile „standard” și „import”, fiecare dintre ele având două tipuri de cod:
- adauga oferte speciale o linie la capul documentului HTML între etichete + prescrie combinația dorită în fișierul CSS;
- sau scrieți o altă linie între etichete