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

Valora este post

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 del 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 puede utilizarla sin restricciones (bajo la licencia de software de Apache) Así es como se instala la fuente Roboto de Google en todas las plataformas.

Descargar Google Roboto

Cualquiera que sea la plataforma en la que se encuentre, primero debe descargar el paquete de fuentes de Roboto: Vaya al sitio de fuentes de 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». Cómo instalar la fuente Roboto de Google en Windows, Mac y Linux 1

En la pestaña recién abierta, haga clic en el icono «Descargar» para descargar la fuente Roboto como archivo zip. Cómo instalar la fuente Roboto de Google en Windows, Mac y Linux 2

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». Cómo instalar la fuente Roboto de Google en Windows, Mac y Linux 3

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 la página de fuentes de FontSquirrel Roboto, haga clic en «Webfont Kit», luego seleccione sus formatos de fuente preferidos, un subconjunto (si lo hay) y haga clic en «Download @Font-Face Kit». Cómo instalar la fuente Roboto de Google en Windows, Mac y Linux 4Extraiga 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 la fuente, luego puede usar la sintaxis
font-family: "Roboto";

para mostrar la fuente Roboto en su página web. Disfrute!

Posts Relacionados