1
00:00:01,139 --> 00:00:08,820
Vale, ahora vamos a ver cómo añadir fuentes que no estén instaladas normalmente dentro de un navegador, ¿vale?

2
00:00:09,560 --> 00:00:17,199
Esto es interesante o importante porque nos permite un nivel de personalización más alto de nuestra web, ¿vale?

3
00:00:17,559 --> 00:00:22,920
Hasta el punto de poder utilizar fuentes que habitualmente no están instaladas en los puentes, ¿vale?

4
00:00:23,179 --> 00:00:27,980
Para ello vamos a utilizar, vamos a aprovecharnos de la API de Google, ¿vale?

5
00:00:27,980 --> 00:00:34,539
Google tiene ya un repositorio donde hay un montón de fuentes y vamos a aprovecharnos de ello, ¿vale?

6
00:00:35,060 --> 00:00:42,179
Entonces, vamos a partir de nuestro archivo con el que hemos ido trabajando todo el rato, ¿vale?

7
00:00:42,179 --> 00:00:51,039
Lo voy a abrir, ¿vale? Nuestro archivo de fuentes, ¿vale?

8
00:00:52,240 --> 00:00:57,060
Que lo estéis viendo en pantalla, mientras voy viendo el Chrome también para que lo veáis.

9
00:00:57,060 --> 00:01:00,619
aquí está, ya se aparece

10
00:01:00,619 --> 00:01:02,679
¿vale? entonces nos vamos a ir a Google

11
00:01:02,679 --> 00:01:04,180
y en Google vamos a escribir

12
00:01:04,180 --> 00:01:06,159
Google Fonts ¿vale?

13
00:01:09,299 --> 00:01:09,819
Google

14
00:01:09,819 --> 00:01:11,980
vamos aquí

15
00:01:11,980 --> 00:01:15,219
Google Fonts

16
00:01:15,219 --> 00:01:16,780
¿vale? entonces fijaros

17
00:01:16,780 --> 00:01:18,239
vamos a ir a la primera opción que es

18
00:01:18,239 --> 00:01:20,519
fonts.google.com ¿vale?

19
00:01:23,250 --> 00:01:24,890
¿ok? y dentro de estas fuentes

20
00:01:24,890 --> 00:01:26,689
que estáis viendo pues vamos a

21
00:01:26,689 --> 00:01:28,489
buscar una que se llama Orbitron

22
00:01:28,489 --> 00:01:30,730
¿vale? esta que estáis viendo

23
00:01:30,730 --> 00:01:34,530
entonces fijaros como

24
00:01:34,530 --> 00:01:36,769
el utilizar esta fuente es muy sencillo

25
00:01:36,769 --> 00:01:37,750
simplemente

26
00:01:37,750 --> 00:01:41,010
la fuente en concreto nos da varias opciones

27
00:01:41,010 --> 00:01:42,989
aquí estoy viendo que está regular

28
00:01:42,989 --> 00:01:44,750
a 400, medio a 500

29
00:01:44,750 --> 00:01:45,969
semivola a 600

30
00:01:45,969 --> 00:01:49,049
es decir que estos son los grosores de los que hablábamos

31
00:01:49,049 --> 00:01:51,109
antes, yo puedo elegir

32
00:01:51,109 --> 00:01:52,689
todos los estilos

33
00:01:52,689 --> 00:01:54,510
todo este estilo, puedo elegir solo algunos

34
00:01:54,510 --> 00:01:57,349
en mi caso me voy a quedar con el regular

35
00:01:57,349 --> 00:02:19,349
A ver si se puede ver. Me voy a quedar con el regular y con el bot, ¿vale? Y fijaros que me aparecen aquí, en la parte de la derecha, me aparecen los elementos con los que me quedan. Voy a ver si puedo disminuir la ventana para que lo veáis. Creo que ahora se ve, ¿vale?

36
00:02:19,349 --> 00:02:24,270
si, vale, veis aquí

37
00:02:24,270 --> 00:02:26,169
aparece en la parte de la derecha los dos elementos

38
00:02:26,169 --> 00:02:27,650
que se pueden escoger, vale

39
00:02:27,650 --> 00:02:29,969
y voy a

40
00:02:29,969 --> 00:02:31,710
a ver, vale

41
00:02:31,710 --> 00:02:33,949
vale, se está viendo perfecto, entonces

42
00:02:33,949 --> 00:02:35,789
¿qué vamos a hacer?

43
00:02:36,150 --> 00:02:38,270
pues fijaros que nos aparecen dos elementos, vale

44
00:02:38,270 --> 00:02:40,330
en primer lugar vamos a coger

45
00:02:40,330 --> 00:02:42,530
esta zona de link, que estos, fijaros

46
00:02:42,530 --> 00:02:43,650
que es lo mismo

47
00:02:43,650 --> 00:02:46,310
que utilizábamos cuando metíamos hojas de estilo

48
00:02:46,310 --> 00:02:48,330
externa, vale, pues lo vamos a coger

49
00:02:48,330 --> 00:02:50,189
y en nuestro archivo de html

50
00:02:50,189 --> 00:02:54,349
justo debajo antes del style

51
00:02:54,349 --> 00:02:57,770
vamos a poner aquí ese link

52
00:02:57,770 --> 00:03:01,189
y para poder utilizarlo ahora

53
00:03:01,189 --> 00:03:04,030
vamos a modificar por ejemplo

54
00:03:04,030 --> 00:03:07,129
solo los elementos h1 y h2

55
00:03:07,129 --> 00:03:09,349
entonces vamos a copiar todo esto

56
00:03:09,349 --> 00:03:11,550
que es la propiedad de hojas de estilo

57
00:03:11,550 --> 00:03:12,330
la font-family

58
00:03:12,330 --> 00:03:17,990
y fijaros voy a poner h1, h2

59
00:03:17,990 --> 00:03:19,629
para modificar solo esas

60
00:03:19,629 --> 00:03:21,930
las cabeceras

61
00:03:21,930 --> 00:03:23,629
y pongo font-frame

62
00:03:23,629 --> 00:03:25,969
¿vale? y fijaros como

63
00:03:25,969 --> 00:03:27,969
automáticamente ya me

64
00:03:27,969 --> 00:03:30,050
aparece la fuente que acabo

65
00:03:30,050 --> 00:03:31,509
con en la Orbitron ¿vale?

66
00:03:32,250 --> 00:03:33,949
es muy sencillo

67
00:03:33,949 --> 00:03:35,669
aquí tenéis un catálogo de fuentes

68
00:03:35,669 --> 00:03:37,909
muy bestia ¿vale? muy grande

69
00:03:37,909 --> 00:03:39,490
pues simplemente es que busquéis

70
00:03:39,490 --> 00:03:41,789
aquellas que a vosotros os puedan gustar más

71
00:03:41,789 --> 00:03:43,150
o os puedan gustar menos ¿vale?

72
00:03:45,639 --> 00:03:47,039
bueno, pues lo dicho

73
00:03:47,039 --> 00:03:49,340
un saludo

74
00:03:49,680 --> 00:03:50,680
Gracias.