¿Cómo puedo usar la fuente Roboto de Google en un sitio web?

Sé libre de divulgar nuestra página y códigos con tus amigos, necesitamos tu ayuda para aumentar nuestra comunidad.

Solución:

Realmente no necesitas hacer nada de esto.

• Ir a la página de fuentes web de Google
• buscar Roboto en el cuadro de búsqueda en la parte superior derecha
• Seleccione las variantes de la fuente que desea utilizar
• haga clic en ‘Seleccionar esta fuente’ en la parte superior y elija los pesos y conjuntos de caracteres que necesita.

La página le dará una elemento para incluir en sus páginas, y una lista de muestra font-family reglas para usar en su CSS.

El uso de las fuentes de Google de esta manera garantiza la disponibilidad y reduce el ancho de banda de su propio servidor.

Hay DOS enfoques que puede tomar para usar fuentes web con licencia en sus páginas:

1. Los servicios de hospedaje de fuentes como Typekit, Fonts.com, Fontdeck, etc., brindan una interfaz fácil para que los diseñadores administren las fuentes compradas y generen un enlace a un archivo CSS o JavaScript dinámico que sirve la fuente. Google incluso proporciona este servicio de forma gratuita (aquí hay un ejemplo de la fuente Roboto que solicitó). Typekit es el único servicio que proporciona sugerencias de fuentes adicionales para garantizar que las fuentes ocupen los mismos píxeles en todos los navegadores.

Los cargadores de fuentes JS como el que usan Google y Typekit (es decir, el cargador WebFont) brindan clases CSS y devoluciones de llamada para ayudar a administrar el FUERA que puede ocurrir, o tiempos de espera de respuesta al descargar la fuente.

2. El enfoque de bricolaje implica obtener una fuente con licencia para uso web y (opcionalmente) usar una herramienta como el generador de FontSquirrel (o algún software) para optimizar el tamaño del archivo. Luego, una implementación de navegador cruzado del estándar @font-face La propiedad CSS se usa para habilitar las fuentes.

Este enfoque puede proporcionar un mejor rendimiento de carga, ya que tiene un control más granular sobre los caracteres que se incluirán y, por lo tanto, el tamaño del archivo.

    /* get the required local files */
    @font-face 
      font-family: 'Roboto';
      src: url('roboto.eot'); /* IE9 Compat Modes */
      src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('roboto.woff') format('woff'), /* Modern Browsers */
      url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
    
    
    /* use the font */
    body 
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    

Larga historia corta:

El uso de servicios de alojamiento de fuentes junto con la declaración @font-face brinda el mejor resultado con respecto al rendimiento general, la compatibilidad y la disponibilidad.

Fuente: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

---

ACTUALIZAR

Roboto: la fuente de la firma de Google ahora es de código abierto

Ahora puede generar manualmente las fuentes Roboto siguiendo las instrucciones que se pueden encontrar aquí.

Publicación antigua, lo sé.

Esto también es posible usando CSS@import url:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * 
  font-family: 'Roboto', sans-serif;

Si te ha sido de ayuda nuestro post, sería de mucha ayuda si lo compartieras con el resto seniors de esta manera nos ayudas a difundir esta información.

---

---

Utiliza Nuestro Buscador