Contenido del curso
Fuentes web con CSS y Google Fonts
Las fuentes en CSS definen la personalidad visual de tu sitio web y su legibilidad. Aprender a usar las cinco familias tipográficas, configurar un font stack y cargar tipografías externas con Google Fonts te permite controlar exactamente cómo se ve cada palabra en pantalla, incluso cuando un navegador o sistema operativo no tiene tu fuente preferida.
¿Cuáles son las cinco familias de fuentes en CSS?
Cuando hablamos de tipografías web, todo se reduce a cinco familias que cualquier navegador reconoce sin necesidad de instalar nada extra [2:00].
El navegador trae fuentes predeterminadas para cada familia, así que puedes apoyarte en ellas cuando no tienes una tipografía propia.
¿Cómo identifico una fuente serif a simple vista? Mira las puntas de las letras. Si tienen pequeños remates o piquitos al final de cada trazo, es una serif. Si las letras terminan limpias y rectas, es sans serif.
¿Cómo aplico una familia tipográfica con font-family?
La propiedad font-family recibe el nombre de la familia y el navegador escoge una fuente representativa. Por ejemplo, para texto en código se usa monospace acompañado de un background gris claro y padding para diferenciarlo visualmente [4:30].
css .monospace { font-family: monospace; font-size: 20px; background: #f0f0f0; padding: 5px; }
Este recurso es muy común cuando necesitas mostrar fragmentos técnicos dentro de un párrafo de texto regular.
¿Qué es un font stack y por qué lo necesitas?
Un font stack es la lista de fuentes separadas por comas que escribes dentro de font-family, y funciona como un plan de respaldo [6:15]. El navegador lee la lista de izquierda a derecha: si la primera fuente no existe en el sistema, pasa a la segunda, y si tampoco está disponible, recurre a la tercera.
Esto importa porque algunas tipografías solo viven en ciertos sistemas operativos. Si usas una fuente exclusiva de macOS y alguien abre tu proyecto en Windows, sin un fallback tu diseño se rompe.
css font-family: "Poppins", sans-serif;
La buena práctica es cerrar siempre tu font stack con una de las cinco familias genéricas. Así garantizas que, pase lo que pase, el texto se renderiza con un estilo cercano al original.
¿Por qué siempre debo poner una fuente genérica al final? Porque las cinco familias genéricas existen en cualquier navegador y sistema operativo. Si tu fuente principal falla o el servicio externo se cae, esa familia entra como respaldo y mantiene el diseño legible.
¿Cómo cargo fuentes externas desde Google Fonts?
Google Fonts es un servicio gratuito donde encuentras tipografías, las previsualizas con distintos pesos y tamaños, y decides cuáles llevar a tu proyecto [9:40]. Cuando seleccionas una fuente, puedes elegir variaciones específicas como un bold 700 en italic, o pedir el paquete completo si la vas a usar en todo el sitio.
¿Cómo embebo una fuente de Google en mi HTML?
Después de elegir la fuente, Google Fonts te entrega un fragmento de código que puedes pegar directamente en el <head> de tu HTML usando la etiqueta <link>. A partir de ese momento, la fuente queda disponible para que la llames desde tu CSS.
css .google-title { font-family: "Poppins", sans-serif; }
.google-text { font-family: "Inter", sans-serif; }
Nota dos detalles importantes: los nombres de fuentes externas van entre comillas y siempre cierras el stack con una familia genérica como respaldo [12:20]. Si Google Fonts deja de responder por algún motivo, el navegador renderiza con la sans serif del sistema y tu sitio sigue legible.
¿Cuándo conviene descargar la fuente en lugar de embeberla?
Si trabajas con tipografías corporativas o necesitas servir el archivo desde tu propio servidor por temas de rendimiento o privacidad, puedes descargar el archivo de la fuente, guardarlo en una carpeta del proyecto y mandarlo a llamar desde CSS con @font-face. El principio del fallback sigue siendo el mismo: tu fuente personalizada primero, una familia genérica al final.
Dominar estos tres niveles, las familias genéricas, el font stack y la carga de fuentes externas, te da control total sobre la tipografía de cualquier proyecto. ¿Qué fuente sueles usar como respaldo en tus proyectos? Cuéntalo en los comentarios.
Julio Bastidas
Estudiante
iecgerman .
Estudiante
Carlos Rubén Díaz Gutiérrez
Estudianteiecgerman .
Estudiante
Jesús Ynuma
Estudiante
Eliecer Baron
Estudiante
Mauricio Santiago Valdés Franco
EstudianteEliecer Baron
Estudiante
Moises Hernandez
Estudiante
David Cubilos
Estudiante
Isabel Cristina Ruiz
EstudianteNo es Itern, es Inter
ahí va quedando, pero no se porque en google chrome se me empalman las letras, ya le di margin a cada spam, ya le di letter-space, pero ya no se que hacer, en firefox si se ve como quiero que se vea, no se si alguien me pueda ayudar, el repositorio es:
Intenta borrar el caché del navegador. A veces aunque hagamos cambios al CSS, estos no se ven reflejados por lo mismo.
hola @Carlos Rubén Díaz Gutiérrez, si le borro el caché, de hecho con ctrl +shift + r, se actualiza tu página y te borra el caché, es como si la cargara por primera vez. también le don inspect y en la consola le pongo disable caché, creo que es por el tipo de letra rara que use y la carga directo en local.
Para los observadores que notaron que el código que da Google Fonts es más grande que el que el profesor puso en el HTML, pasa lo siguiente:
El código completo incluye un par de líneas (link rel="preconnect") que son solo para optimización de velocidad de carga. Estas líneas le dicen al navegador que se prepare para conectar con Google.
La línea que el profesor usó ("link href="...;) es la única esencial. Es la que realmente le dice al navegador dónde encontrar y cargar el archivo CSS con las fuentes.
En resumen: Funcionalidad vs. Optimización. El profesor priorizó la funcionalidad y la brevedad, lo cual es totalmente válido.
preferible usar tipo import
¿Porque es preferible?
por que todo va en el css y no en el html, para ir mas ordenado los import van arriba y los font-famili van en el contenedor que uno quiera
Entonces debemos analizar que tipo de fuente estamos usando de terceros para agregar un serif o sans-serif en nuestro fallback ?
Es decir suponiendo que agrego la funete de google Playfair Displayu basada en serif debería agregar serif como segunda opción en caso de que falle de igual forma si ocupara fuentes basadas en sans-serif
Si. En google fonts puedes encontrar esto ya solucionado. Después de las etiquetas link puedes entrar código css que te ayuda a detectar las fuentes, además de otras configuraciones
Recuerda que el código de CSS de Google Fonts habilita la fuente en un clase. Si quieres que esta fuente sea global la debes agrear al html o body o agregar la clase al html o body
CSS Utilizaremos el mismo código de Google Fonts pero en lugar de aplicarla a una clase de la aplicamos a una etiqueta específica, en este caso body
body { font-family: "Playfair Display", serif; font-optical-sizing: auto; font-weight: <weight>; font-style: normal; }
El profe Diego es mi crush académico :D
