Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas
Contenido del curso
SANTIAGO QUINTERO GUARIN
Joel Dominguez Merino
Esteban Casallas
Juan Esteban Galvis
Railly Hugo
Ansony Banda
Alex Diaz Cantor
Joel Dominguez Merino
Ansony Banda
German Enrique Ceballos Garcia
Patricio Manuel Ugarte
German Enrique Ceballos Garcia
Cristian Andres MQ
María Camila Betancourth Ospina
Daniel Torrealba Febres Cordero
Yair Lira
Eduardo Petraglia
Luis Rodríguez
Harold Celis
Bryan Andres Vera Garcia
José M. Veintimilla
Leidy Fabiola Cruz
Joel Dominguez Merino
Héctor Alonso Padilla Ramírez
Eduardo Rodriguez
Osmar Oña
Anthony Ismael Manotoa Moreno
Reinaldo Mendoza
Anthony Ismael Manotoa Moreno
Pedro Moreno
Brian Domínguez Vázquez
Nicolás Leal
Carlos Ramos
Anderson Josué Oroya Silva
Jerry Gil Contreras
Luis Velásquez
Luis Rodríguez
Jesús Cisneros
Juan David González Rodríguez
Pablo Luna Guzmán
Abigail Perez
Hola!! otra forma de tener varias fuentes para nuestro proyecto sin tener que importarlas desde un link externo es descargado la fuente directamente de google fonts, crear una carpeta fonts en el proyecto almacenar alli los archivos .ttf y luego en el archivo de css importarlas desde alli. el atributo font-family le pondremos el nombre de la fuente y en el src: la ruta donde esta almacenado el archivo .ttf
@font-face{ font-family: 'ChakraPetch-Regular'; src: url(../fonts/ChakraPetch-Regular.ttf); }
esa es mejor practica que pegar el link de la fuente dentro de la etiqueta head de nuestro proyecto? La había visto pero no se que es mejor o mas recomendado.
hola joel, es algo muy relativo por ejemplo cuando se manejan fuentes de alguna pagina conocida como google los servidores de google son bastante potentes por lo q cargara las fuentes muy rápido, sin embargo cuando las descargamos y montamos nuestra pagina en un hosting compartido puede q el servidor no sea igual de rápido y demore un poco mas, sin embargo creo q es cuestión de milésimas de segundo pero cuando hay fuentes muy raras (algo no muy recomendado) estas puede q no se encuentren en servidores potentes y podría ser una buena opción descargarlas.
Según conceptos de diseño hay varias recomendaciones para elegir la fuente / tipografía:
Para calcular el interlineado usamos la siguiente regla:
"2 puntos más que la fuente (Fuente de 8px pues interlineado de 10px)"
Gracias por el dato Juan Esteban 👍
gracias
Varios puntos interesantes a sumar:
La "puntitas al final" en la tipografias serif se llaman serifas.
En realidad al grosor no se le dice muy gorditas 😁, se le dice peso de la tipografía.
Tal como indicó Diego en la clase, no es bueno cargar muchas tipografías, normalmente se usan un máximo de 2 tipografías. Pero también es bueno no cargar muchos pesos distintos de una tipografía porque eso compromete el rendimiento, solo agrega a la importación los pesos que necesites.
Para que el renderizado de la tipografía sea mas eficiente es buen practica colocarlo en el head antes de cargar el CSS, de modo que cuando el CSS cargue ya tiene disponible las tipografías.
NOTA: He estado haciendo algunas pruebas y a pesar de no tener una información oficial creo que Google esta haciendo algunas pruebas con sus tipografías en Google Chrome. He creado proyectos donde no importo la tipografía, pero si llamo a la fuente en el CSS y se renderizan correctamente, claro, solo en Google Chrome...
Muchas gracias por las aclaraciones! Justo mi duda era si hay problema por usar varios pesos de la misma fuente.
gracias
Son grupos familiares de fuentes, los navegadores web poseen fuentes predeterminadas y dependiendo del mismo cada uno de ellos posee estilos diferentes.
Algunas Generic Families
¿Como puedo saber que tipo de fuente tengo instaladas en mi navegador?
Menú>Configuración>Diseño>Personalizar Fuentes>Fuente Serif/Fuente Sans-serif
¿Como puedo importar tipos de fuentes a mi proyecto?
Buenas Prácticas Cargar una sola fuente. Importarlas siempre en la etiqueta del head.
¡Excelente resúmen! Gracias
¡De nada! Me alegra que te halla sido util.
Un resumen de casi todo.
NOTA: Es buena practica antes de iniciar mis estilos: *{ box-sizing: border-box; margin: 0; padding: 0; } html{ font-size: 62.5% /Esto si quieres usar Rem como medida/ }
excelente tu resumen
Muy buen resumen.
¿Les ha pasado que encuentran fuentes hermosas y quieres saber cuales son? Les recomiendo la app Adobe Capture. Tomas una foto y detecta que fuente es. Además también puede calcular la paleta de colores. Una buena app para Fronted's
Excelente.Gracias
uuufffff, excelente, muchas gracias 🙌🏼.
iNCREIBLE APORTE GRACIAS !!
Muy bueno.
Platzi tiene un curso de tipografía que tomaré muy pronto. ✨✨✨ https://platzi.com/clases/diseno-tipografia/
Oh, muchas gracias. No sabia de ese curso. Pero va mas enfocado a realizar uno mismo sus propias fuentes no? Aún así creo que se puede sacar mucha teoría y practica para llevarlas acabo cuando uno esta eligiendo la tipografía para sus proyectos!!!
Anatomía de la letra
Gracias por expandir el conocimiento
Consejo de un diseñador, nunca usen fonts descargadas de DaFont, siempre estan mal construidas y funcionan mal. :)
¿Qué pasa cuando descargamos nuestra propia fuente?
Lo instalé así en el CSS, pero ¿es la mejor manera? y ¿cómo implemento el &display=swap?
@font-face { font-family: Levenim MT Regular; /* Esta al estar primera se pone por defecto si no se indica el bold */ src: url(./fonts/lvnm_1.ttf); font-family: Levenim MT Bold; src: url(./fonts/lvnmbd_1.ttf); } html { font-size: 24px; } .uno { font-family: 'Levenim MT Regular', sans-serif; } .dos { font-family: 'Levenim MT Bold', sans-serif; }
¿Cómo se implementa el display=swap?
de donde sacaste esa imagen amigo?
Es un screenshot Brian Dominguez 🙂
Clase 43 - Web fonts
¿Cuáles son las familias de fuentes más comunes que nos encontraremos en el navegador?
¿Cómo puedo saber que tipo de fuentes tengo instaladas en mi navegador?
¿Dónde puedo encontrar fuentes diferentes a las que tenemos instaladas en nuestro navegador?
¿Cómo podemos usar las fuentes de Google fonts?
¿Por qué es mala práctica que agreguemos fuentes por medio del elemento @import?
¿Para qué sirve el display:swap que agregó Google fonts a sus fuentes?
¿Cuáles son las buenas prácticas que debemos de seguir para usar fuentes externas?
Les dejo una página que sugiere colores y fuentes ;)
Wow todo esto que hemos visto en css está para repasarlo muuuchas veces. Por lo menos tengo uqe ver unas 2 o 3 veces más el módulo. Excelente maestro Degranda!
Una herramienta muy útil es Google Webfonts Helper, que toma la fuente que quieras de Google Fonts y te la genera en formatos eot, ttf, svg, woff, woff2, para mayor compatibilidad. También te muestra el CSS para importarlos.
Muchas gracias, justo, iba a preguntar cómo generar otros formatos.
En la clase anterior nos dejó los enlaces a páginas donde podemos importar nuestras fuentes, les dejo los links de igual forma por aquí:
https://material.io/resources/icons/?style=baseline
https://fonts.google.com/?preview.text=&preview.text_type=custom
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
Espero les sea de ayuda.
Web Fonts
Hola!
Solo era para comentar que en el quiz de CSS en la pregunta de cuáles son los elementos de una caja CSS, la respuesta correcta tiene un typo en Content, quedó como Context.
Un saludo! 🌙
