Kuvanmuuttaja


Ilmaiset kirjasimet — suosituimmat sivustot, live-esikatselut ja niiden käyttö

Selaa luotettavia ilmaisia ​​kirjasimia, testaa live-esikatseluja, kopioi puhdas CSS ja opi oikea tapa käyttää verkkokirjasimia. Mukana avoimen lähdekoodin, ilmaiset kaupalliset ja henkilökohtaiseen käyttöön tarkoitetut kokoelmat.

Google-kirjasimet

OFL

Suurin avoimen lähdekoodin kirjasto nopealla globaalilla CDN:llä, osajoukoilla ja muuttuvilla fonteilla. Ihanteellinen verkkokäyttöön ja sovelluksiin. Useimmat perheet käyttävät SIL Open Font License -lisenssiä.

WebfontMuuttuvakaupallinen ok*
Vierailla

Fontshare (ITF:ltä)

Vapaa

Indian Type Foundry tarjoaa laadukkaita kirjasintyyppejä ilmaiseksi. Puhtaat perheet, helppo CDN-upotus ja monia vaihtelevia vaihtoehtoja.

WebfontMuuttuva
Vierailla

Fontti Orava

Ilmainen kaupallinen

Kuratoitu hakemisto, joka keskittyy vapaasti kaupalliseen käyttöön tarkoitettuihin kirjasimiin. Sisältää webfont-generaattorin itseisännöintiä varten.

kaupallinen ok*Generaattori
Vierailla

Liikkuvan tyypin liiga

OFL

Klassinen avoimen lähdekoodin valimo ajattomilla perheillä, kuten League Spartan ja Raleway. Erinomainen brändäys- ja toimitukselliseen käyttöön.

Avoin lähdekoodiBrändäys
Vierailla

Velvetyne

OFL

Kokeellisia avoimen lähdekoodin kirjasimia erottuvilla näyttötyyleillä. Täydellinen julisteisiin, kulttuuriin ja luovaan työhön.

NäyttöKokeellinen
Vierailla

kollektiivinen

OFL

Yhteisövalimo julkaisee korkealaatuisia ilmaisia ​​fontteja avoimilla lisensseillä. Vahvat toimitukselliset ja näyttövaihtoehdot.

Avoin lähdekoodiToimitus
Vierailla

Avaa valimo

OFL

Kuroitu avoimen lähdekoodin kirjasinhakemisto testaustyökaluilla ja suunnittelukeskeisellä esityksellä. Ihanteellinen uusien perheiden löytämiseen.

Vierailla

1001 fonttia

Sekalaiset lisenssit

Suuri hakemisto suodattimilla ilmaiseksi kaupalliseen käyttöön. Lue lisenssi perhettä kohti; monet ovat vain henkilökohtaiseen käyttöön.

Vierailla

DaFont

Henkilökohtainen käyttö

Valtava arkisto, joka sopii parhaiten henkilökohtaisiin projekteihin ja inspiraatioon. Lisenssit vaihtelevat suuresti; tarkista jokainen lataussivu.

Vierailla

Kuvakefontit (Font Awesome, materiaalikuvakkeet, Remix-kuvake)

Ilmaiset tasot

Käyttöliittymäkuvakkeet fonttiputkella. Harkitse nykyaikaisia ​​SVG-kuvakejärjestelmiä, mutta kuvakefontit ovat edelleen hyödyllisiä nopeissa lisäyksissä.

UICDN
Fontti Mahtava Materiaalikuvakkeet Remix-kuvake

Live-esikatselu ja CSS-katkelmat

Vain paikallinen – mitään ei ladattu
The quick brown fox jumps over the lazy dog. 0123456789
font-family: Inter, sans-serif; fontin paino: 600;

Ominaisuuden vertailu (tilanne)

Lisenssit vaihtelevat perheittäin
Sivusto Avoin lähdekoodi Ilmainen kaupallinen Vaihtelevat fontit CDN/Webfontit Huomautuksia
Google-kirjasimetKylläKyllä*KylläKylläSuurin kirjasto, nopea CDN
FontshareSekoitettuKyllämonetKylläNykyaikaiset perheet
Fontti OravaSekoitettuKyllä*JotkutGeneraattoriKuroitu kaupalliseen käyttöön
Liikuttavan tyypin liigaKylläKylläJotkutOma isäntäAjattomia klassikoita
VelvetyneKylläKylläJotkutOma isäntäKokeellinen näyttö
DaFontEiVaihteleeHarvaEiErinomainen henkilökohtaisiin projekteihin

Kuinka käyttää ilmaisia ​​fontteja verkossa

  1. Tarkista lisenssi: OFL ja muut sallivat lisenssit ovat parhaita kaupallisiin projekteihin. Jotkut sivustot luettelevat vain henkilökohtaiseen käyttöön tarkoitettuja kirjasimia.
  2. Valitse toimitus: CDN-linkki nopeutta varten tai itsepalvelu @font-face valvontaa ja yksityisyyttä varten.
  3. Esilataa tärkeät kirjasimet sankaritekstiisi, jos CLS on huolenaihe; määritä varapinot välähdyksen välttämiseksi.
  4. Suosi muuttuvia kirjasimia, kun niitä on saatavilla vähentääksesi pyyntöjä ja saadaksesi joustavat painot.

CDN esimerkki

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style>

Oma isäntä Esimerkki

@font-face{
  font-family: "MyFont";
  src: url("/fonts/MyFont-Variable.woff2") format("woff2");
  font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

* Tarkista aina jokaisen perheen käyttöoikeus lähdesivustolla.

UKK

Ovatko Google-kirjasimet ilmaisia ​​kaupalliseen käyttöön?

Suurin osa niistä julkaistaan ​​OFL:n alla ja ovat ilmaisia ​​kaupalliseen käyttöön. Vahvista käyttöoikeus jokaisella perhesivulla.

Pitäisikö minun käyttää kuvakefontteja vai SVG-kuvakkeita?

SVG-kuvakkeet ovat joustavampia nykyaikaisille sovelluksille. Kuvakefontit ovat edelleen hyödyllisiä nopeissa asetuksissa tai vanhoissa putkissa.

Vaikuttavatko verkkokirjasimet sivuston nopeuteen?

Kyllä. Käyttää fontin näyttö: vaihda, alajoukko, jos mahdollista, ja rajoittaa perheitä ja painoja.

Mikä on paras yleiskäyttöinen fontti?

Inter, Roboto ja Source Sans 3 ovat monipuolisia. Yhdistä serifin kanssa, kuten Merriweather tai Playfair otsikoita varten.