1
00:00:01,459 --> 00:00:09,820
Vamos ahora a cambiar los estilos tipográficos de nuestra página web y para ello vamos a utilizar los recursos que nos proporciona Google Fonts.

2
00:00:10,640 --> 00:00:27,789
Vamos a ir a la página de Google Fonts y vamos a buscar la tipografía que más nos guste.

3
00:00:27,789 --> 00:00:38,140
Yo voy a utilizar dos. Voy a coger esta que se denomina Rock and Roll One para los títulos.

4
00:00:38,299 --> 00:01:03,460
Entonces, la he seleccionado y voy a buscar otra. Voy a volver a buscar fuentes y voy a buscar otra para el texto en general. Por ejemplo, voy a coger esta y voy a utilizar este estilo que está en italic.

5
00:01:04,319 --> 00:01:15,140
Una vez que hemos seleccionado los estilos que queremos utilizar, tenemos que copiar el código, tenemos que embeber o incrustar el código que nos proporciona.

6
00:01:15,140 --> 00:01:25,459
Una parte del código vamos a incrustarlo, a colocarlo en el head de nuestro documento y otro van a ser las reglas CSS que tendremos que utilizar en la hoja de estilos.

7
00:01:25,459 --> 00:01:56,909
Vamos a copiar primero la parte que queremos incluir en el head de nuestro documento. Después de la llamada a nuestra hoja de estilos, pegamos la llamada a las fuentes de Google, por un lado, y después lo que vamos a hacer es ir a nuestra hoja de estilos y modificar.

8
00:01:56,909 --> 00:02:06,849
vemos que al haber incluido una hoja de estilos, o sea, un enlace a los estilos de las fuentes de Google, nos aparece también en nuestro panel de estilos.

9
00:02:06,969 --> 00:02:14,930
Y vamos a nuestra hoja de estilos y ahora vamos a utilizar la segunda parte del código que nos proporciona Google Fonts.

10
00:02:15,030 --> 00:02:19,349
Aquí vemos que son las reglas para utilizar una u otra tipografía.

11
00:02:19,349 --> 00:02:39,050
Vale, voy a copiar la tipografía rock and roll que la quería utilizar, hemos dicho que la quería utilizar, la voy a utilizar tanto en los enlaces, aquí la vemos, ya la había pegado, la voy a utilizar también en los encabezados,

12
00:02:39,050 --> 00:02:43,169
y también la voy a utilizar, aquí la tengo también

13
00:02:43,169 --> 00:02:47,740
y la voy a utilizar también, aquí ya lo tenía pegado

14
00:02:47,740 --> 00:02:50,080
la voy a utilizar también en los

15
00:02:50,080 --> 00:02:55,379
en estos enlaces que puse en la tabla

16
00:02:55,379 --> 00:03:00,520
entonces, una vez que he cerrado

17
00:03:00,520 --> 00:03:04,740
deberíamos ver que se aplica y así, aquí ya lo observamos

18
00:03:04,740 --> 00:03:08,280
que ha cambiado la tipografía que estamos utilizando

19
00:03:08,280 --> 00:03:15,639
Vale, también he creado el elemento H1 y le he aplicado la tipografía.

20
00:03:15,740 --> 00:03:24,139
Por cierto, voy a cambiar, voy a aprovechar para cambiar el color de los elementos H1

21
00:03:24,139 --> 00:03:50,330
y le vamos a colocar, no me gusta en negro, le vamos a poner el color que hemos utilizado para el...

22
00:03:50,330 --> 00:04:00,750
Ahí lo vemos. Ojo, porque aquí, en el caso del H1, que aparece en el encabezado, el color se solapa con el propio color de fondo y no queda bien.

23
00:04:00,750 --> 00:04:25,920
Entonces, eso también lo tenemos que tener en cuenta y modificarlo incluyendo un selector nuevo, que será un H1 del header, y eso lo dejamos con el color que tenía.

24
00:04:25,920 --> 00:04:32,620
con el color blanco. Ahí está. Vale, pues

25
00:04:32,620 --> 00:04:36,740
hemos comprobado, vamos a verlo también en la vista previa en el navegador

26
00:04:36,740 --> 00:04:40,680
hemos comprobado que ha cambiado la tipografía

27
00:04:40,680 --> 00:04:44,920
y estamos utilizando esta tipografía que queríamos para todos los elementos

28
00:04:44,920 --> 00:04:48,620
que hemos seleccionado. Vamos ahora a cambiar

29
00:04:48,620 --> 00:04:52,920
la tipografía del texto que aparece en la zona central, lo que hemos denominado

30
00:04:52,920 --> 00:04:55,740
lo que es el elemento

31
00:04:55,740 --> 00:05:00,980
article, vamos a copiar la regla CSS

32
00:05:00,980 --> 00:05:04,399
y pues nada, vamos a ir a nuestros estilos CSS

33
00:05:04,399 --> 00:05:08,500
la serif

34
00:05:08,500 --> 00:05:12,959
o sea, que no era exactamente esa

35
00:05:12,959 --> 00:05:16,980
ahora sí, debería cogerla, que es la que estábamos llamando

36
00:05:16,980 --> 00:05:24,110
y es la que debería aparecer, ahí está

37
00:05:24,110 --> 00:05:28,350
pues vemos que hemos modificado el aspecto

38
00:05:28,350 --> 00:05:31,410
de la tipografía de la página utilizando

39
00:05:31,410 --> 00:05:33,129
las fuentes de google