Agregando fuentes

Fuentes en CSS

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!

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.

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! 😄

@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto/Roboto-Thin.ttf');
    font-style: normal;
    font-weight: 300;
}
@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto/Roboto-Regular.ttf');
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto/Roboto-Bold.ttf');
    font-style: normal;
    font-weight: 700;
}

@import url(‘https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto+Slab:400,700|Roboto:400,500,700,900&display=swap’);

Así como background tiene shorthand, font también. Lo pueden resumir con una sola linea.

font: 700 30px "Roboto Mono", monospace;

Lo hice diferente en el Reto, use la etiqueta Link de html , para poner las fuentes de google…

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">```

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.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected];500;700&family=Roboto+Slab:[email protected];700&family=Roboto:[email protected];500;700;900&display=swap" rel="stylesheet">

Espero les sirva 😉

• 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.

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;

😄

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. 😟

Es una buena forma de añadir fuentes sin embargo, creo que en algunas ocasiones se demora mucho en cargarlas

¿Cual es la manera correcta de usar fonts? ¿Subiendolos uno mismo, con enlace a Google…?

Muy buena la clase. Tengo dudas de por que despues de poner ‘Roboto mono’ puso monospace? que hace ese monospace?

Una manera muy sencilla de llamar las fuentes desde Google fonts

Es recomendable importar las fuentes en el HTML no en el CSS usando @import

esta genial esta clase

/* Roboto */
@font-face {
    font-family: 'Roboto';
    src: url('./Roboto/Roboto-Regular.ttf');
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Roboto';
    src: url('./Roboto/Roboto-Medium.ttf');
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: 'Roboto';
    src: url('./Roboto/Roboto-Bold.ttf');
    font-style: normal;
    font-weight: 700;
}
@font-face {
    font-family: 'Roboto';
    src: url('./Roboto/Roboto-Black.ttf');
    font-style: normal;
    font-weight: 900;
}

/* Roboto Mono */
@font-face {
    font-family: 'Roboto mono';
    src: url('./Roboto_Mono/static/RobotoMono-Regular.ttf');
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Roboto mono';
    src: url('./Roboto_Mono/static/RobotoMono-Medium.ttf');
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: 'Roboto mono';
    src: url('./Roboto_Mono/static/RobotoMono-Bold.ttf');
    font-style: normal;
    font-weight: 700;
}

/* Roboto Slab */
@font-face {
    font-family: 'Roboto slab';
    src: url('./Roboto_Slab/static/RobotoSlab-Regular.ttf');
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Roboto slab';
    src: url('./Roboto_Slab/static/RobotoSlab-Bold.ttf');
    font-style: normal;
    font-weight: 700;
}

/* font-family: 'Roboto', sans-serif
font-family: 'Roboto mono', monospace
font-family: 'Roboto slab', serif */

@import url(‘https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto+Slab:400,700|Roboto:400,500,700,900&display=swap’);

😁👆

si yo veo una pagina y la quiero replicar hay alguna manera de saber cual es la fuente que usa?

super me enseño alguna cosa adicional super buena

Que interesante, no sabia que se podía hacer esto, muy buena clase.

Google Fonts lo máximo!!!

este curso se llamaba curso práctico de css grid ahora se llama curso práctico de maquetación en css
y este es el why no solo estamos mirando grid sino fondos letras y otras cosas

Genial, las fuentes le dan mucha presencia a nuestra pagina

De lo mejor, usar Google Fonts, en los proyectos es algo que da mucha personalidad, a tus proyectos.

estupendo 😄

Wow! El apunte de google fonts es genial, gracias por el dato!!!

Muy elegante la fuente

De a poco avanzando !!!

Hay muchas maneras de hacer funciones similares o iguales. Que interesante.

¿Diego, qué tema de Chrome usas?

Bien explicado lo de las fuentes 😄 gracias!

Me encanta Google Fonts para las fuentes de mis proyectos! 😄

Escoger el forma de letras

Quedo nice el home del blog

Es una estupenda manera como Google Fonts nos permite elegir varias fuentes y organizarlas rápidamente en una línea de código para poder importarlas a nuestro proyecto.

Siempre muy importante las fuentes, en la experiencia del usuario!

Sigamos :d

Excelente clase. ¡Gracias!

Esta info es demasiado útil

QUE BIEN EXPLICAS DIEGUITO!! GRACIAS 😃

Hay mas sitios para obtener fuentes?

Una buena practica es poner las fuentes en HTML

.home-main-text {
  font-family: roboto mono, monospace;
  font-size: 30px;
  font-weight: 900px;
  letter-spacing: 10px;
  color:white;
  text-align: center;
  margin-top: 150px;
}```

b