Antes de explicar este tutorial debes saber que la regla CSS @font-face nos permite determinar una tipografía e importarla para el uso de nuestra página web. Antes de su existencia se podía definir una lista de familias en orden decreciente de prioridad con la regla font-family y se utilizaría la primera que el usuario tuviera instalada en su sistema, con font-face la fuente elegida se puede descargar y utilizar sin necesidad que el usuario disponga de ella con anterioridad.
Esta regla, se asocia a CSS3 aunque ya en tiempo, estaba disponible en CSS2, pero sus limitaciones hicieron que apenas se utilizase, ya que sus formatos no eran los adecuados para los navegadores. Cuando se actualizó CSS3 se aceptaron más formatos, como .eot, .ttf, .otf y .svg, esto hizo posible un soporte más universal entre navegadores.
Receta de cocción:
Ingredientes.
- Sublime Text 3
- Google Chrome
Nivel de dificultad.
Bajo
Tiempo de cocción.
10 minutos
Comenzamos:
1º paso: abre tu editor de código, en él,deberás enlazar tu html con su css respectivo.
2º paso: una vez hecho el primer punto, busca la página “Google fonts”, en ella eliges la tipografía que más te gusta o la que quieres usar para tu página.
3º paso: una vez elegida tu tipografía, te da tres opciones:
a. See all styles
b. Quick-use
c. Pop out
Elige la opción B.
4º paso: cuando pinchas en la opción b, te encuentras con varios puntos, que ahora explicaremos brevemente:
- El punto 1, es para escoger el peso de la letra, puedes elegir varias opciones, pero es aconsejable que solo utilices las que necesites, ya que
el uso de muchos estilos de fuente puede ralentizar tu página web, por lo que sólo selecciona los estilos de fuente que en realidad necesitas en tu página web. - El punto 2, eliges el tipo idioma. Si elige sólo los idiomas que tú necesitas, ayudas a prevenir la lentitud en tu página web.
- El punto 3, puedes hacerlo de tres maneras diferentes:
1.En el apartado “standard”, te da el código que debes pegar en tu html. Muy importante, el lugar donde lo tienes que pegar es en el <head>.
2. En el apartado “@import”, te da diferente código, en este caso, éste lo debes pegar en tu css sin necesidad de hacer el punto que viene a continuación, el 4.
3. En el apartado “Javascript», copia el código y pégalo en el <head> de tu html.
- En el punto 4, el enlace que nos da, lo debes pegar en tu css, llamando a la etiqueta que tú quieras que tenga esa tipografía.
Tutorial muy completo! Buen trabajo, un saludo.
Además de ser un post muy interesante, la imagen principal está genial. ¿Me podrías decir el nombre del banco de donde la has cogido?
Buen tutorial, muchas gracias!!
Buenos días, el nombre del banco de imagen es unsplash.com. Un saludo