Cómo instalar la fuente Google Roboto en Windows, Mac y Linux

La fuente Roboto es una tipografía sans-serif creada por Google. Es elegante y se reproduce bien en pantallas de alta resolución como los teléfonos Android. Como tal, se adapta perfectamente a muchas aplicaciones. Además, instalar la fuente Roboto en Windows, macOS y Linux es muy sencillo.

En esta publicación, le mostramos cómo instalar la fuente Google Roboto en Windows, macOS, Linux e incluso en su sitio web. ¡Empecemos!

Descarga de la fuente Google Roboto

Independientemente de su plataforma, primero debe descargar el paquete de fuentes Roboto. Para hacer esto, diríjase al Sitio de fuentes roboto. La forma más sencilla de descargar toda la familia de fuentes es hacer clic en el botón «Descargar familia».

Terminará como un archivo ZIP en su computadora, momento en el que podrá instalarlo en su sistema operativo (SO).

Cómo instalar la fuente Google Roboto en Windows, Mac y Linux

La buena noticia es que, independientemente de la plataforma en la que desee instalar la fuente Roboto, será cuestión de clics.

1. Windows 10

Para Windows, primero descomprima la carpeta de fuentes Roboto. A continuación, diríjase al menú Inicio y abra la página Configuración.

Desde aquí, haga clic en la opción Personalización y luego en Fuentes.

A continuación, arrastre las fuentes extraídas a la ventana del instalador. Después de unos segundos, la fuente Google Roboto se instalará en Windows. Puede seleccionarlo como lo haría con cualquier otra fuente desde sus aplicaciones instaladas.

2. macOS

Para Mac, primero extraiga el archivo ZIP. Luego, seleccione todas las fuentes dentro de la carpeta (omitiendo LICENSE.txt), haga clic con el botón derecho y seleccione «Abrir con -> Libro de fuentes» en el menú contextual.

Te puede interesar:

10 formas de abrir el Administrador de tareas en Windows

Esto los cargará en Font Book y los hará disponibles para su uso en sus aplicaciones.

Tenga en cuenta que también puede hacer doble clic en los archivos de fuentes individuales para cargarlos en Font Book.

3. Linux

Abra su carpeta de inicio y habilite la opción para ver archivos / carpetas ocultos. Busque la carpeta «.fonts». Si no existe, créelo. A continuación, mueva la carpeta de fuentes Roboto a esta carpeta «.fonts».

Alternativamente, puede hacer uso del programa Font Manager para administrar sus fuentes.

1. Instale Font Manger desde el Centro de software o el repositorio.

2. Una vez que esté instalado, abra esto y la aplicación Fuentes (nuevamente, desde la barra de búsqueda).

3. En el Administrador de fuentes, asegúrese de estar en la pestaña Administrar y haga clic en el icono Más.

4. Navegue hasta la carpeta de fuentes extraídas y agréguelas según sea necesario.

Una vez que reinicie las aplicaciones que está utilizando, debería ver la fuente Roboto disponible para su selección.

Te puede interesar:

Cómo instalar OpenRazer en Linux

Uso de la fuente Google Roboto en un sitio web

Si desea utilizar la fuente Roboto en su sitio web, puede utilizar CSS3 @font-face sintaxis para incrustar la fuente externa en su página web.

Ve a la Página de fuentes FontSquirrel Roboto, haga clic en «Webfont Kit», luego elija sus formatos de fuente preferidos, un subconjunto (si corresponde) y haga clic en «Descargar @ Font-Face Kit».

Extraiga el archivo comprimido en la carpeta de fuentes de su sitio web. Abra su hoja de estilo web y agregue el siguiente 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;
}

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:"Roboto"; para mostrar la fuente Roboto en su página web.

En conclusión

La fuente Roboto de Google es una alternativa elegante a los pilares como Helvetica y Arial. Además, está a la vanguardia de la iniciativa Material Design de Google. Aun así, Roboto funciona en todo tipo de aplicaciones e instalarlo en Windows, macOS, Linux e incluso en su sitio web es muy sencillo.

Si no es fanático de Roboto, nuestro artículo sobre cómo verificar los diferentes elementos del diseño del sitio puede ayudarlo a aprender qué fuentes se utilizan en un sitio web específico. ¿Utiliza la fuente Roboto en su computadora y, de ser así, con qué propósito? ¡Háganos saber en la sección de comentarios!