1 00:00:00,350 --> 00:00:05,460 En este video vamos a hablar sobre formas de incluir fuentes personalizadas y usarlas en nuestro éxito para 2 00:00:05,940 --> 00:00:11,550 que no tengamos que depender de estas fuentes integradas, las fuentes del sistema como Arial y Georgia que no son 3 00:00:11,550 --> 00:00:13,340 muy confiables en el primer caso. lugar. 4 00:00:13,350 --> 00:00:18,150 Las máquinas de algunas personas no las tendrán y son bastante limitadas incluso si todas están disponibles. 5 00:00:18,450 --> 00:00:21,700 No son muchas fuentes y no hay muchas fuentes buenas. 6 00:00:21,930 --> 00:00:27,660 Así que afortunadamente es bastante fácil incluir sus propias fuentes y esa puede ser una fuente de nuestra propiedad que hemos comprado 7 00:00:27,660 --> 00:00:32,550 que nuestra compañía posee, aunque puede ser muy costoso si nunca ha investigado el precio de las fuentes. 8 00:00:32,850 --> 00:00:36,120 Algunos de los mejores pueden costar cientos de miles de dólares. 9 00:00:36,120 --> 00:00:40,820 Entonces, Google tiene una opción que se llama fuentes Google y es un gran recurso. 10 00:00:40,980 --> 00:00:48,420 Básicamente, Google tiene muchos. Creo que se trata de unas 100 fuentes en línea gratuitas que son muy fáciles de incluir en 11 00:00:48,450 --> 00:00:49,540 nuestra propia aplicación. 12 00:00:49,620 --> 00:00:50,710 Solo unos pocos clics. 13 00:00:50,790 --> 00:00:52,940 Así que voy a mostrarte cómo hacer eso ahora. 14 00:00:53,910 --> 00:01:01,140 Entonces, si vamos a las fuentes de Google y simplemente a las fuentes de punto com de Google com, verá que inmediatamente se nos 15 00:01:01,140 --> 00:01:04,760 presenta una lista de tipos de letras, aquí podemos desplazarnos por ellas. 16 00:01:05,040 --> 00:01:09,520 Podemos ordenarlos por popularidad alfabéticamente más reciente. 17 00:01:09,660 --> 00:01:12,220 Podemos cambiar el texto de vista previa que estamos viendo. 18 00:01:12,780 --> 00:01:14,440 Usualmente solo lo mantiene como está. 19 00:01:14,850 --> 00:01:20,490 Y de hecho voy a elegir dos fuentes que son muy distintas, así que no me juzguen por 20 00:01:20,490 --> 00:01:21,550 las que escojan. 21 00:01:21,600 --> 00:01:26,310 Puede que no sean mis favoritos, pero van a ser obvios para que puedas ver que son diferentes. 22 00:01:27,600 --> 00:01:35,190 Así que voy a ir a hacer la popularidad y vamos a elegir un ferrocarril aquí y voy a hacer clic en este botón para agregar a 23 00:01:35,250 --> 00:01:39,890 la colección y lo que hace, de alguna manera, lo agrega a mi carrito de compras. 24 00:01:40,260 --> 00:01:41,770 Y luego el próximo que voy a elegir. 25 00:01:41,910 --> 00:01:45,390 Vayamos por otro muy diferente. 26 00:01:46,230 --> 00:01:49,800 Probemos este anuncio de Andy Flower para la colección. 27 00:01:50,220 --> 00:01:53,120 Entonces, lo próximo que quiero hacer es hacer clic en esta pestaña de uso. 28 00:01:53,280 --> 00:01:55,640 Entonces lo que dije es que quiero ambas fuentes. 29 00:01:55,710 --> 00:02:01,430 Ahora haga clic en usar y ahora necesito decidir qué pesos de fuente quiero que estén disponibles. 30 00:02:01,800 --> 00:02:06,390 Así que las diferentes fuentes tienen diferentes pesos que están disponibles en las fuentes de Google, por 31 00:02:06,390 --> 00:02:11,740 lo que puede ver que el ferrocarril tiene todas las opciones posibles entre 100 y ultra audaz a 900. 32 00:02:11,760 --> 00:02:16,790 la fuente y el peso que incluye es otra solicitud que debe realizarse, ya que es necesario cargar más datos. 33 00:02:16,800 --> 00:02:22,230 Una cosa a tener en cuenta es que no desea incluir más de lo que va a utilizar y este pequeño 34 00:02:22,230 --> 00:02:27,270 medidor le recuerda la carga de la página que tendrá el efecto en la página de eso, incluido el 35 00:02:27,270 --> 00:02:29,930 peso múltiple, y eso se debe a que cada uno 36 00:02:30,360 --> 00:02:36,000 Entonces, lo que queremos hacer aquí es minimizar el número que debemos entender para usar normal y 37 00:02:36,000 --> 00:02:37,400 audaz para un ferrocarril. 38 00:02:37,450 --> 00:02:39,520 Y entonces no tengo una opción para Andy Flower. 39 00:02:39,540 --> 00:02:42,150 Solo hay un peso que es normal. 40 00:02:43,260 --> 00:02:49,360 Ahora que los he seleccionado, me desplazo hacia abajo y todo lo que tengo que hacer es copiar este enlace aquí mismo. 41 00:02:49,740 --> 00:02:53,130 Entonces este es un enlace que pusieron en mi HMO. 42 00:02:53,970 --> 00:03:01,380 Cuando voy a mi HQ aquí y simplemente lo pego y seguro, puedes ver que estás bien aquí y te darás cuenta de 43 00:03:01,380 --> 00:03:06,700 que son casi las mismas palabras, exactamente el mismo tipo de etiqueta, es una etiqueta de enlace. 44 00:03:07,020 --> 00:03:12,340 La única diferencia entre mi hoja de estilo y esta hoja de estilo es la ref. 45 00:03:12,390 --> 00:03:19,230 Entonces, en lugar de estilos, CSSA mi hoja de estilo local personalizada está en Google dot com o 46 00:03:19,230 --> 00:03:20,560 Fahnestock Google API celcom. 47 00:03:20,850 --> 00:03:25,210 Y tenemos familia igual ferroviaria espera 107 100. 48 00:03:25,460 --> 00:03:26,650 Andy Flower. 49 00:03:27,150 --> 00:03:32,950 Así que supongamos que quisiera un audaz, podría ir fácilmente aquí, neto, ochocientos. 50 00:03:33,880 --> 00:03:34,130 DE ACUERDO. 51 00:03:34,140 --> 00:03:36,260 Así que eso es todo lo que tenemos que hacer para obtener la fuente. 52 00:03:36,270 --> 00:03:38,430 Es tan fácil de hacer. 53 00:03:38,550 --> 00:03:40,170 El siguiente paso es usarlo. 54 00:03:40,500 --> 00:03:45,170 Así que voy a seguir adelante y solo te mostraré cómo se ve ahora en caso de que lo hayas olvidado. 55 00:03:45,180 --> 00:03:46,360 Sitio maravilloso 56 00:03:46,650 --> 00:03:49,490 Comencemos cambiando este H-1. 57 00:03:50,310 --> 00:03:53,370 Hagamos que el H-1 use la fuente indie flower. 58 00:03:53,760 --> 00:03:55,370 Así que solo voy a cambiarlo aquí. 59 00:03:55,390 --> 00:03:58,200 H-1 y diviértete con la familia como Georgia. 60 00:03:58,240 --> 00:04:02,690 Solo lo cambio a Andy Flower y eso es todo. 61 00:04:02,790 --> 00:04:06,110 Actualización muy fácil y puedes ver que es ahora. 62 00:04:06,120 --> 00:04:11,260 Y si fuera lo mismo usar el ferrocarril en los párrafos. 63 00:04:11,610 --> 00:04:20,670 Acabo de cambiar la familia de fuentes para guardar y actualizar trenes y ahora tengo esta nueva diversión aquí. 64 00:04:20,670 --> 00:04:25,960 La otra cosa que podemos hacer es cambiar nuestro párrafo para usar el otro peso de fuente. 65 00:04:26,040 --> 00:04:30,670 Así que debemos recordar que vamos con normalidad. 66 00:04:30,840 --> 00:04:35,970 Se ve mucho mejor, no se ve muy bien de ninguna manera, pero prefiero el peso más 67 00:04:35,970 --> 00:04:37,530 ligero en lugar del Bold. 68 00:04:37,530 --> 00:04:40,650 Así que, de nuevo, Google Fonts es un excelente recurso. 69 00:04:40,650 --> 00:04:45,990 Sin embargo, una cosa que mencionaré es que si tienes fuentes que tienes, todo lo que tienes que hacer para vincularlas 70 00:04:46,320 --> 00:04:47,490 es usarlas como etiquetas. 71 00:04:47,880 --> 00:04:53,520 Entonces, en lugar de vincular a una de las fuentes de Google, simplemente enlaza con su propio archivo de fuentes 72 00:04:53,520 --> 00:04:57,890 para que pueda leer más sobre estos tipos específicos de archivos de fuentes que son compatibles. 73 00:04:58,110 --> 00:05:02,840 Pero básicamente funciona de la misma manera, excepto en lugar de incluir un fondo de Google. 74 00:05:02,940 --> 00:05:04,630 Puede incluir su propia fuente personalizada. 75 00:05:04,980 --> 00:05:08,260 Por suerte, las fuentes de Google tienen todo tipo de fuentes geniales. 76 00:05:08,430 --> 00:05:14,100 Puede hacer sitios web geniales y mucha gente usa fuentes de Google exclusivamente incluso para sitios 77 00:05:14,100 --> 00:05:15,000 web profesionales.