A fonte Roboto é uma fonte sem serifa criada pelo Google que existe desde os dias do Android 4.0 (Ice Cream Sandwich). É uma fonte elegante que funciona bem em telas de alta resolução, como telefones Android.
Roboto contém o conjunto completo de peso da fonte (inclui pesos regulares, negrito, itálico e negrito itálico) e é usado principalmente para aplicativos de sistema e todos os aplicativos do Google.
Se você adora a fonte e deseja usá-la no Windows, Mac, Linux ou até mesmo no seu site, está com sorte. Os desenvolvedores do Google lançaram a fonte Roboto gratuitamente e você pode usá-la sem restrições (de acordo com a Licença de Software Apache).
Veja como instalar o Google Roboto Font em todas as plataformas.
Baixe o Google Roboto
Seja qual for a plataforma em que você estiver, primeiro você precisa fazer o download do pacote de fontes Roboto.
Vou ao Site da fonte Roboto e baixe a fonte (arquivo compactado). Você precisa clicar em “Selecionar esta fonte” e, em seguida, na parte inferior da tela, clicar na guia escura que diz “1 família selecionada”.
Na guia recém-aberta, clique no ícone “Download” para baixar a fonte Roboto como um arquivo zip.
Extraia o arquivo compactado para uma pasta de sua escolha. Abra a pasta e você verá todas as fontes Roboto dentro dela.
Instale a fonte Roboto no Windows 10
Abra a pasta de fontes Roboto. Selecione todas as fontes. Clique com o botão direito do mouse e selecione “Instalar”.
Isso instalará as fontes em sua máquina Windows. Agora você pode usar a fonte Roboto em seus aplicativos.
Instale a fonte Roboto no Linux
Abra sua pasta pessoal e habilite a opção de visualizar arquivos / pastas ocultos. Localize a pasta “.fonts”. Se não existir, crie-o. Em seguida, mova a pasta de fontes Roboto para a pasta “.fonts”.
Reinicie seu LibreOffice, GIMP, Photoshop ou quaisquer aplicativos que você esteja usando. Você deverá ver a fonte Roboto disponível para seleção.
Instale a fonte Roboto no Mac
Semelhante ao Windows. Extraia as fontes, clique duas vezes para instalá-las e elas aparecerão no seu Catálogo de Fontes. Como alternativa, você pode arrastar e soltar todos eles em seu Catálogo de Fontes.
Instale a fonte Roboto em seu site
Se você deseja usar a fonte Roboto em seu site, pode usar a sintaxe CSS3 “@ font-face” para incorporar a fonte externa à sua página.
Vamos para Página de fontes FontSquirrel Roboto, clique em “Webfont Kit”, 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.
É isso aí. Aproveitar!