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

La fuente Roboto es una fuente de estilo sans-serif creada por Google. Esta fuente apareció desde los primeros días de Android 4.0 (Ice Cream Sandwich) con la ventaja de la elegancia y buena visibilidad en pantallas de alta resolución como los teléfonos Android.

Roboto está lleno de tipos de letra (incluidos regular, negrita, cursiva, cursiva y negrita) y se usa principalmente en aplicaciones del sistema y todas las aplicaciones de Google.

Hay buenas noticias para estos amantes de las fuentes, que los desarrolladores de Google han lanzado la fuente Roboto de forma gratuita y puede usarla sin restricciones (bajo la licencia de software Apache). Así que ahora puede usarla completamente en Windows, MAC, Linux o incluso en su página web.

A continuación, se explica cómo instalar Google Roboto Font en todas las plataformas de sistemas operativos anteriores.

Descarga Google Roboto

Independientemente del sistema operativo que utilice, lo primero y más importante es descargar el conjunto de fuentes Google Roboto en su dispositivo.

Visite la página del sitio de fuentes de Roboto y descargue la fuente (archivo comprimido). Debe hacer clic en ‘Seleccionar esta fuente’ y luego en la parte inferior de la pantalla, hacer clic en la pestaña oscura con el contenido ‘1 familia seleccionada’.

En la pestaña recién abierta, haga clic en el icono “descargar” para descargar la fuente Roboto. El conjunto de fuentes se descargará como un archivo zip.

Extraiga el archivo zip que acaba de descargar en una carpeta arbitraria. Abra esa carpeta y verá todas las fuentes Roboto dentro.

Instale Roboto Font en Windows 10

Abra la carpeta de fuentes Roboto, seleccione todas las fuentes, haga clic con el botón derecho y seleccione ‘Instalar en pc’.

En este punto, la fuente se instalará automáticamente en su sistema después de unos minutos. Ahora puede usar la fuente Roboto en las aplicaciones de la máquina.

Instale Roboto Font en Linux

Abra su directorio de inicio y luego habilite el modo de archivo / carpeta oculto. Busque el directorio ‘.fonts’. Si no, cree un nuevo directorio con la extensión ‘.fonts’. A continuación, mueva la carpeta que contiene la fuente Roboto a la ‘. carpeta de fuentes que acaba de crear.

A continuación, reinicie LibreOffice, GIMP, Photoshop o cualquier aplicación que esté utilizando. Verá que aparece la fuente Roboto para elegir.

Instalar Roboto Font en MAC

Para MAC, de la misma forma que en Windows. Primero descomprime la fuente, haz doble clic para instalar y Roboto aparecerá enFont Book.yours. Además, también puedes arrastrarlos y soltarlos en tu Font Book.

Instale Roboto Font para el sitio web

Si desea utilizar la fuente Roboto en su sitio web, puede utilizar la sintaxis ‘@ font-face’ CSS3. Esta es la forma de incrustar fuentes desde el exterior en la web.

Acceda a la página de fuentes FontSquirrel Roboto, haga clic en “Kit de fuentes web” , luego seleccione los formatos de fuente que desee y haga clic en ‘Descargar @ Font-Face Kit.’

Descomprima el archivo descargado en el directorio de fuentes de su sitio web, luego abra la hoja de estilo en su sitio 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 “src” por la ruta del directorio de fuentes.

A continuación, utiliza la siguiente sintaxis para mostrar la fuente Roboto en su sitio web:

  font-family : "Roboto" ; 

Deseo que instales la fuente que te guste.

Ver más:

1. El sitio web lo ayuda a administrar todas las fuentes instaladas en su computadora
2. 5 sitios web para buscar y descargar fuentes gratuitas
3. Instrucciones para descargar un enorme conjunto de fuentes gratuito de Google, compatible con vietnamita
4. 8 fuentes de “reconocimiento” utilizadas en aplicaciones o sitios web