Come Installare il Font Google Roboto su Windows, Mac e Linux

Il font Roboto è un carattere sans-serif creato da Google. È elegante e si visualizza bene su schermi ad alta risoluzione, come i telefoni Android. Pertanto, è perfetto per molte applicazioni. Inoltre, imparare a installare il font Google Roboto su Windows, macOS e Linux è un gioco da ragazzi.

Indice dei Contenuti

• Scaricare il Font Google Roboto
• Installare il Font Google Roboto su Windows
• Installare il Font Google Roboto su macOS
• Installare il Font Google Roboto su Linux
• Utilizzare il Font Google Roboto su un Sito Web
• Domande Frequenti

Scaricare il Font Google Roboto

Indipendentemente dalla tua piattaforma, devi prima scaricare il pacchetto font Roboto. Per farlo, vai al sito del font Roboto. Il modo più semplice per scaricare l’intera famiglia di font è cliccare sul pulsante “Scarica Famiglia” in alto a destra.

Si concluderà come un file ZIP sul tuo computer, a quel punto potrai installarlo sul tuo sistema operativo.

Se i tuoi font appaiono pixelati o corrotti in qualche modo, prova questi passaggi di risoluzione dei problemi per risolvere il problema.

La buona notizia è che, indipendentemente dalla piattaforma, puoi installare il font Roboto in pochi clic.

Installare il Font Google Roboto su Windows

Segui questi passaggi per installare il font Roboto su Windows:

1. Estrai la cartella del font Roboto. Fai clic destro e seleziona “Estrai Tutto.”

1. Apri il menu “Start” e seleziona “Impostazioni.”

1. Clicca su “Personalizzazione” e scegli “Font” dall’elenco delle impostazioni a destra.

1. Trascina i font estratti nella finestra dell’installer. Dopo pochi secondi, il font Google Roboto sarà installato su Windows. Puoi selezionarlo come faresti con qualsiasi altro font all’interno delle applicazioni.

Per installare altri tipi di font o semplicemente vedere cosa è disponibile in Windows, dai un’occhiata alla nostra guida per installare e gestire i font su Windows.

Installare il Font Google Roboto su macOS

Segui questi passaggi per installare il font Roboto su Mac:

1. Estrai il file ZIP. Fai doppio clic o fai clic destro e seleziona “Apri.”
2. Seleziona tutti i font all’interno della cartella (saltando LICENSE.txt), fai clic destro e seleziona “Apri Con -> Libro Font” dal menu contestuale.

1. Questo li caricherà in Libro Font e li renderà disponibili per l’uso nelle tue applicazioni.

Nota che puoi anche fare doppio clic sui singoli file font per caricarli in Libro Font.

Installare il Font Google Roboto su Linux

1. Estrai i file compressi con il comando unzip.
2. Apri la tua cartella home e abilita l’opzione per visualizzare file/cartelle nascosti. Puoi premere Ctrl + H, oppure cliccare sul menu “Visualizza” e scegliere “Mostra file nascosti.”
3. Individua la cartella “.fonts”. Se non esiste, creala.
4. Sposta la cartella del font Roboto in questa cartella “.fonts”.

In alternativa, utilizza il programma Font Manager per gestire i tuoi font.

1. Installa Font Manager dal Software Center o dal repository.

1. Una volta installato, apri questo e l’app Fonts (di nuovo, dalla barra di ricerca).

1. All’interno del Font Manager, assicurati di essere nella scheda Gestisci e clicca sull’icona Più (+).

1. Naviga fino alla tua cartella di font estratti e aggiungili come necessario.

Una volta riavviate le app che stai utilizzando, dovresti vedere il font Roboto.

Sebbene Linux non dovrebbe avere problemi con Roboto, alcune distribuzioni, come Ubuntu, possono avere difficoltà a riconoscere alcuni font. Se hai problemi con Roboto o altri font in Ubuntu, prova a convertirli nel formato di font TrueType.

Utilizzare il Font Google Roboto su un Sito Web

Se desideri utilizzare il font Roboto sul tuo sito web, utilizza la sintassi CSS3 @font-face per incorporare il font esterno nella tua pagina web.

1. Vai alla pagina del font Roboto di FontSquirrel, clicca su “Webfont Kit,” poi scegli i formati di font preferiti, un sottoinsieme (se presente), e clicca su “Scarica @Font-Face Kit.”

1. Estrai il file compresso nella cartella font del tuo sito web. Apri il tuo foglio di stile web e aggiungi il seguente codice:

@font-face{  
font-family:'Roboto';  
src:url('Roboto-Regular-webfont.eot');  
src:url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Regular-webfont.woff') format('woff'),  
url('Roboto-Regular-webfont.ttf') format('truetype'),  
url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');  
font-weight:normal;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-Italic-webfont.eot');  
src:url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Italic-webfont.woff') format('woff'),  
url('Roboto-Italic-webfont.ttf') format('truetype'),  
url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');  
font-weight:normal;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-Bold-webfont.eot');  
src:url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Bold-webfont.woff') format('woff'),  
url('Roboto-Bold-webfont.ttf') format('truetype'),  
url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');  
font-weight:bold;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-BoldItalic-webfont.eot');  
src:url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-BoldItalic-webfont.woff') format('woff'),  
url('Roboto-BoldItalic-webfont.ttf') format('truetype'),  
url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');  
font-weight:bold;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-Thin-webfont.eot');  
src:url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Thin-webfont.woff') format('woff'),  
url('Roboto-Thin-webfont.ttf') format('truetype'),  
url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');  
font-weight:200;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-ThinItalic-webfont.eot');  
src:url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-ThinItalic-webfont.woff') format('woff'),  
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),  
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg');(sotto la Licenza Apache Software).   
font-weight:200;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-Light-webfont.eot');  
src:url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Light-webfont.woff') format('woff'),  
url('Roboto-Light-webfont.ttf') format('truetype'),  
url('Roboto-Light-webfont.svg#RobotoLight') format('svg');  
font-weight:100;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-LightItalic-webfont.eot');  
src:url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-LightItalic-webfont.woff') format('woff'),  
url('Roboto-LightItalic-webfont.ttf') format('truetype'),  
url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');  
font-weight:100;  
font-style:italic;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-Medium-webfont.eot');  
src:url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-Medium-webfont.woff') format('woff'),  
url('Roboto-Medium-webfont.ttf') format('truetype'),  
url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');  
font-weight:300;  
font-style:normal;  
}  
  
@font-face{  
font-family:'Roboto';  
src:url('Roboto-MediumItalic-webfont.eot');  
src:url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),  
url('Roboto-MediumItalic-webfont.woff') format('woff'),  
url('Roboto-MediumItalic-webfont.ttf') format('truetype'),  
url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');  
font-weight:300;  
font-style:italic;  
}

1. Assicurati di cambiare il “src” per puntare al percorso della cartella dei font.

2. Usa la sintassi font-family:"Roboto"; per visualizzare il font Roboto sulla tua pagina web.

Se hai problemi a far visualizzare correttamente Roboto, Google ha una guida rapida che può aiutarti.

Domande Frequenti

Esiste una versione serif di Roboto?

Sì. All’inizio del 2022, Google Fonts ha aggiunto Roboto Serif alla sua libreria. È gratuito da scaricare e puoi installarlo proprio come Roboto. Usali entrambi sul tuo sistema se lo desideri.

Devo mai pagare per usare Roboto o altri font Google?

No. Sono completamente open source. Secondo Google, sei libero di usarli sia in progetti personali che commerciali, completamente gratuitamente. Se sei uno sviluppatore di app Android, aggiungi i font alle tue app.

Posso installare altri font Google contemporaneamente?

Puoi scaricare e utilizzare quanti più font Google desideri. Al momento della scrittura, c’erano oltre 1.500 famiglie di font tra cui scegliere. Questi sono disponibili in varietà serif, sans-serif, display, scrittura a mano e mono.

Come posso sapere se un’immagine o un sito sta usando Roboto?

Se stai ammirando il font su un sito web o in un’immagine, ci sono diversi strumenti utili per aiutarti a identificare il font. Questo ti dirà rapidamente se l’immagine o il sito sta usando Roboto o un altro font.

Crediti immagine: Google Fonts. Tutti gli screenshot di Crystal Crowder.