¿Cómo consumir fuentes desde Google Fonts en un proyecto web?
En el desarrollo web, el uso de fuentes personalizadas puede hacer que un diseño destaque y sea estéticamente más agradable. Google Fonts es una herramienta excelente para integrarlas en tus proyectos de manera gratuita y sencilla. A continuación, te guiaré sobre cómo seleccionar y usar estas fuentes.
¿Cómo seleccionar las fuentes en Google Fonts?
Primero, debes identificar las fuentes que necesitas para tu proyecto. Puedes acceder a Google Fonts desde tu navegador. Una vez allí, busca las fuentes que quieres usar. Por ejemplo, si necesitas la fuente Roboto, bastará con buscarla, seleccionar las variantes deseadas (como Regular, Medium, Bold, Black y Monospace), y seguir los pasos que el sitio recomienda para llevarlas a tu proyecto.
¿Cómo integrar las fuentes en tu archivo CSS?
Una vez seleccionadas las fuentes y sus variantes, Google Fonts te proporcionará un fragmento de código para incluir en tu archivo CSS. Suele verse así:
Este fragmento, generalmente, se coloca en la parte superior de tu archivo CSS, asegurando que cargue antes de que estilices cualquier elemento con esas fuentes.
¿Cómo aplicar las fuentes a elementos específicos?
Después de importar las fuentes, ya estás listo para aplicarlas en tu proyecto. Supongamos que deseas usar Roboto Mono para los títulos de tu página. Tendrías que editar tu CSS de la siguiente manera:
.hometitle{font-family:'Roboto Mono', monospace;color:white;/* Opcional: Cambia el color del texto */}
Aquí, simplemente asignamos la familia de fuentes a la clase .hometitle. Esto garantiza que el navegador renderice el texto con Roboto Mono siempre que la clase se aplique a un elemento.
¿Cómo verificar si la fuente se aplica correctamente?
Con los cambios realizados, guarda tu archivo CSS y actualiza tu vista previa en el navegador. Observa si la fuente se aplica como esperabas. Si todo está correcto, podrás notar la diferencia en el estilo tipográfico de tus títulos u otros textos a los que hayas aplicado la fuente.
¿Qué hacer si necesitas ajustar más estilos?
El proceso de añadir fuentes es solo el comienzo en el camino de personalización del diseño de un sitio web. Posteriormente, puedes seguir ajustando estilos, como agregar color, dimensiones u otros detalles acordes a tu diseño. Experimenta con las propiedades CSS para alcanzar la apariencia deseada.
Recomendaciones para continuar aprendiendo
Practica añadiendo diferentes fuentes y variantes en proyectos de prueba.
Experimenta con otras herramientas de Google Fonts, como las de optimización de rendimiento.
Sé creativo y busca inspiración en ejemplos de diseño con fuentes diversas.
¡Sigue explorando las posibilidades del diseño web con Google Fonts para llevar tus proyectos al siguiente nivel!
El profesor mostró como podemos importar Fuentes desde Google Fonts, pero también compartió los assets en Dropbox y podemos usarlos en nuestro proyecto tan facil como al importarlos desde Google y con una mejora en el rendimiento para proyectos más pesados!
Importar fuentes locales
Para llamar una fuente que está entre nuestros archivos usamos el selector @font-face que luego llenamos con ciertas propiedasdes para que CSS entienda de qué hablamos.
@font-face{font-family:'<nombre de la fuente>';src:url('<path de los archivos>');font-style: normal | italic;font-weight: thin | regular | bold | 400;}
font-family llevará el nombre que nosotros queremos ponerle a la fuente; así como puede ser "Roboto", también podemos llamarla "Juanito"
src indica la ubicación del archivo, puede ser en los archivos locales o una url.
font-style y font-weight especifican las condiciones en las que se muestra esta fuente en particular.
Pero... ¿Cómo traigo versiones de la misma fuente?
Esto es fácil, toca crear un @font-face por cada version de la fuente que necesites, ambas pueden tener el mismo font-family ya que font-style / font-weight dirán cuál versión usar en cada caso.
.
.
¡Ahora para user este estilo solo falta usar las propiedades como has hecho durante toda tu carrera! :D
Ejemplo de la fuente Roboto en thin, regular y bold:
Considero que subirlos tu mismo, porque no tienes que esperar la respuesta del google o si necesitas muchas fuentes es menos informacion que cargar. Sin embargo, para proyectos pequeños es más práctico usar google fonts!
Así como background tiene shorthand, font también. Lo pueden resumir con una sola linea.
font:700 30px "Roboto Mono", monospace;
wooow no sabía que puedes ahorra tantas líneas
Gracias
Aprendí en el Curso Definitivo de Html y CSS que por términos de rendimiento de nuestra página es mejor añadir el link de las fuentes en la etiqueta head.
Yo lo hice igual, así lo explicó el profe en un curso anterior y dijo que era una mejor práctica.
Está bien dejar retos, yo hice el home de forma diferente, aunque me funcionó, es bueno saber que existen mejores formas de desarrollar un proyecto.
Concuerdo contigo :D
Igual que a ti me pasó.
para los que le interese en la parte del video 3:05 min, en el archivo del main.css, clase .home-main-text. esta mal declarado el font-weight: 700px; si siguen mirando el video 3:08 min en el inspector se visualiza el error. solo hay que quitar el px.
font-weight: 700;
:D
.., gracias por el aporte!!!
Asi es, los pesos numéricos para los tipos de fuente que nos permiten más flexibilidad que normal - bold. Si el peso especificado no existe en el tipo de fuente escogido, un valor entre 600 y 900 se presentará con el valor más próximo disponible para dar una letra más oscura. De igual forma, un valor entre 100 y 500 se presentará con el valor más próximo disponible para dar una letra más clara. Esto significa que para los tipos de letra que sólo dispongan de normal y bold, cualquier valor entre 100 y 500 será normal y entre 600 y 900, será bold.
Sin el px, saludos :)
para mi es muy difícil saber cual fuente tomar cuando hago mis proyectos, me considero escaso de ideas creativas de diseño y realmente sufro, en mis proyectos todos me indican que le agregue una fuente mejor, pero no se como la escogería. 😟
.., comparto el mismo dilema, seguro que encontraremos respuesta en otras clases de la plataforma.,
Me dicen que cuando tenga duda utilice Roboto que esa no falla... jajaja que risa
Tkm mucho Google Fonts
Es una buena forma de añadir fuentes sin embargo, creo que en algunas ocasiones se demora mucho en cargarlas
Desde el punto de vista de Optimización Web, solo se recomienda usar máximo 2 fuentes, saludos :)
porque en GoogleFonts no me aparece para seleccionar ?
¡Hola! ¿puedes poner captura de cómo se ve tu Google Fonts?
perdon pero como se puede comentar una captura ?
Por buenas practicas que es mejor, ¿Agregar las fuentes desde CSS o con la etiqueta link desde el HTML?
Hola @ Josueram_
Para buenas prácticas si no estoy mal es con la etiqueta link. Aunque no se recomienda excederse de dos o tres.
Está muy bien importar con @ desde Google Fonts. Sin embargo, ¿Cómo hacer cuando a uno le pasan los archivos de las fuentes? En el repositorio de la clase se incluye una carpeta de "Fuentes" pero con archivos .tff, como estoy segura muchas oficinas de diseño pasarían los archivos a maquetar... y entonces?
Hola, cuando tienes las fuentes debes colocar la ruta de la carpeta, aquí te dejo un ejemplo:
Que es mejor importar a css desde google fonts, importar a css desde local o linkear la url que arroja google fonts?
De las tres formas realizas una petición a un servidor externo. Sin embargo, creo que la mejor opción sería agregando el link desde el HTML ya que de esta forma se realiza la petición cuando se está leyendo el HTML y no el CSS.
La url de Google Fonts ya que el tiempo de respuesta de google fonts es muy bueno, es seguro que la fuente siempre la tendrás disponible y aunque pareciera insignificante, le quitas un peso a tu propio server
por que a mi google fonts me aparece de otra manera no puedo selecionar así de facil las fuentes
Hola!
Cómo se te muestran?
Puedes hacerlo por medio de el enlace que te provee Google Fonts o bien por medio de una llamada recursiva por medio de JS
Al parecer cambiaron el diseño de la web, lo que debes hacer es descargar la fuente y enlazarla directamente en tu HTML o en tu JS
Lamentablemente yo estoy tomando este curso 6 años después de su lanzamiento y es una lastima de que las páginas y/o recursos utilizados a lo largo de este curso ya se han actualizado y/o modificado por lo que te quedas en un punto donde te preguntas ¿Cómo puedo avanzar el curso usando páginas que ya se han actualizado?, ojalá me puedan ayudar, quiero avanzar el curso
Qué onda che, ¿cómo estás? ¿Hay algo en particular que necesités? Porque no es necesario usar exactamente lo mismo de recursos y/o páginas que se muestran, hay muchísimas para usar.
De lo mejor, usar Google Fonts, en los proyectos es algo que da mucha personalidad, a tus proyectos.
aparte de que al trabajar con un diseñador, no vamos a batallar para usar los miles de tipos de letra que el puede buscar en google fonts para hacer un diseño bonito
Google Fonts lo máximo!!!
Muy buena la clase. Tengo dudas de por que despues de poner 'Roboto mono' puso monospace? que hace ese monospace?
Roboto es el primer tipo de letra de trata de renderizar, si por alguna razón no puede renderizará la segunda que es la monospace.
¿Cual es la manera correcta de usar fonts? ¿Subiendolos uno mismo, con enlace a Google...?
Hasta el momento he tenido la oportunidad de trabajar en proyectos en donde las fuentes son extrídas de google y ha sido bastante cómodo. Los links que pones no se van a romper.
Sin embargo, también podrías descargar la fuente y dejar una ruta de acceso.
Como mencionan algunos otros compañeros, ambas formas son muy válidas, la ventaja de tenerlas en "local" es que no dependes de la respuesta de google para verlas reflejadas en tu sitio.
Una manera muy sencilla de llamar las fuentes desde Google fonts
