Blogger: Cum folosim fonturile custom/non-standard?

In postul anterior va spuneam ca o sa revin cu un tutorial despre cum poate fi folosit orice font dorit in cadrul unui site. Ca un browser sa afiseze in mod corect textul formatat cu un font anume, trebuie ca fontul respectiv sa fie instalat pe calculatorul de unde este accesat site-ul. Fonturile "web-safe" ce se regasesc atat pe PC cat si pe MAC sunt: Arial, Comic Sans, Courier New, Georgia, Impact, Lucida Console, Tahoma, Times New Roman, Trebuchet MS, Verdana. Aceste fonturi pot fi folosite fara nici o problema in cadrul oricarui site, deoarece vor fi afisate corect. Problema intervine atunci cand se doreste, sau designul site-ului impune, folosirea unui font mai deosebit, de exemplu fontul Tetrominoes: Lucrul acesta a fost facut posibil datorita optiunii CSS: @font-face. De exemplu doresti sa folosesti fontul font123.ttf. In fisierul css al site-ului se adauga linia:

@font-face { font-family: font123;
             src: url('font123.ttf');}

iar pentru folosirea acestui font, sa zicem pentru toate h1, tot in fisierul css se adauga linia:

h1 {font-family: font123;}

Din pacate in cazul platformei Blogger, nu pot fi uploadate fisiere (javascript, fonturi, etc...) asa ca o solutie facila ar fi folosirea Google Fonts. Pe serverele celor de la Google sunt disponibile 422 de fonturi ce pot fi folosite in mod gratuit.

Integrarea fonturilor in sablonul blogului

Acceseaza site-ul Google Fonts; Dupa ce te-ai hotarat la unul sau mai multe fonturi, apasa pe Quik use sau Use; Copiaza linia (atentie: "family=Macondo+Swash+Caps" difera de la caz la caz in functie de fontul ales de tine):

<link href="http://fonts.googleapis.com/css?family=Macondo+Swash+Caps" rel="stylesheet" type="text/css">

Te conectezi la Contul de Blogger -> Design -> Editati HTML; Cauta in sablon linia si imediat dupa aceasta introdu linia copiata mai sus; In functie de textul (paragraf, h1, h2, h3, a, etc) pe care doresti sa-l formatezi cu acest font, schimbarile se vor face tot in sectiunea CSS a blogului pentru fiecare element in parte:

p {font-family: 'Macondo Swash Caps', cursive; }