Clase 09 · Añadir fuentes

01 · Google Fonts

Fuentes Google Fonts

Google Fonts es un catálogo gratuito de tipografías: fonts.google.com. Buscamos y elegimos la que nos guste, y una vez seleccionada pulsamos en Get font.

Catálogo de Google Fonts

Página principal de Google Fonts con el buscador, los filtros a la izquierda y una lista de tipografías.

Una vez seleccionada la fuente: Get font

Página de la fuente Creepster en Google Fonts con el botón azul Get font arriba a la derecha.

01 · Google Fonts

Obtener el código

Ahora pulsamos en Get embed code. Google nos da dos bloques de código:

Get embed code

Los dos códigos: 1 (head), 1b (@import) y 2 (clase CSS)

Código de inserción de Creepster: las etiquetas link marcadas con 1 y la clase CSS marcada con 2; la opción @import marcada como 1b.

1 · Copiamos este código en el <head>: nos vincula a la página de Google donde está almacenada la tipografía.
1b · Si escogemos la opción @import, el código que genera lo deberemos poner en nuestro CSS.
2 · Copiamos este código y generamos una clase CSS con los valores indicados para utilizar la tipografía.

01 · Google Fonts

Fuentes con diferentes grosores y estilos

Si elegimos una tipografía con distintos grosores o estilos, la configuramos desde el panel izquierdo, en la opción One value.

Full axis y One value

Full axis: nos muestra todas las opciones de la fuente. Si queremos importar todos los estilos a nuestra web, copiamos el código del <head> con la opción Full axis seleccionada.
One value: nos deja ver el código que se genera para cada grosor o estilo; podemos ayudarnos de él para crear nuestros estilos.

Solo cambiamos font-weight

Clase CSS roboto-slab con la línea font-weight resaltada y los botones de grosor de Thin 100 a Black 900.

Solo cambiaremos el valor de font-weight para definir el grosor; los grosores disponibles vienen dados por cada tipografía.

02 · Ejemplos de uso

Ejemplo de uso 1: <link>

El código de Google va en el <head> de nuestro HTML, y la clase con la tipografía en nuestro CSS.

Html

<head>

<link rel="stylesheet" href="tipografia.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,
wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,
700;1,900&display=swap" rel="stylesheet">

    <title>Document</title>
</head>

<body>
    <div>
        <h1 class="mi-tipografia">Título</h1>
    </div>

Css · tipografia.css

.mi-tipografia{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

El <link> a tipografia.css enlaza nuestra hoja de estilos.
Los tres <link> de Google (los dos preconnect y el stylesheet) traen la tipografía desde los servidores de Google.
La clase .mi-tipografia del CSS se aplica al título con class="mi-tipografia".

02 · Ejemplos de uso

Ejemplo de uso 2: @import

Con la opción @import, el código de Google va en nuestro CSS y el <head> solo enlaza la hoja de estilos.

Html

<head>
    <link rel="stylesheet" href="tipografia.css">
    <title>Document</title>
</head>

<body>
    <div>
        <h1 class="mi-tipografia">Título</h1>
    </div>

Css · tipografia.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital...');

.mi-tipografia{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

El @import debe ir siempre al principio del archivo CSS, antes del resto de reglas. En la diapositiva la URL aparece abreviada con «...».

03 · Fuentes locales

Añadir fuentes locales

Podemos añadir tipografías que no sean de Google, desde nuestro ordenador o descargándolas. Estas tipografías normalmente tienen extensión .ttf o .woff.

Descargar tipografías desde: dafont.com

03 · Fuentes locales

@font-face

Para llamar a una tipografía local usamos, dentro de nuestro archivo CSS, la regla @font-face.

CSS

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

font-family hace referencia al nombre que le damos a la tipografía. Es el nombre que deberemos utilizar luego cuando creemos una clase CSS para usar esta fuente.
src es la ruta donde está almacenada la tipografía, como cuando llamamos a una imagen.

03 · Fuentes locales

@font-face: otros parámetros

Estos parámetros dependerán siempre de si la tipografía tiene esas opciones.

Propiedad	Valores
`font-stretch`	normal · condensed · ultra-condensed · extra-condensed · semi-condensed · expanded · semi-expanded · extra-expanded · ultra-expanded
`font-style`	normal · italic · oblique
`font-weight`	normal · bold · 100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900

Si instalamos una tipografía que no tiene cursiva, aunque pongamos font-style: italic; no funcionará. Referencia: w3schools · @font-face.

03 · Fuentes locales

Ejemplo tipografía local: @font-face

Html

<head>
    <link rel="stylesheet" href="tipografia.css">
    <title>Document</title>
</head>

<body>
    <div>
        <h1 class="mi-tipografia">Título</h1>
    </div>

Css · tipografia.css

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

.mi-tipografia{
    font-family: "papyrus";
    font-size:24px;
}

La ruta font/papyrus.ttf supone una carpeta font junto al CSS con el archivo de la tipografía dentro. El nombre papyrus de font-family es el mismo que se usa después en .mi-tipografia.

04 · Text-decoration

Text-decoration

Añadimos estilos al texto. text-decoration funciona como border: tiene 3 valores que podemos definir juntos o por separado.

Los tres valores

text-decoration-color: color;
text-decoration-line: none | underline | overline | line-through;
text-decoration-style: solid | double | dotted | dashed | wavy;

Definiendo los 3 valores a la vez

text-decoration: underline dotted green;

Resultado

texto prueba 3

Si definimos solo text-decoration-line sin ningún otro parámetro, coge por defecto solid y black: text-decoration: underline;. Referencia: w3schools · text-decoration.

04 · Text-decoration

Line y style

Line es la posición de la línea y style su estilo.

text-decoration-line y text-decoration-style

underline overline line-through

Line (posición de la línea)

solid underline double underline dotted underline dashed underline wavy underline

Style (estilo de la línea)

04 · Text-decoration

Modificar text-decoration

Tenemos 3 opciones para modificar text-decoration.

CSS

text-underline-position: auto | under;
text-underline-offset: 10px;        /* Separación de la línea respecto al texto */
text-decoration-thickness: 6px;     /* Grosor de la línea */

Resultado

underline position under underline position auto

text-underline-position

offset 10px offset 20px

text-underline-offset

thickness 10px thickness 3px

text-decoration-thickness

05 · Otras propiedades

Text-shadow

Otras propiedades de esta parte: text-shadow, box-shadow, text-transform, line-height, letter-spacing y text-orientation. Empezamos con text-shadow: añadimos sombra al texto.

Offset-x: desplazamiento horizontal (eje X).
Offset-y: desplazamiento vertical (eje Y).
Blur-radius: desenfoque.
Color: color.

CSS

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

Resultado

Sombra

1px 1px 2px black

Sombra

#fc0 1px 0 10px

Sombra

5px 5px #558abb

Sombra

white 2px 5px

Sombra

5px 10px

Referencia: MDN · text-shadow.

05 · Otras propiedades

Box-shadow

Añadimos sombra a los contenedores.

Offset-x: desplazamiento horizontal (eje X).
Offset-y: desplazamiento vertical (eje Y).
Blur-radius: desenfoque.
Spread-radius: crecimiento de la sombra.
Color: color.

CSS

/* Keyword values */
box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

Resultado

none

60px -16px teal

10px 5px 5px black

2px 2px 2px 1px rgba(0, 0, 0, 0.2)

inset 5em 1em gold

Referencia: MDN · box-shadow.

05 · Otras propiedades

Text-transform y line-height

Text-transform: podemos pasar todo nuestro texto a mayúscula, minúscula o capitalizar el texto.

CSS

text-transform: capitalize | uppercase | lowercase

Resultado

edición web con css

capitalize

edición web con css

uppercase

EDICIÓN WEB CON CSS

lowercase

Line-height: interlineado. Podemos ajustar la altura entre líneas de un párrafo o de un título con varias líneas.

CSS

line-height: 1.6;

Resultado

Un párrafo con varias líneas para ver la separación entre ellas al cambiar el interlineado.

line-height: 1.2

Un párrafo con varias líneas para ver la separación entre ellas al cambiar el interlineado.

line-height: 1.6

Un párrafo con varias líneas para ver la separación entre ellas al cambiar el interlineado.

line-height: 2.2

Se puede utilizar:

Unidades: la unidad que equivale a un interlineado normal es 1.2.
Porcentaje: el % que equivale a un interlineado normal es 100%.

Se pueden utilizar px, pero es menos intuitivo. Referencias: MDN · text-transform y MDN · line-height.

05 · Otras propiedades

Letter-spacing y text-orientation

Letter-spacing: espaciado entre caracteres, se indica en píxeles. El valor por defecto equivale a cero píxeles.

CSS

letter-spacing: 5px;

Resultado

See this paragraph with different letter-spacing. (0px)

See this paragraph with different letter-spacing. (5px)

Text-orientation: podemos cambiar la orientación de la escritura para hacer textos verticales o volteados.

CSS

text-orientation: mixed | upright;

Resultado

Orient the characters!

mixed

Orient the characters!

upright

text-orientation solo tiene efecto sobre texto vertical, por eso en la demo lo combinamos con writing-mode: vertical-rl. Referencias: MDN · letter-spacing y MDN · text-orientation.