• Inicio
    • Recursos
  • Marcado HTML
  • Estilos CSS
  • JavaScript
  • Publicación
  • Prácticas
    • 1ª Evaluación
    • 2ª Evaluación
    • 3ª Evaluación
 
 
Curso 2020/2021 | 2º BACHILLERATO

 Tecnologías de la Información y la Comunicación | TIC-II 

icon html5
icon css3
icon css3


Tipografías Web

Algunas veces nos encontramos con un tipo de fuente que nos resulta bonita, si la utilizamos en nuestro sitio Web probablemente sólo nosotros la vemos tal cual (debido a que sólo está en nuestro ordenador por haber sido instalada por alguno de los programas que tenemos).

Es decir, la tipografía de una página web se ve tal y como es si dicha fuente está instalada en el el ordenador del usuario que está visitando la página.

Puesto que no todas las fuentes están disponibles en todos los ordenadores (hay miles de fuentes, y la mayoría no son gratuitas), CSS nos ofrece un mecanismo para utilizar fuentes alternativas: se indica primero la fuente deseada y a continuación todas las que puedan sustituir a la primera, si ésta no estuviera disponible en nuestro PC; la lista debería terminar con el nombre de una familia de fuente (W3C define cinco familias: serif, sans-serif, monospace, cursive y fantasy).

Hay una lista de tipografías estándares que los navegadores más polulares saben interpretar, pero... ¿y el resto de tipografías, las podemos utilizar?. La respuesta es sí, salvando dos inconvenientes: técnico y de copyright; vamos a ver como resolver el primero, el segundo se explica por sí solo.

Desde hace un tiempo existen varias alternativas para poder emplear tipografía "no estandar" utilizando la propiedad @font-face de CSS. No obstante la manera, más rápida y fácil, de utilizar fuentes distintas a las que los navegadores reconocen por defecto es usar la API de Google Font.

La API de Google Font

En Google Font podemos elegir entre más de 800 tipos de letra, y algunos bastante interesantes. Para utilizar una de estas fuentes podemos utilizar 2 métodos:

Método 1: (recomendado)

Añadiendo esta línea dentro del elemento head de nuestro archivo HTML:


<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

Evidentemente cambiaremos "Pacifico" por el nombre de la tipografía que deseamos utilizar (estos nombres aparecen en la página de Google Font). Si queremos usar más de un tipo lo indicamos como parametros separados por la barra vertical |.

Método 2:

Añadir esta línea al comenzar nuestro archivo .css


@import url('https://fonts.googleapis.com/css?family=Pacifico');

Se acual sea el método utilizado, después devemos "activar" la tipografía instalada en alguna regla CSS de nuestro archivo de estilos, aquí tienes un ejemplo para los encabezados de nivel 1:


h1 {font-family: Pacifico;}

Es conveniente señalar que si el nombre de la fuente se compone de más de una palabra, es necesario escribir el nombre de la fuente entre comillas, por ejemplo esta tipografía: "PT Sans Narrow".

 

  Ejemplo de tipografías

  Ejemplo de tipografías

See the Pen Tipografía by Jesús Plaza M. (@3con14) on CodePen.

 

  • Anterior
  • Siguiente

CSS

  • CSS básico responsive para tareas
  • Normalizar CSS
  • Fondos de página web
  • Tipografías Web
  • El primer Layout
  • Responsive Web Design
  • Movimientos en CSS

Teoría

Guías completas

Guías completas

  • LibrosWeb HTML
  • Vocabulario HTML
  • Guía HTML5 y HTML
  • Guía CSS 2.1 y CSS3
  • Guía JavaScript
  • HTML Reference
  • CSS Reference
Cheat Sheets

Cheat Sheets

html css js

  • HTML CheatSheet
  • CSS CheatSheet
  • JS CheatSheet

Herramientas

Para Código

Para Código

  • Sublime-Text | Ext.
  • Visual Studio Code | Ext ≡
  • Preprocesador: Prepros
  • Editor online: CodePen
Otras ...

Otras ...

  • Cliente - FTP: Filezilla
  • Capturador: PicPick
  • Visor: Sumatra-PDF
  • Acrobat Reader - PDF
  • Compresor: 7zip
  • Reproductor: VLC
  • MathJax - AsciiMath
Portables

Portables

  • Visual Studio Code [Ext]
  • Sublime Text
  • Sumatra PDF
  • Chrome Portable
  • Opera Portable
  • FireFox Portable
Código BASE

Código BASE

  • Template: base1_tareas
  • Template: base2_layout
  • Template: base3_menu
  • Imágenes: HDWallpapers
Hosting

Hosting

  • DriveToWeb [•]
  • Ejemplo

(cc) 3con14, esta obra está bajo licencia
Creative Commons Atribución-No Comercial-Compartir Igual 4.0

  • Inicio
    • Recursos
  • Marcado HTML
  • Estilos CSS
  • JavaScript
  • Publicación
  • Prácticas
    • 1ª Evaluación
    • 2ª Evaluación
    • 3ª Evaluación