I premi di design, creatività e innovazione su internet

L’uso della tipografia come elemento principale di design nelle ultime tendenze, significa che Google Fonts è ora una risorsa più preziosa che mai. La sua interfaccia e il suo sistema di download sono molto intuitivi e confortevoli, e ti permettono di confrontare tutti i font e gli stili disponibili per soddisfare l’attuale panorama creativo che sta fondendo tipografia in grassetto, font serif e display, paragrafi grandi, stili decorativi e altro ancora. Leggi di più sulla tipografia al centro della scena qui Typography is the new black. Tendenze nel web design

Top recommended Google Web Fonts

Qui puoi trovare una selezione di font che abbiamo scelto per il loro aspetto estetico, ma soprattutto funzionale, contenendo famiglie con molti stili e pesi.
Abbiamo evidenziato font ottimizzati per le interfacce, UI Optimized web fonts, e altri che sono particolarmente leggibili nei paragrafi, o particolarmente comodi per la lettura su mobile e leggibili su qualsiasi dispositivo – sia esso smartphone, desktop o tablet.

  • Alegreya Alegreya Google Fonts Web Fonts
  • B612 B612 Google Fonts Web Fonts
  • Muli Muli Google Fonts Web Fonts
  • Titillium Web Titillium Web Google Fonts Web Fonts
  • Varela Varela Google Fonts Web Fonts
  • Vollkorn Vollkorn Google Fonts Web Fonts
  • IBM Plex IBM Plex Google Fonts Web Fonts
  • Crimson Text Crimson Text Google Fonts Web Fonts
  • Cairo Cairo Google Fonts Web Fonts
  • BioRhyme BioRhyme Google Fonts Web Fonts
  • Karla Karla Google Fonts Web Fonts
  • Lora Lora Google Fonts Web Fonts
  • Frank Ruhl Libre Frank Ruhl Libre Google Fonts Web Fonts
  • Playfair Display Playfair Display Google Fonts Web Fonts
  • Archivo Archivo Google Fonts Web Fonts
  • Spectral Spectral Google Fonts Web Fonts
  • Fjalla One Fjalla One Google Fonts Web Fonts
  • Roboto Roboto Google Fonts Web Fonts
  • Montserrat Montserrat Google Fonts Web Fonts
  • Rubik Rubik Google Fonts Web Fonts
  • Fonte Sans Source Sans Google Fonts Web Fonts
  • Cardo Cardo Google Fonts Web Fonts
  • Cormorano Cormorano Google Fonts Web Fonts
  • Lavoro senza Lavoro senza Google Fonts Web Fonts
  • Rakkas Rakkas Google Fonts Web Fonts
  • Concert One Concert One Google Fonts Web Fonts
  • Yatra One Yatra One Google Fonts Web Fonts
  • Arvo Arvo Google Fonts Web Fonts
  • Lato Lato Google Fonts Web Fonts
  • Abril FatFace Abril Fatface Google Fonts Web Fonts
  • Ubuntu Ubuntu Google Fonts Web Fonts
  • PT Serif PT Serif Google Fonts Web Fonts
  • Old Standard TT Old Standard TT Google Web Fonts
  • Oswald Oswald Google Fonts Web Fonts

Fonts ottimizzati per UI

  • PT Senza PT Senza Google Fonts Mobile Fonts UI
  • Poppins Poppins Google Fonts Mobile Fonts UI
  • Fira Sans Fira Sans Google Fonts Mobile Fonts UI
  • Nunito Nunito Google Fonts Mobile Fonts UI
  • Oxygen Oxygen Google Fonts Mobile Fonts UI

Fonts ottimizzati per la leggibilità e leggibilità

  • Exo 2 Exo 2 Google Fonts Mobile Fonts UI
  • Open Sans Open Sans Google Fonts Mobile Fonts UI
  • Merriweather Merriweather Google Fonts Mobile Fonts UI
  • Noto Sans Noto Sans Google Fonts Mobile Fonts UI
  • Source Sans Pro Source Sans Pro Google Fonts Mobile Fonts UI

Come usare i Web Fonts

A questo punto tutti sanno come usare i web font, ma se non sei sicuro, devi solo sapere che ci sono due modi. Il primo è quello di utilizzare i servizi di font web come Google Fonts, Webtype, Fonts.com o Typekit e scaricare il font dai loro server, come vedrai nell’esempio seguente: 1. Servizi di incorporazione di font web

Il secondo è quello di ospitare il font nel tuo server e utilizzare la regola @font-face nel tuo foglio di stile come puoi vedere qui: 2. Incorporare i font usando la regola @font-face

Servizi di incorporazione di font web

Google Web Fonts (GWF) o Typekit sono sistemi che permettono l’uso di font ospitati sui loro server. GWF è gratuito da usare, non richiede un account, e non ha limiti di traffico o di domini a differenza di Typekit. Typekit stabilisce il costo del servizio in base al numero di domini in cui viene utilizzato il font, o il traffico mensile del sito. Una delle caratteristiche più apprezzate di GWF è la possibilità di scaricare una versione desktop dei font da utilizzare nella fase di design del progetto.

Implementazione

È davvero veloce e semplice:

1. Scegli un font. Scegliete un font. Puoi aggiungerlo alla tua collezione o usare “quick-use” per generare il codice e le opzioni per quel font.

2. Copia e incolla il codice generato nel tuo <Head>

 <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>

3. Il font è ora accessibile nel tuo codice CSS

 body { font-family: 'Tangerine', serif; font-size: 48px; }

Qui puoi consultare un manuale esteso per gli stili, i sottoinsiemi di script e l’utilizzo di più font.

Embedding dei font usando la regola @font-face

I font sono ospitati sul server dell’utente indipendentemente dai servizi esterni. @font-face era una regola CSS2 deprecata che è stata reintrodotta nelle specifiche CSS3 ed è supportata da quasi tutti i browser moderni. Un web font è un font personalizzato che è supportato da diversi browser ed è disponibile in formati come TTF, WOFF, EOT e SVG.

 @font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }