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 muestra bien en pantallas de alta resolución, como los teléfonos Android. Como tal, es una opción perfecta para muchas aplicaciones. Además, aprender a instalar la fuente Google Roboto en Windows, macOS y Linux es muy fácil.

Tabla de Contenidos

• Descargando la fuente Google Roboto
• Instalar la fuente Google Roboto en Windows
• Instalar la fuente Google Roboto en macOS
• Instalar la fuente Google Roboto en Linux
• Usar la fuente Google Roboto en un sitio web
• Preguntas Frecuentes

Descargando la fuente Google Roboto

Independientemente de tu plataforma, primero necesitas descargar el paquete de la fuente Roboto. Para hacer esto, dirígete al sitio de la fuente Roboto. La forma más sencilla de descargar toda la familia de fuentes es hacer clic en el botón “Descargar Familia” en la parte superior derecha.

Terminará como un archivo ZIP en tu computadora, momento en el cual podrás instalarlo en tu sistema operativo.

Si tus fuentes aparecen pixeladas o corruptas de alguna manera, prueba estos pasos de solución de problemas para arreglar el problema.

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

Instalar la fuente Google Roboto en Windows

Sigue estos pasos para instalar la fuente Roboto en Windows:

1. Descomprime la carpeta de la fuente Roboto. Haz clic derecho y selecciona “Extraer todo.”

1. Abre el menú “Inicio” y selecciona “Configuración.”

1. Haz clic en “Personalización” y elige “Fuentes” de la lista de configuraciones a la derecha.

1. Arrastra las fuentes extraídas a la ventana del instalador. Después de unos segundos, la fuente Google Roboto se instalará en Windows. Puedes seleccionarla como cualquier otra fuente dentro de las aplicaciones.

Para instalar otros tipos de fuentes o simplemente ver lo que está disponible en Windows, consulta nuestra guía para instalar y gestionar fuentes en Windows.

Instalar la fuente Google Roboto en macOS

Sigue estos pasos para instalar la fuente Roboto en Mac:

1. Extrae el archivo ZIP. Haz doble clic o haz clic derecho y selecciona “Abrir.”
2. Selecciona todas las fuentes dentro de la carpeta (saltando LICENSE.txt), haz clic derecho y selecciona “Abrir con -> Libro de Fuentes” del menú contextual.

1. Esto las cargará en el Libro de Fuentes y las hará disponibles para su uso en tus aplicaciones.

Ten en cuenta que también puedes hacer doble clic en los archivos de fuente individuales para cargarlos en el Libro de Fuentes.

Instalar la fuente Google Roboto en Linux

1. Extrae los archivos comprimidos con el comando unzip.
2. Abre tu carpeta de inicio y habilita la opción para ver archivos/carpetas ocultos. Puedes presionar Ctrl + H, o hacer clic en el menú “Ver” y elegir “Mostrar archivos ocultos.”
3. Localiza la carpeta “.fonts”. Si no existe, créala.
4. Mueve la carpeta de la fuente Roboto a esta carpeta “.fonts”.

Alternativamente, utiliza el programa Gestor de Fuentes para gestionar tus fuentes.

1. Instala el Gestor de Fuentes desde el Centro de Software o repositorio.

1. Una vez instalado, abre este y la aplicación Fuentes (nuevamente, desde la barra de búsqueda).

1. Dentro del Gestor de Fuentes, asegúrate de estar en la pestaña Administrar y haz clic en el icono de Más (+).

1. Navega a tu carpeta de fuentes extraídas y agrégalas según sea necesario.

Una vez que reinicies las aplicaciones que estás usando, deberías ver la fuente Roboto.

Si bien Linux no debería tener ningún problema con Roboto, algunas distribuciones, como Ubuntu, pueden tener problemas para reconocer ciertas fuentes. Si tienes problemas con Roboto u otras fuentes en Ubuntu, intenta convertirlas al formato de fuente TrueType.

Usar la fuente Google Roboto en un sitio web

Si deseas usar la fuente Roboto en tu sitio web, utiliza la sintaxis CSS3 @font-face para incrustar la fuente externa en tu página web.

1. Ve a la página de la fuente Roboto en FontSquirrel, haz clic en “Kit de Webfont”, luego elige tus formatos de fuente preferidos, un subconjunto (si lo hay) y haz clic en “Descargar Kit @Font-Face.”

1. Extrae el archivo comprimido en la carpeta de fuentes de tu sitio web. Abre tu hoja de estilo web y agrega 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');(bajo la Licencia Apache Software).   
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;  
}

1. Asegúrate de cambiar el “src” para que apunte a la ruta de la carpeta de fuentes.

2. Usa la sintaxis font-family:"Roboto"; para mostrar la fuente Roboto en tu página web.

Si tienes algún problema para que Roboto se muestre correctamente, Google tiene una guía de inicio rápido que puede ayudar.

Preguntas Frecuentes

¿Hay una versión serif de Roboto?

Sí. A principios de 2022, Google Fonts agregó Roboto Serif a su biblioteca. Es gratuita para descargar, y puedes instalarla igual que Roboto. Usa ambas en tu sistema si lo deseas.

¿Alguna vez tengo que pagar para usar Roboto u otras fuentes de Google?

No. Son completamente de código abierto. Según Google, eres libre de usarlas en proyectos personales y comerciales, completamente gratis. Si eres un desarrollador de aplicaciones de Android, agrega las fuentes a tus aplicaciones.

¿Puedo instalar otras fuentes de Google al mismo tiempo?

Puedes descargar y usar tantas fuentes de Google como desees. En el momento de escribir esto, había más de 1,500 familias de fuentes para elegir. Estas vienen en variedades serif, sans-serif, display, escritura a mano y mono.

¿Cómo puedo saber si una imagen o sitio está usando Roboto?

Si estás admirando la fuente en un sitio web o en una imagen, hay varias herramientas útiles para ayudarte a identificar la fuente. Esto te dirá rápidamente si la imagen o el sitio está usando Roboto u otra fuente.

Crédito de la imagen: Google Fonts. Todas las capturas de pantalla por Crystal Crowder.