Răsfoiește un director curatoriat de fonturi Google Fonts populare cu previzualizări live, filtrează după categorie și caută după nume, apoi copiază cod CSS gata de utilizat și explorează asocieri de fonturi sugerate — totul în browserul tău.

Dimensiune 34px

Totul rulează în browserul tău — fonturile sunt încărcate din Google Fonts doar pentru previzualizarea live, nimic nu este încărcat, fără înregistrare, complet gratuit.


Despre Asocieri de fonturi și director Google Fonts

Acest director de fonturi adună 80 de fonturi populare Google Fonts pe o singură pagină cu funcție de căutare, fiecare randat ca un specimen live cu o linie exemplu de tip pangramă, o linie de alfabet și cifre, și o insignă de categorie. Acoperă cinci familii de tipuri de literă — sans-serif, serif, display, scris de mână și monospace — astfel încât să poți compara forme reale de litere în loc să ghicești din nume.

Fiecare card de font include sugestii curate de asociere: fonturi partenere care funcționează bine împreună pentru titluri și text de corp. Dând clic pe un chip de pereche se deschide o previzualizare care setează un titlu într-un font și un paragraf în celălalt, astfel încât să poți evalua combinația în context înainte de a te angaja la ea.

Când un font sau o pereche se potrivește, un singur clic copiază CSS gata de lipit — o linie @import pentru foaia de stiluri Google Fonts, plus stiva de font-family corespunzătoare cu un fallback rezonabil. Fonturile sunt încărcate din Google Fonts doar pentru previzualizările live; nimic din ce tastezi nu este încărcat nicăieri.

Cum să utilizați Asocieri de fonturi și director Google Fonts

  1. Răsfoiește cardurile de font, fiecare afișând numele său, insigna de categorie și text de exemplu live setat în tipul de literă real.
  2. Folosește caseta de căutare pentru a găsi un font după nume, sau dă clic pe un chip de categorie (Sans-serif, Serif, Display, Scris de mână, Monospace) pentru a filtra grila.
  3. Trage cursorul de dimensiune (16–72 px) pentru a previzualiza linia de exemplu la dimensiunea țintă pentru titlu sau text de corp.
  4. Dă clic pe un chip „Se asociază cu” sau pe butonul „Previzualizează asocierea” pentru a vedea un titlu și un paragraf de corp setate în combinația sugerată.
  5. Dă clic pe butonul „CSS” de pe un card sau din previzualizarea asocierii pentru a copia linia @import și declarațiile font-family în clipboard.

Întrebări frecvente

Prezintă un set curat de 80 de fonturi Google Fonts pe larg utilizate, distribuite în cinci categorii: sans-serif, serif, display, scris de mână și monospace. Fiecare chip de categorie afișează un contor live, astfel încât să poți vedea câte fonturi se potrivesc cu filtrul tău curent.

Fiecare font listează unul sau două fonturi partenere alese manual, care contrastează bine cu el — de obicei un tip display sau serif pentru titluri, asociat cu un font de corp lizibil. Previzualizarea asocierii arată rolurile exacte de titlu și corp pentru fiecare combinație.

Pentru un singur font, obții o linie @import url() pentru endpoint-ul css2 al Google Fonts (greutăți regular și bold), plus o stivă font-family cu fallback-ul generic potrivit. Pentru o pereche, obții ambele importuri și declarații separate pentru titluri și corp.

Da, previzualizările live încarcă tipurile de literă din CDN-ul Google Fonts — aceasta este singura cerere externă a paginii. Căutările tale, alegerile de filtru și CSS-ul copiat rămân în browser; nimic nu este încărcat sau stocat.

Da, răsfoirea, previzualizarea asocierilor și copierea CSS sunt toate gratuite, fără a fi necesar un cont. Tipurile de literă listate sunt Google Fonts, care sunt ele însele gratuite de utilizat în proiecte personale și comerciale sub licențele lor deschise.

Poți ajusta dimensiunea specimenului oriunde între 16 px și 72 px cu cursorul de dimensiune, care actualizează fiecare card deodată. Asta face ușoară compararea candidaților la dimensiunea exactă pe care intenționezi să o folosești pentru titluri sau text de corp.

Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.