Como Instalar a Fonte Google Roboto no Windows, Mac e Linux

A fonte Roboto é uma tipografia sans-serif criada pelo Google. É elegante e se apresenta bem em telas de alta resolução, como os telefones Android. Assim, é uma escolha perfeita para muitas aplicações. Além disso, aprender a instalar a fonte Google Roboto no Windows, macOS e Linux é muito fácil.

Índice

• Baixando a Fonte Google Roboto
• Instalar a Fonte Google Roboto no Windows
• Instalar a Fonte Google Roboto no macOS
• Instalar a Fonte Google Roboto no Linux
• Usando a Fonte Google Roboto em um Site
• Perguntas Frequentes

Baixando a Fonte Google Roboto

Independentemente da sua plataforma, você primeiro precisa baixar o pacote da fonte Roboto. Para fazer isso, vá até o site da fonte Roboto. A maneira mais simples de baixar toda a família de fontes é clicar no botão “Baixar Família” no canto superior direito.

Ele terminará como um arquivo ZIP no seu computador, momento em que você poderá instalá-lo no seu sistema operacional.

Se suas fontes aparecerem pixeladas ou corrompidas de alguma forma, tente estas etapas de solução de problemas para corrigir o problema.

A boa notícia é que, independentemente da plataforma, você pode instalar a fonte Roboto em questão de cliques.

Instalar a Fonte Google Roboto no Windows

Siga estas etapas para instalar a fonte Roboto no Windows:

1. Descompacte a pasta da fonte Roboto. Clique com o botão direito e selecione “Extrair Tudo.”

1. Abra o menu “Iniciar” e selecione “Configurações.”

1. Clique em “Personalização” e escolha “Fontes” na lista de configurações à direita.

1. Arraste as fontes extraídas para a janela do instalador. Após alguns segundos, a fonte Google Roboto será instalada no Windows. Você pode selecioná-la como qualquer outra fonte dentro das aplicações.

Para instalar outros tipos de fontes ou apenas ver o que está disponível no Windows, confira nosso guia para instalar e gerenciar fontes no Windows.

Instalar a Fonte Google Roboto no macOS

Siga estas etapas para instalar a fonte Roboto no Mac:

1. Extraia o arquivo ZIP. Clique duas vezes ou clique com o botão direito e selecione “Abrir.”
2. Selecione todas as fontes dentro da pasta (pulando LICENSE.txt), clique com o botão direito e selecione “Abrir Com -> Livro de Fontes” no menu de contexto.

1. Isso as carregará no Livro de Fontes e as tornará disponíveis para uso em suas aplicações.

Note que você também pode clicar duas vezes nos arquivos de fonte individuais para carregá-los no Livro de Fontes.

Instalar a Fonte Google Roboto no Linux

1. Extraia os arquivos compactados com o comando unzip.
2. Abra sua pasta inicial e habilite a opção de visualizar arquivos/pastas ocultos. Você pode pressionar Ctrl + H ou clicar no menu “Visualizar” e escolher “Mostrar arquivos ocultos.”
3. Localize a pasta “.fonts”. Se ela não existir, crie-a.
4. Mova a pasta da fonte Roboto para esta pasta “.fonts”.

Alternativamente, utilize o programa Gerenciador de Fontes para gerenciar suas fontes.

1. Instale o Gerenciador de Fontes a partir do Centro de Software ou repositório.

1. Uma vez instalado, abra este e o aplicativo Fontes (novamente, a partir da Barra de Pesquisa).

1. Dentro do Gerenciador de Fontes, certifique-se de que você está na aba Gerenciar e clique no ícone de Mais (+).

1. Navegue até sua pasta de fontes extraídas e adicione-as conforme necessário.

Uma vez que você reiniciar os aplicativos que está usando, você deverá ver a fonte Roboto.

Embora o Linux não deva ter nenhum problema com Roboto, algumas distribuições, como o Ubuntu, podem ter dificuldades em reconhecer certas fontes. Se você tiver problemas com Roboto ou outras fontes no Ubuntu, tente convertê-las para o formato de fonte TrueType.

Usando a Fonte Google Roboto em um Site

Se você deseja usar a fonte Roboto em seu site, use a sintaxe CSS3 @font-face para incorporar a fonte externa à sua página da web.

1. Vá até a página da fonte Roboto no FontSquirrel, clique em “Kit de Webfont”, depois escolha seus formatos de fonte preferidos, um subconjunto (se houver) e clique em “Baixar Kit @Font-Face.”

1. Extraia o arquivo compactado para a pasta de fontes do seu site. Abra sua folha de estilo da web e adicione o seguinte código:

@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'),  
src: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'),  
src:url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg');(sob a Licença 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'),  
src: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'),  
src: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'),  
src: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'),  
src:url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');  
font-weight:300;  
font-style:italic;  
}

1. Certifique-se de alterar o “src” para apontar para o caminho da pasta da fonte.

2. Use a sintaxe font-family:"Roboto"; para exibir a fonte Roboto em sua página da web.

Se você tiver algum problema para fazer o Roboto ser exibido corretamente, o Google tem um guia de início rápido que pode ajudar.

Perguntas Frequentes

Existe uma versão serifada do Roboto?

Sim. No início de 2022, as fontes do Google adicionaram o Roboto Serif à sua biblioteca. É gratuito para download, e você pode instalá-lo da mesma forma que o Roboto. Use ambos em seu sistema se desejar.

Eu preciso pagar para usar o Roboto ou outras fontes do Google?

Não. Elas são completamente de código aberto. De acordo com o Google, você está livre para usá-las em projetos pessoais e comerciais, completamente grátis. Se você é um desenvolvedor de aplicativos Android, adicione as fontes aos seus aplicativos.

Posso instalar outras fontes do Google ao mesmo tempo?

Você pode baixar e usar quantas fontes do Google quiser. No momento da escrita, havia mais de 1.500 famílias de fontes para escolher. Estas vêm em variedades serifadas, sans-serif, display, caligrafia e mono.

Como posso saber se uma imagem ou site está usando Roboto?

Se você está admirando a fonte em um site ou em uma imagem, existem várias ferramentas úteis para ajudá-lo a identificar a fonte. Isso rapidamente dirá se a imagem ou o site está usando Roboto ou outra fonte.

Crédito da imagem: Google Fonts. Todas as capturas de tela por Crystal Crowder.