Sigo aplicando estilos a las fuentes...


Llevar tu portafolio web al siguiente nivel implica aplicar fuentes personalizadas, jerarquías tipográficas y estilos que reflejen tu identidad. Aquí descubres cómo trasladar lo aprendido sobre tipografía en CSS a un proyecto real y prepararte para el siguiente paso: trabajar con colores y variables.
Por qué tu portafolio necesita una identidad tipográfica propia
Un portafolio sin estilo tipográfico se siente plano. Cuando empiezas a integrar fuentes de Google Fonts y a combinar familias distintas en secciones específicas, tu sitio gana personalidad y comunica mucho más sobre quién eres como desarrollador.
La idea aquí no es solo "poner una fuente bonita". Se trata de usar la tipografía como una herramienta de diseño: decorar segmentos puntuales con un look and feel distinto, marcar jerarquías visuales y guiar la lectura de quien visita tu portafolio.
¿Qué es Google Fonts? Es una librería gratuita de tipografías web que puedes importar a tu proyecto con una línea de código y usar directamente en tus reglas CSS.
Cómo aplicar lo aprendido al proyecto de portafolio
Tu tarea en este punto es tomar todo lo que viste sobre fuentes y llevarlo a tu propio portafolio. No es un ejercicio teórico: es el momento de ensuciarte las manos.
Estos son los movimientos concretos que conviene aplicar:
El objetivo es que tu portafolio empiece a verse como tuyo, no como una plantilla genérica. Cada decisión tipográfica cuenta una parte de tu marca personal.
Qué referencia puedes tomar del proyecto guía
En el proyecto de ejemplo ya se aplicaron varios de estos cambios: importación de fuentes desde Google, uso de tipografías diferentes según la sección y decoración específica de algunos bloques para darles un acento visual distinto. Esa es la dirección que tú también puedes seguir, adaptándola a tu estilo.
¿Cómo elegir fuentes para un portafolio? Combina máximo dos o tres familias: una para títulos, una para cuerpo de texto y, opcionalmente, una de acento para elementos decorativos. Mantén coherencia en todo el sitio.
Qué viene en el siguiente módulo de CSS
Después de trabajar tipografía, el siguiente paso natural es el color. En el próximo módulo vas a ver temas que amplían mucho lo que puedes lograr con estilos.
Estos son los conceptos que vienen:
Las variables CSS son especialmente útiles cuando tu proyecto crece. Si decides cambiar el color principal de tu portafolio, en lugar de buscar y reemplazar en decenas de líneas, modificas un solo valor y se actualiza en todo el sitio.
Ahora te toca a ti. Aplica las fuentes a tu portafolio, experimenta con combinaciones y comparte cómo va quedando en los comentarios.
Llevar tu portafolio web al siguiente nivel implica aplicar fuentes personalizadas, jerarquías tipográficas y estilos que reflejen tu identidad. Aquí descubres cómo trasladar lo aprendido sobre tipografía en CSS a un proyecto real y prepararte para el siguiente paso: trabajar con colores y variables.
Un portafolio sin estilo tipográfico se siente plano. Cuando empiezas a integrar fuentes de Google Fonts y a combinar familias distintas en secciones específicas, tu sitio gana personalidad y comunica mucho más sobre quién eres como desarrollador.
La idea aquí no es solo "poner una fuente bonita". Se trata de usar la tipografía como una herramienta de diseño: decorar segmentos puntuales con un look and feel distinto, marcar jerarquías visuales y guiar la lectura de quien visita tu portafolio.
¿Qué es Google Fonts? Es una librería gratuita de tipografías web que puedes importar a tu proyecto con una línea de código y usar directamente en tus reglas CSS.
Tu tarea en este punto es tomar todo lo que viste sobre fuentes y llevarlo a tu propio portafolio. No es un ejercicio teórico: es el momento de ensuciarte las manos.
Estos son los movimientos concretos que conviene aplicar:
El objetivo es que tu portafolio empiece a verse como tuyo, no como una plantilla genérica. Cada decisión tipográfica cuenta una parte de tu marca personal.
En el proyecto de ejemplo ya se aplicaron varios de estos cambios: importación de fuentes desde Google, uso de tipografías diferentes según la sección y decoración específica de algunos bloques para darles un acento visual distinto. Esa es la dirección que tú también puedes seguir, adaptándola a tu estilo.
¿Cómo elegir fuentes para un portafolio? Combina máximo dos o tres familias: una para títulos, una para cuerpo de texto y, opcionalmente, una de acento para elementos decorativos. Mantén coherencia en todo el sitio.
Después de trabajar tipografía, el siguiente paso natural es el color. En el próximo módulo vas a ver temas que amplían mucho lo que puedes lograr con estilos.
Estos son los conceptos que vienen:
Las variables CSS son especialmente útiles cuando tu proyecto crece. Si decides cambiar el color principal de tu portafolio, en lugar de buscar y reemplazar en decenas de líneas, modificas un solo valor y se actualiza en todo el sitio.
Ahora te toca a ti. Aplica las fuentes a tu portafolio, experimenta con combinaciones y comparte cómo va quedando en los comentarios.
Sigo aplicando estilos a las fuentes...



Este es mi aporte muchas gracias 
No quise romper mucho el codigo ya que aun queda mucho por delante en el curso, ni me la vole buscando tipografias para no estar dos años cambiando y cambiando, aun asi... tarea compleada :)

En esta ocasión lo quise hacer mas limpio, y agregue la fuente de Google Sans, me parece muy limpia:


En mi caso apliqué la fuente de Google "Geist"

¿Cómo elegir la mejor fuente de Google?
Para un portafolio profesional, la clave está en combinar máximo dos familias tipográficas: una llamativa para los títulos y otra extremadamente limpia, como las Sans-Serif, para los cuerpos de texto. Antes de elegir, prueba cómo se ven tus textos reales directamente en la plataforma y asegúrate de seleccionar solo los pesos que realmente vas a utilizar, como regular (400) y bold (700). Esto te permitirá mantener un equilibrio perfecto entre un diseño atractivo y un rendimiento óptimo de tu sitio web.
