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

165

Quiero usar la fuente Roboto de Google en mi sitio web y estoy siguiendo este tutorial:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

He descargado el archivo que tiene una estructura de carpetas como esta:

ingrese la descripción de la imagen aquí

Ahora tengo tres preguntas:

  1. Tengo CSS en mi media/css/main.cssurl. Entonces, ¿dónde necesito poner esa carpeta?
  2. ¿Necesito extraer todo el eot, svg, etc. de todas las subcarpetas y ponerlas en la fontscarpeta?
  3. ¿Necesito crear el archivo css fonts.css e incluirlo en mi archivo de plantilla base?

El ejemplo que usa esto

@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;
}

¿Cómo debería ser mi URL, si quiero tener la estructura dir como:

/media/fonts/roboto

html css fonts usuario26
fuente

Respuestas:

259

Realmente no necesitas hacer nada de esto.

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

La página le dará un <link>elemento para incluir en sus páginas y una lista de font-familyreglas de muestra para usar en su CSS.

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

Sunil Garg
fuente
Gracias por eso, eso fue perfecto. ¿Sabes qué configuración usa Google para sus foonts de playlist en google play store? Quiero tener un estilo exactamente así. Además, no encontré el enlace o el fragmento de código en el enlace. veo las fuentes allí pero no hay código
usuario26
3
¡Lo bueno es que también proporcionan una @importación para MENOS archivos! Sin embargo, probar sin conexión a Internet O problemas de conexión de Google (por ejemplo: China) = NO Fuentes ... También noté que no hay Roboto Black (Roboto Bk) font-family: en realidad solo usan 3 familias de fuentes (Roboto, Roboto Condensed y Roboto Slab) todas las demás variantes Roboto se realizan a través font-styley font-weightcambios de estilo CSS. Entonces, idealmente, después de colocar el Google <link>verifique si las fuentes están realmente allí. De lo contrario, use el suyo (por cierto, cargar todos los archivos de una familia de fuentes normalmente no supera los 0.5 MB).
Brazo
77
@ user26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>Esto carga todos los estilos de una sola familia de fuentes: Roboto. Sin embargo, si necesita una familia de fuentes que no está en Google Fonts (como Roboto Black ), necesita los archivos en sus carpetas y copie el código de ejemplo que nos mostró en su pregunta a su main.css (como esto @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.o lo que sugerí en mi respuesta).
Brazo
14
-1 para Using Google's fonts this way guaranties availability. Nada "garantiza la disponibilidad", mucho menos las fuentes de Google. Resulta que soy una de las más de mil millones de personas para quienes el uso de CDN de Google significa que toneladas de sitios web no se cargan correctamente, o en absoluto. No le digo a nadie qué hacer, pero no creo que el CDN de Google sea una solución perfecta.
Nateowami
1
-1. Como mencionó @Nateowami, confía en los servidores de Google (que pueden estar bloqueados en ciertos países), es malo para la privacidad y el rendimiento podría ser mejor si aloja sus fuentes en un CDN usted mismo. Es más trabajo, pero ese es tu trabajo, ¿no?
Robin Métral
72

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

  1. Los servicios de alojamiento de fuentes como Typekit, Fonts.com, Fontdeck, etc., proporcionan una interfaz fácil para que los diseñadores administren las fuentes compradas y generan 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 utilizado por Google y Typekit (es decir, el cargador WebFont) proporcionan clases CSS y devoluciones de llamada para ayudar a administrar el FOUT que puede ocurrir, o los tiempos de espera de respuesta al descargar la fuente.

    <head>
      <!-- get the required files from 3rd party sources -->
      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

      <!-- use the font -->
      <style>
        body {
          font-family: 'Roboto', sans-serif;
          font-size: 48px;
        }
      </style>
    </head>
  1. 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 su tamaño de archivo. Luego, @font-facese usa una implementación de navegador cruzado de la propiedad CSS estándar para habilitar las fuentes.

Este enfoque puede proporcionar un mejor rendimiento de carga ya que tiene un control más granular sobre los caracteres a incluir 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 los servicios de alojamiento de fuentes junto con la declaración @ font-face proporciona 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 firma de Google ahora es de código abierto

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

Ashesh Kumar Singh
fuente
17

Publicación anterior, 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;
}
rocoso
fuente
8
Su solución es un anti-patrón de rendimiento. El uso de una etiqueta de enlace en su marcado da como resultado una descarga más rápida del archivo CSS de Google en comparación con @import; el navegador solo descubre la referencia de recursos anteriormente en general y en particular debido al precargador (mientras analiza el HTML versus primero analiza el HTML, luego descubre su archivo CSS, luego lo descarga, luego analiza y descubre el @import, luego descargue la hoja de estilo importada).
Radko Dinev
3
No necesariamente. Usando Webpack y complementos, todo esto se integrará en su compilación de distribución.
Spock
6

El se srcrefiere directamente a los archivos de fuente, por lo tanto, si los coloca todos en/media/fonts/roboto , debería referirse a ellos en su main.css de esta manera: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

El ..va una carpeta hacia arriba, lo que significa que se está refiriendo a la mediacarpeta si la main.css se encuentra en la /media/csscarpeta.

Debe usar ../fonts/roboto/todas las referencias de URL en el CSS (y asegúrese de que los archivos estén en esta carpeta y no en subdirectorios, como roboto_black_macroman).

Básicamente (respondiendo a sus preguntas):

Tengo css en mi media / css / main.css url. Entonces, ¿dónde necesito poner esa carpeta?

Puede dejarlo allí, pero asegúrese de usar src: url('../fonts/roboto/

¿Debo extraer todo el eot, svg, etc. de todas las subcarpetas y ponerlas en la carpeta de fuentes?

Si desea hacer referencia a esos archivos directamente (sin colocar los subdirectorios en su código CSS), entonces sí.

¿Necesito crear el archivo css fonts.css e incluirlo en mi archivo de plantilla base

No necesariamente, solo puede incluir ese código en su main.css. Pero es una buena práctica separar las fuentes de su CSS personalizado.

Aquí hay un ejemplo de un archivo de fuentes MENOS / CSS que uso:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(En este ejemplo, solo estoy usando el ttf) Luego lo uso @import "fonts";en mi archivo main.less ( menos es un preprocesador CSS, hace que este tipo de cosas sea un poco más fácil )

Brazo
fuente
2

Esto es lo que hice para obtener los archivos woff2 que quería para la implementación estática sin tener que usar un CDN

TEMPORALMENTE agregue el cdn para que el css cargue las fuentes roboto en index.html y deje que se cargue la página. desde las herramientas de desarrollo de Google mire las fuentes y expanda el nodo fonts.googleapis.com y vea el contenido del archivo css? family = Roboto: 300,400,500 & display = swap y copie el contenido. Ponga este contenido en un archivo CSS en su directorio de activos.

En el archivo CSS, elimine todas las cosas griegas, crílticas y vietnamitas.

Mire las líneas en este archivo CSS que son similares a:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

copie la dirección del enlace y péguela en su navegador, descargará la fuente. Coloque esta fuente en su carpeta de activos y cámbiele el nombre aquí, así como en el archivo css. Haga esto a los otros enlaces, tenía 6 archivos únicos woff2.

Seguí los mismos pasos para los iconos de materiales.

Ahora regrese y comente la línea donde llama al cdn y, en su lugar, use el nuevo archivo css que creó.

Helzgate
fuente
1

Prueba esto

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
Desarrollador principal
fuente
1

Use / fonts / o / font / antes del nombre del tipo de fuente en su hoja de estilo CSS. Me enfrento a este error, pero después de eso funciona bien.

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
Mohammed Javed
fuente
1

Para el sitio web, puede usar la fuente 'Roboto' de la siguiente manera:

Si ha creado un archivo css separado, coloque la línea de abajo en la parte superior del archivo css como:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

O si no desea crear un archivo separado, agregue la línea anterior en el medio <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

luego:

html, body {
    font-family: 'Roboto', sans-serif;
}
Señor don nadie
fuente
0

¿Leyó el How_To_Use_Webfonts.html que está en ese archivo zip?

Después de leer eso, parece que cada subcarpeta de fuentes tiene un .css ya creado que puede usar al incluir esto:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
Barry Colebank Jr
fuente
0

es fácil

cada carpeta de las que descargaste tiene un tipo diferente de fuente roboto, lo que significa que son fuentes diferentes

ejemplo: "roboto_regular_macroman"

para usar cualquiera de ellos:

1- extrae la carpeta de la fuente que deseas usar

2- cárgalo cerca del archivo css

3- ahora inclúyelo en el archivo css

ejemplo para incluir la fuente que llamó "roboto_regular_macroman":

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

mire la ruta de los archivos, aquí cargué la carpeta llamada "roboto_regular_macroman" en la misma carpeta donde está el CSS

entonces ahora simplemente puede usar la fuente escribiendo font-family: 'Roboto';

Omar Moustafa
fuente
0

En realidad es bastante simple. Vaya a la fuente en el sitio web de Google y agregue su enlace al encabezado de cada página que desee incluir la fuente.


fuente
0

Pasé una hora arreglando los problemas de fuente.

Respuesta relacionada: a continuación se muestra el React.jssitio web:

  1. Instale el módulo npm:

    npm install --save typeface-roboto-mono

  2. importar en el archivo .js que desea utilizar
    uno de los siguientes :

    import "typeface-roboto-mono"; // si se admite la importación
    require('typeface-roboto-mono') // si no se admite la importación

  3. Para el elemento, puede usar
    uno de los siguientes:

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

Espero que ayude.

Manohar Reddy Poreddy
fuente
0

Con css:

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* etc, etc. */

Con sass:

  @font-face
    font-family: 'Roboto'
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype')
    font-weight: normal
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype')
    font-weight: bold
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype')
    font-weight: normal
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype')
    font-weight: bold
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype')
    font-weight: 300
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype')
    font-weight: 300
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype')
    font-weight: 500
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype')
    font-weight: 500
    font-style: italic

/* Roboto-Regular.ttf       400 */
/* Roboto-Bold.ttf          700 */
/* Roboto-Italic.ttf        400 */
/* Roboto-BoldItalic.ttf    700 */
/* Roboto-Medium.ttf        500 */
/* Roboto-MediumItalic.ttf  500 */
/* Roboto-Light.ttf         300 */
/* Roboto-LightItalic.ttf   300 */

/* https://fonts.google.com/specimen/Roboto#standard-styles */
intika
fuente