La fuente Roboto es un tipo de letra sans-serif creado por Google que ha existido desde los días de Android 4.0 (Ice Cream Sandwich). Es una fuente elegante que se reproduce bien en pantallas de alta resolución como los teléfonos Android.
Roboto contiene el conjunto completo de pesos de fuente (incluye pesos regulares, negrita, cursiva y negrita cursiva) y se utiliza principalmente para aplicaciones de sistema y todas las aplicaciones de Google.
Si te gusta la fuente y deseas usarla en Windows, Mac, Linux o incluso en tu sitio web, entonces estás de suerte. Los desarrolladores de Google han lanzado la fuente Roboto de forma gratuita, y usted puede usarla sin restricciones (bajo la licencia de software Apache).
A continuación se explica cómo instalar la fuente Google Roboto en todas las plataformas.
Descargar Google Roboto
Cualquiera que sea la plataforma en la que se encuentre, primero debe descargar el paquete de fuentes Roboto.
Vaya al sitio de fuentes Roboto y descargue la fuente (archivo comprimido). Debe hacer clic en «Seleccionar esta fuente» y, a continuación, en la parte inferior de la pantalla, en la pestaña oscura que dice «1 familia seleccionada».
En la pestaña recién abierta, haga clic en el icono «Descargar» para descargar la fuente Roboto como archivo zip.
Extraiga el archivo comprimido a una carpeta de su elección. Abra la carpeta, y debería ver todas las fuentes de Roboto en su interior.
Instalar la fuente Roboto en Windows 10
Abra la carpeta de fuentes de Roboto. Seleccione todas las fuentes. Haga clic con el botón derecho del ratón y seleccione «Instalar».
Esto instalará las fuentes en su máquina Windows. Ahora puede utilizar la fuente Roboto en sus aplicaciones.
Instalar Roboto Font en Linux
Abra su carpeta de inicio y habilite la opción de ver archivos/carpetas ocultos. Localice la carpeta «.fonts». Si no existe, créalo. A continuación, mueva la carpeta de fuentes de Roboto a esta carpeta «.fonts».
Reinicie LibreOffice, GIMP, Photoshop o cualquier aplicación que esté utilizando. Debería ver la fuente Roboto disponible para la selección.
Instalar la fuente Roboto en Mac
Similar a Windows. Extraiga las fuentes, haga doble clic para instalarlas y aparecerán en su Libro de fuentes. Alternativamente, puede arrastrar y soltar todos ellos a su Libro de fuentes.
Instalar la fuente Roboto en su sitio web
Si desea utilizar la fuente Roboto en su sitio web, puede utilizar la sintaxis CSS3 «@font-face» para incrustar la fuente externa en su página web.
Vaya a Página de fuentes de FontSquirrel Roboto, haga clic en «Webfont Kit», luego elija sus formatos de fuente preferidos, un subconjunto (si lo hay) y haga clic en «Download @Font-Face Kit».
Extraiga el archivo comprimido a la carpeta de fuentes de su sitio web. Abra su hoja de estilo web y añada el siguiente código:
@font-face {
familia de fuentes:'Roboto';
src: url ('Roboto-Regular-webfont.eot');
src: formato url('Roboto-Regular-webfont.eot?#iefix') ('embedded-opentype'),
formato url ('Roboto-Regular-webfont.woff') ('woff'),
url ('Roboto-Regular-webfont.ttf') ('truetype'),
formato url('Roboto-Regular-webfont.svg#RobotoRegular') ('svg');
peso de la fuente: normal;
font-style: normal;
}
@font-face {
familia de fuentes:'Roboto';
src: url ('Roboto-Italic-webfont.eot');
src: formato url ('Roboto-Italic-webfont.eot?#iefix') ('embedded-opentype'),
url ('Roboto-Italic-webfont.woff') formato ('woff'),
url ('Roboto-Italic-webfont.ttf') ('truetype'),
url('Roboto-Italic-webfont.svg#RobotoItalic') ('svg');
peso de la fuente: normal;
estilo fuente: cursiva;
}
@font-face {
familia de fuentes:'Roboto';
src: url ('Roboto-Bold-webfont.eot');
src: formato url('Roboto-Bold-webfont.eot?#iefix') ('embedded-opentype'),
url ('Roboto-Bold-webfont.woff') formato ('woff'),
url ('Roboto-Bold-webfont.ttf') ('truetype'),
url('Roboto-Bold-webfont.svg#RobotoBold') ('svg');
font-weight: negrita;
font-style: normal;
}
@font-face {
familia de fuentes:'Roboto';
src: url ('Roboto-BoldItalic-webfont.eot');
src: formato url('Roboto-BoldItalic-webfont.eot?#iefix') ('embedded-opentype'),
url ('Roboto-BoldItalic-webfont.woff') ('woff'),
url ('Roboto-BoldItalic-webfont.ttf') ('truetype'),
url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic');
font-weight: negrita;
estilo fuente: cursiva;
}
@font-face {
familia de fuentes:'Roboto';
src: url ('Roboto-Thin-webfont.eot');
src: formato url ('Roboto-Thin-webfont.eot?#iefix') ('embedded-opentype'),
formato url ('Roboto-Thin-webfont.woff') ('woff'),
url ('Roboto-Thin-webfont.ttf') ('truetype'),
formato url('Roboto-Thin-webfont.svg#RobotoThin') ('svg');
peso de fuente: 200;
font-style: normal;
}
@font-face {
familia de fuentes:'Roboto';
src: url ('Roboto-ThinItalic-webfont.eot');
src: formato url('Roboto-ThinItalic-webfont.eot?#iefix') ('embedded-opentype'),
url ('Roboto-ThinItalic-webfont.woff') ('woff'),
url ('Roboto-ThinItalic-webfont.ttf') ('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (bajo la licencia del software Apache).
peso de fuente: 200;
estilo fuente: cursiva;
}
@font-face {
familia de fuentes:'Roboto';
src: url ('Roboto-Light-webfont.eot');
src: formato url ('Roboto-Light-webfont.eot?#iefix') ('embedded-opentype'),
url ('Roboto-Light-webfont.woff') formato ('woff'),
url ('Roboto-Light-webfont.ttf') ('truetype'),
url('Roboto-Light-webfont.svg#RobotoLight') ('svg');
peso de fuente: 100;
font-style: normal;
}
@font-face {
familia de fuentes:'Roboto';
src: url ('Roboto-LightItalic-webfont.eot');
src: formato url('Roboto-LightItalic-webfont.eot?#iefix') ('embedded-opentype'),
url ('Roboto-LightItalic-webfont.woff') ('woff'),
url ('Roboto-LightItalic-webfont.ttf') ('truetype'),
url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') ('svg');
peso de fuente: 100;
estilo fuente: cursiva;
}
@font-face {
familia de fuentes:'Roboto';
src: url ('Roboto-Medium-webfont.eot');
src: formato url ('Roboto-Medium-webfont.eot?#iefix') ('embedded-opentype'),
url ('Roboto-Medium-webfont.woff') ('woff'),
url ('Roboto-Medium-webfont.ttf') ('truetype'),
url ("Roboto-Medium-webfont.svg#RobotoMedium") ("svg");
peso de fuente: 300;
font-style: normal;
}
@font-face {
familia de fuentes:'Roboto';
src: url ('Roboto-MediumItalic-webfont.eot');
src: formato url ('Roboto-MediumItalic-webfont.eot?#iefix') ('embedded-opentype'),
url ('Roboto-MediumItalic-webfont.woff') ('woff'),
url ('Roboto-MediumItalic-webfont.ttf') ('truetype'),
url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic');
peso de fuente: 300;
estilo fuente: cursiva;
}
>
Asegúrese de cambiar el «src» para que apunte a la ruta de la carpeta de fuentes.
A continuación, puede utilizar la sintaxis
font-family
