A fonte Roboto é uma fonte sem serifa criada pelo Google. É elegante e renderiza bem em telas de alta resolução, como telefones Android. Como tal, é um ajuste perfeito para muitas aplicações. Além disso, instalar a fonte Roboto no Windows, macOS e Linux é muito fácil.
Neste post, mostramos como instalar a fonte Google Roboto no Windows, macOS, Linux e até no seu site. Vamos começar!
Baixando a fonte do Google Roboto
Independentemente da sua plataforma, primeiro você precisa baixar o pacote de fontes Roboto. Para fazer isso, dirija-se ao Site de fontes Roboto. A maneira mais simples de baixar toda a família de fontes é clicar no botão “Download Family”.
Ele terminará como um arquivo ZIP em seu computador, quando você poderá instalá-lo em seu sistema operacional (SO).
Como instalar o Google Roboto Font no Windows, Mac e Linux
A boa notícia é que, independentemente de qual plataforma você deseja instalar a fonte Roboto, levará apenas alguns cliques.
1. Windows 10
Para Windows, primeiro descompacte a pasta de fontes Roboto. Em seguida, vá para o Menu Iniciar e abra a página Configurações.
A partir daqui, clique na opção Personalização e depois em Fontes.
Em seguida, 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á-lo como faria com qualquer outra fonte de seus aplicativos instalados.
2. macOS
Para Mac, primeiro extraia o arquivo ZIP e, em seguida, selecione todas as fontes dentro da pasta (pulando LICENSE.txt), clique com o botão direito do mouse e selecione “Abrir com -> Catálogo de fontes” no menu de contexto.
Isso irá carregá-los no Catálogo de Fontes e disponibilizá-los para uso em seus aplicativos.
Observe que você também pode clicar duas vezes nos arquivos de fonte individuais para carregá-los no Catálogo de fontes.
3. Linux
Abra sua pasta pessoal e ative a opção de visualizar arquivos/pastas ocultas. Localize a pasta “.fonts”. Se não existir, crie-o. Em seguida, mova a pasta de fontes Roboto para esta pasta “.fonts”.
Alternativamente, você pode usar o programa Font Manager para gerenciar suas fontes.
1. Instale o Font Manager a partir do Software Center ou repositório.
2. Uma vez instalado, abra este e o aplicativo Fonts (novamente, na barra de pesquisa).
3. No Gerenciador de Fontes, certifique-se de estar na guia Gerenciar e clique no ícone Mais.
4. Navegue até a pasta de fontes extraídas e adicione-as conforme necessário.
Depois de reiniciar os aplicativos que você está usando, você verá a fonte Roboto disponível para seleção.
Usando a fonte do Google Roboto em um site
Se você deseja usar a fonte Roboto em seu site, você pode usar o CSS3 @font-face sintaxe para incorporar a fonte externa à sua página da web.
Vou ao página de fonte FontSquirrel Roboto, clique em “Webfont Kit” e escolha seus formatos de fonte preferidos, um subconjunto (se houver) e clique em “Baixar @Font-Face Kit”.
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'), 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'); (under the Apache Software License). 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; }
Certifique-se de alterar o “src” para apontar para o caminho da pasta de fontes.
Em seguida, você pode usar a sintaxe font-family:"Roboto"; para exibir a fonte Roboto em sua página da web.
Para concluir
A fonte Roboto do Google é uma alternativa elegante para fontes como Helvetica e Arial. Além disso, está na vanguarda da iniciativa Material Design do Google. Mesmo assim, o Roboto funciona em todos os tipos de aplicativos, e instalá-lo no Windows, macOS, Linux e até no seu site é muito fácil.
Se você não é fã do Roboto, nosso artigo sobre como verificar diferentes elementos de design do site pode ajudá-lo a saber quais fontes são usadas em um site específico. Você usa a fonte Roboto em seu computador e, em caso afirmativo, com que finalidade? Deixe-nos saber na seção de comentários abaixo!
