Web fonts

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);
}

Según conceptos de diseño hay varias recomendaciones para elegir la fuente / tipografía:

• Para textos en digital (Como páginas web) usamos fuente sans-serif sin esas terminaciones (setifas).
• Las fuentes con Serifa se recomiendan para impresas o en digital para titulos.

Para calcular el interlineado usamos la siguiente regla:

“2 puntos más que la fuente (Fuente de 8px pues interlineado de 10px)”

Varios puntos interesantes a sumar:

1. La “puntitas al final” en la tipografias serif se llaman serifas.

2. En realidad al grosor no se le dice muy gorditas 😁, se le dice peso de la tipografía.

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

4. 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…

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

1. serif: Son un tipo de fuente de estilo formal o clásico como Times New Roman.
2. sans-serif: No tienen acabado en las puntas, como: Verdana.
3. cursive: Son las que tienen estilo cursivo.
4. monospace: Son tipos de fuentes con espaciado entre las letras, como: Roboto mono.

¿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?

• Ir a Google Fonts.
• Seleccionar la fuente.
• Seleccionar Estilo de fuente.
• Agregar al proyecto, se considera buena práctica agregar las fuentes utilizando la etiqueta <link>, ya que la fuente cambia la fuente una vez que se haya cargado la página.

Buenas Prácticas
Cargar una sola fuente.
Importarlas siempre en la etiqueta del head.

Un resumen de casi todo.

1. Selectores . # p *
2. Psudoclases y psudoelementos :class ::element
3. Regla de CSS selector + {} + declaración(propiedad: valorPropiedad;)
4. Modelo de caja: content + padding + border + margin
   NOTA: para no generar scroll, usamos la siguiente regla:
   *{box-sizing: border-box;
5. Herencia en CSS: el código que se le va a pasar de un "padre"
   a un “hijo”
6. Orden de declaración y especificidad en selectores:
   6.1 Importancia
   6.2 Especificidad
   6.3 Orden en las fuentes
   6.1: 6.1.1 Hoja de estilo de agente usuario(navegador)
   6.1.2 Declaraciones normales en hojas del autor (.css)
   6.1.3 Declaraciones importantes (!important)
   6.2: Especificidad:
   !important
   inline styles
   #id
   .class
   tag
   6.3: En tus estilos, las declaraciones al final del documento
   anularán a las que sucedan antes en caso de conflicto.
7. Combinadores:
   7.1 Adjacent Sibling
   div + p {Aplica una regla al selector indicado cercano}
   7.2 General Sibling div ~ p {Aplica el mismo estilo
   siempre y cuando existan como hermanos en la misma
   linea}
   7.3 Child
   div > p {El padre que sea mayor, a su hijo directo}
   7.4 Descendant
   div p {todas las etiquetas que estén en el contenedor}
8. Medidas
   8.1 Absolutas: No va a cambiar sin importar el tamaño del dispositiva.
   8.1.1: px
   8.2 Relativas: El tamaño varia según el dispositivo.
   8.2.1 em: es un acrónimo de element y lo que hace es
   tomar el tamaño de fuente que tenga el padre
   directo.
   8.2.2 rem: Rem hace referencia al font-size declarado en
   la etiqueta HTML (62.5%).
   8.2.3 Max-width/Max-height: Define el ancho y alto que un
   elemento puede tener.
   8.2.4 Min-width/Min-height: Define el ancho y el alto
   mínimo, que un elemento
   puede tener.
   8.2.5 Porcentaje % : Designa el porcentaje a usar, en el
   espacio en uso.
   8.2.6 vw y vh: view width y view height usan de 1% a
   100% del tamaño del viewport.
9. Position: Modifica el lugar en el que se encuentran las
   cajas etiquetas, por defecto todos tiene como
   valor predeterminado static.
   9.1 static, relative, absolute, fixed, sticky
   las propiedades botton left right top, no están
   disponibles en el valor static.
10. Display: La propiedad display especifica como se muestra
    un elemento html. Todos los elementos tienen
    algún tipo de display. Si un elemento no se ve
    en pantalla, es porque seguramente su display
    es none.
    10.1 Block: siempre comienza en una nueva linea y
    ocupa 100% el espacio del width.
    10.2 Inline: no comienzan en una nueva linea y solo
    ocupan el ancho necesario. no se le puede
    agregar margin.
    10.3 inline-block: Combinación de los 2 anteriores.
11. Display: flex (flexbox):https://css-tricks.com/snippets/css/a-guide-to-flexbox/
12. Display: grid https://css-tricks.com/snippets/css/complete-guide-grid/
13. Variables: Permiten asignar cualquier valor a una
    propiedad cuyo nombre podemos elegir
    libremente.
    Ejemplo: :root{–nombre-variable: valor;}
    ejemplo: var (–nombre-variable);
14. Web fonts: Buena práctica
    *solo cargar 1 fuente por proyecto.
    *importarlas siempre en la etiqueta head.

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/
}

¿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

Platzi tiene un curso de tipografía que tomaré muy pronto. ✨✨✨ https://platzi.com/clases/diseno-tipografia/

Anatomía de la letra

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;
}

Clase 43 - Web fonts

¿Cuáles son las familias de fuentes más comunes que nos encontraremos en el navegador?

• Serf. (Times New Roman, Georgia)
• Sans-serf. (Helvetica, Verdana)
• Cursive. (Dancing script)
• Monospace. (Courier new, Roboto mono)

¿Cómo puedo saber que tipo de fuentes tengo instaladas en mi navegador?

• Menú.
• Configuración.
• Diseño.
• Personalizar fuentes.
• Fuete serf/fuente Sans-serf

¿Dónde puedo encontrar fuentes diferentes a las que tenemos instaladas en nuestro navegador?

• Google fonts.

¿Cómo podemos usar las fuentes de Google fonts?

• Buscamos la fuente que necesitamos y damos clic sobre ella.
• Damos clic en “Select this style” para elegir el o los tamaños de esa fuente que queremos agregar a nuestro proyecto.
• Elegimos si queremos embeber la fuente en el proyecto usando código CSS o por medio de un link que podemos agregar a HTML. En este caso la mejor práctica es hacerlo por medio del link.
• Usamos la regla que nos proporciona Google Fonts a los elementos que queremos darle dicha fuente.

¿Por qué es mala práctica que agreguemos fuentes por medio del elemento @import?

• Porque afecta el performance de la página web.

¿Para qué sirve el display:swap que agregó Google fonts a sus fuentes?

• Esto nos permite hacer que el navegador cargue todo el proyecto como siempre lo hace y después de esto el navegador aplica las fuentes.

¿Cuáles son las buenas prácticas que debemos de seguir para usar fuentes externas?

• Cargar sólo una fuente por proyecto (Máximo 2).
• Usar la etiqueta <link> dentro de la etiqueta <head>.

Les dejo una página que sugiere colores y fuentes 😉

https://typespiration.com

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.

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://fontawesome.com

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

Google 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! 🌙

Para descargar fuentes para tus proyectos https://fonts.google.com/ copiar el link, usamos una por buenas practicas e importarla siempre en la etiqueta <head> no poner el @import en el .CSS (mala practica)

Tome el curso de Introducción al diseño.
Todas las Serif son para papel e impresión.
Para digital son sans-serif. Podría utilizarce en el digitalas las Serif siempre que tenga una justificación por diseño.
Les recomiendo aprobar el curso de Introducción al diseño, les dará una visión más clara para elección de colores, como maquetar, alinear, lo fundamental para un diseño balanceado.

Muy práctico, aunque tengo una duda. ¿Si selecciono varias alternativas de la misma fuente, cómo cambio entre una y otra? Ejemplo: Si aplico la Roboto light, y quiero cambio a Roboto Black 700 en otra área

para usar lasfuentes y variar en la misma fuente se usa

font-weight :

de acuerdo a esto:
100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ultra Bold

En el curso de introducción al diseño se menciona que se recomienda tener 2 fuentes como mínimo y 3 como máximo. También que al hacer textos largos digitales usar una fuente sans-serif ya que es menos cansado a la vista.

Para usar iconos y los mismos como fuente en tu web site recomiendo usar icomoon , siempre me a resultado muy útil.

Que bueno que ya tenemos los Quiz en Desktop, todos los cursos deberían tener xD

Recomiendo checar la propiedad font-display es genial 😃
como buenas prácticas, no tener demasiadas fuentes en el proyecto.

Al trabajar con fuentes locales, cuando nuestro proyecto incluye fuentes que nos entregaron los diseñadores en un archivo, el procedimientos que implemente seria el siguiente:
En el HEAD de HTML:

<link rel="stylesheet" href="./fonts/SoberTexto-Regular.otf">
    <link rel="stylesheet" href="./fonts/SoberTitular-Regular.otf">

Y en CSS

@font-face {
    font-family: Sober;/* Aquí yo le estoy asignado este nombre a la familia */
    src: url(./fonts/SoberTitular-Regular.otf), url(./fonts/SoberTexto-Regular.otf);
    /* Estas ultimas son la ubicación del archivo en el proyecto local */


html {
       font-family: Sober;
  }

Y así cargaría en el proyecto la fuente.

Me faltaría ver como llamar cada tipo de fuente específicamente, trabajare en eso 😃

WEBFONT

• Una webfont te va a permitir utilizar mas recursos de fuentes que disponemos en sitios como googlefon.

• Tenemos dos forma de añadir estas fuentes directo de googlefon con:

  • @import

    style>
    @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
    </style>
    

    Mediante esto, importamos la fuente a nuestro css para después llamarla bajo el nombre de dicha fuente, sin embargo, no es tan buena practica por la forma en la que se carga.

  • <link>

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

  De esta forma añadimos la fuente a nuestro head del documento html, y con esto conseguiremos que la carga sea más optima, posterior a eso utilizamos la regla de css para llamar a nuestra fuente.

  font-family: 'Nunito', sans-serif
  

  NOTA: la forma “@import” y “<link>” usan la misma regla css.

Recomiendo fontSquirrel, es muy util también para el tema de generar y descargar fuentes para la web 😃

Comparto los apuntes de la clase 😃

En el quiz que viene a continuación se debe corregir un textico:

El diablo está en los detalles. Hagamos primero lo fácil (poner la fuente en el head, por ejemplo) y luego ataquemos lo complejo.

Si quieren ver las fuentes que tienen instaladas en su computadora pueden ir a https://wordmark.it/

Excelente Diego, este curso me ha llevado de solo imaginarme a como se podria crear una pagina web, a conocer todos los conceptos y las buenas practicas … Ahora lo que queda es comenzar a crear nuestros propias paginas para ir ganando experiencia poco a poco.

Performance: La velocidad a la que las páginas web se descargan y se muestran en el navegador web del usuario

Supongo que puedo descargar la fuente e integrarla a los directorios de mi proyecto. Esto evitaría el problema del performance con el uso de import?

RESUMEN CLASE 43:
WEB FONTS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web FontsS</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Roboto+Mono&family=Shadows+Into+Light&display=swap" rel="stylesheet">
</head>
<body>
    <main>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur commodi laborum explicabo ipsum tempora nesciunt aliquid facere tenetur veritatis consequuntur reprehenderit molestiae qui, consectetur, labore maxime minima sapiente, doloribus esse!
        </p>
    </main>
</body>
</html>

CSS

html {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.2rem;
}

Recursos importantes:

• Generic-families
• CSS font-family Property

Muchisimas gracias profe por la explicación…

Hola, tenga en cuenta que si deciden incluir la tipografía dentro de su proyecto:

@font-face {  
  font-family: 'Ubuntu';
  src: url(../fonts/Ubuntu-Light.ttf);
  font-display: swap;
}

utilizar font-display: swap para evitar pantallas vacías en textos, utilizando las fuentes por defecto del navegador, hasta que cargue la fonts del proyecto.

También pueden agregar en HTML un preload para que cargue primero el archivo de la fuente.

<link rel="preload" href="./fonts/Ubuntu-Light.ttf" as="font" type="font/ttf" crossorigin>

Paso una web donde esta explicado con mayor detalle lo mencionado anteriormente. preload-fonts

Les comparto una pagina donde es bueno buscar fuentes:

• https://www.dafont.com/es/

Dejo un artículo sobre el uso de web fonts super bueno! 😄

• Using Web Fonts

Recomiendo el curso de Lettering aquí en Platzi, donde se explica muy bien el tema de las fuentes y su impacto visual, los distintos elementos que las componen, etc.

Google Fonts (anteriormente llamado Google Web Fonts) es un directorio interactivo de uso libre bajo la aplicación que programa interfaces para fuentes de la web. Fue lanzado en 2010, y renovado en 2011.

BUENAS PRACTICAS

Importar las fuentes en el head del html:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap" rel="stylesheet">

En lugar:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap');

Acá dejaré mi resumen de clase con 3 incisos:

1. Realicé con HTML el cuadro de fuentes presentado en el video, aprendí css básico para tablas y como ejercicio para colocar fuentes.
2. Se alcanza a notar lo dicho sobre ‘display=swap’ al cargar la página. Verifiquenlo desde aqui presionar F5 (recargar) con intervalos de 2 seg para notar el cambio.
3. Hay una explicación sobre rel=“preconect” comantariado en el HTML, pueden verlo con el inspeccionador de elementos o en el código siguiente.

HTML

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>WebFonts</title>
	<link rel="stylesheet" href="./style.css" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
		href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;700&family=Great+Vibes&family=Roboto+Mono:wght@300;500;700&display=swap"
		rel="stylesheet"
	/>
	<!--
		Este último link trae las fuentes de google fonts, para este caso trae 3 fuentes en diversos tamaños (grueso de fuente / font-weight)
		Dancing Script: 400,500,700
		Roboto Mono: 300,500,700
		Great Vibes (ancho único o normal)
		&display=swap es una propiedad anidada desde google fonts que le permite al navegador cargar y renderizar todo el contenido de la página con la fuente predeterminada del navegador y cuando el proyecto completo esté listo realizar el cambio de fuente.

		link rel="preconnect" se utiliza para realizar una conexión previa a un servidor sin llamar datos, abre la conexión. El atributo 'crossorigin' realiza una conexión segura (adicional) a un servidor para obtener los datos
	-->
</head>
<body>
	<header class="main-header">
		<h1 class="main-header__title">WebFonts</h1>
	</header>
	<section class="generic-fonts">
		<p class="generic-fonts__description">Aqui verás una relación de fuentes genéricas y como lucen</p>
		<table class="fonts-table">
			<thead class="fonts-table__header">
				<tr class="fonts-table__row">
					<th class="fonts-table__cell fonts-table__cell--header">Nombre genérico</th>
					<th colspan="2" class="fonts-table__cell fonts-table__cell--header">Ejemplos de fuente</th>
				</tr>
			</thead>
			<tbody class="fonts-table__body">
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__serif--serif">serif</td>
					<td class="fonts-table__cell font__serif--times-new-roman">Times New Roman</td>
					<td class="fonts-table__cell font__serif--georgia">Georgia</td>
				</tr>
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__sans-serif--sans-serif">sans-serif</td>
					<td class="fonts-table__cell font__sans-serif--helvetica">Helvetica</td>
					<td class="fonts-table__cell font__sans-serif--verdana">Verdana</td>
				</tr>
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__cursive--cursive">cursive</td>
					<td class="fonts-table__cell font__cursive--dancing-script">Dancing Script</td>
					<td class="fonts-table__cell font__cursive--great-vibes">Great Vibes</td>
				</tr>
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__monospace--monospace">monospace</td>
					<td class="fonts-table__cell font__monospace--courier-new">Courier New</td>
					<td class="fonts-table__cell font__monospace--roboto-mono">Roboto Mono</td>
				</tr>
			</tbody>
			<tfoot class="fonts-table__footer">
				<tr class="fonts-table__row">
					<td colspan="3" class="fonts-table__cell">
						Muestra de fuentes tomada del
						<a href="https://platzi.com/clases/2008-html-css/31229-web-fonts/" target="_blank">gráfico en el curso</a>
					</td>
				</tr>
			</tfoot>
		</table>
		<article class="explanation">
			<h2 class="explanation__title">Buenas practicas al incrsutar fuentes</h2>
			<ol class="best-practices">
				<li class="best-practices__element">Solo cargar una fuente por proyecto</li>
				<li class="best-practices__element">Importar siempre las fuentas desde la etiqueta head</li>
			</ol>
		</article>
	</section>
</body>

CSS

/*
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;700&family=Great+Vibes&family=Roboto+Mono:wght@300;500;700&display=swap');

Es una mala practica, las fuentes deben cargarse desde el la etiqueta head en el documento HTML

*/

:root {
	--border-table-color: #cfcfcf;
	--header-bg-color: darkgreen;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	font-family: sans-serif;
}

a {
	color: blue;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.main-header {
	padding: 0.5em;
}

.main-header__title {
	text-align: center;
	font-size: 2em;
}

.generic-fonts {
	padding: 1em;
	margin: 0 auto;
	max-width: 38em;
}

.generic-fonts__description {
	text-align: center;
	padding: 1em;
}

.fonts-table {
	margin: 0 auto;
	width: 100%;
	border-spacing: 0;
	text-align: center;
	border-collapse: separate;
}

.fonts-table__header {
	background-color: var(--header-bg-color);
	border: 2px solid var(--header-bg-color);

	color: white;
}

.fonts-table__row .fonts-table__cell:last-child {
	border-left: none;
}

.fonts-table__row .fonts-table__cell:nth-child(2) {
	border-right: none;
	border-left: none;
}

.fonts-table__header .fonts-table__cell {
	border: none;
}

.fonts-table__header .fonts-table__cell--header {
	padding: 0.75em 1em;
}

.fonts-table__cell {
	padding: 0.25em 0.5em;
	border: 1px solid var(--border-table-color);
	border-top: none;
	width: 33.33%;
}

.fonts-table__body {
	border-top: none;
}

.font__serif--serif {
	font-family: serif;
}

.font__serif--times-new-roman {
	font-family: "Times New Roman", serif;
}

.font__serif--georgia {
	font-family: Georgia, serif;
}

.font__sans-serif--sans-serif {
	font-family: sans-serif;
}

.font__sans-serif--helvetica {
	font-family: Helvetica, sans-serif;
}

.font__sans-serif--verdana {
	font-family: Verdana, sans-serif;
}

.font__cursive--cursive {
	font-family: cursive;
}

.font__cursive--dancing-script {
	font-family: "Dancing Script", cursive;
}

.font__cursive--great-vibes {
	font-family: "Great Vibes", cursive;
}

.font__monospace--monospace {
	font-family: monospace;
}

.font__monospace--courier-new {
	font-family: "Courier New", monospace;
}

.font__monospace--roboto-mono {
	font-family: "Roboto Mono", monospace;
}

.fonts-table__footer {
	font-size: 0.75em;
	text-align: right;
}

.fonts-table__footer .fonts-table__cell {
	border: none;
}

.explanation {
	padding: 0.5em;
}

.explanation__title {
	margin: 1em auto;
}

.best-practices {
	padding-left: 1.25em;
}

.best-practices__element {
	line-height: 1.5em;
}

Generic-Families:

Mi novia es arquitecta, y me enseño una pagina donde puedes configurar letras para sus diseños del trabajo, y la verdad me gusto mucho, esta es la pagina:

https://www.dafont.com/es/

Lol, toda mi vida creí que la serif y sans-serif eran fuentes y no categorías de fuentes y que de ellas partían muchísimas más.

Una consulta es buena practica cargar un tipo de fuente. Y después si quiero modificar fuentes en CSS a alguna de mis etiquetas podría hacerlo? cual predominaría en el renderizado? gracias!

Si estás en un sitio web y ves una fuente que te gusta, puedes usar esta extensión de Chrome para saber cual es 😃

Es correcto usar google fonts para hacer import o font-face de una fuente en CSS o link en HTML: [https://fonts.google.com/]https://fonts.google.com/

La mejor práctica es hacer el link en HTML, por defecto google fonts pone display=swap.

Les dejo otro link también muy bueno para elegir fuentes.
https://es.bestfonts.pro/

Les dejo algunos link si quieren inspirarse para elegir fuentes.

1. (https://fontsinuse.com/)
2. (https://dribbble.com/shots/following/product-design)
3. (https://www.behance.net/search/projects?search=web design&tracking_source=typeahead_search_suggestion)

Recomiendo: FontAwesome. Tiene muchos íconos.
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

chrome-extension://ohcpnigalekghcmgcdcenkpelffpdolg/mobile_app.html

esta extension te permite saber el codigo de cualquier color que este en tu navegador, es super util para practicar cuando uno quiere compiar un color que le gunto en una foto o una pag web

¿Cuál sería la mejor practica para colocar una única fuente, en el selector universal, el html o body?

Swap le da a la fuente un período de bloque de cero segundos y un período de intercambio infinito. Esto significa que el navegador dibuja texto inmediatamente con un respaldo si la fuente de la fuente no está cargada, pero cambia la fuente tan pronto como se carga. Similar al bloque, este valor solo debe usarse cuando la representación de texto en una fuente en particular es importante para la página, pero la representación en cualquier fuente seguirá transmitiendo un mensaje correcto. El texto del logotipo es un buen candidato para el intercambio, ya que mostrar el nombre de una empresa con una alternativa razonable transmitirá el mensaje, pero eventualmente utilizará el tipo de letra oficial.

display=swap ; signinfica que primero carga todo el contenido de la página y luego cambia el tipo de letra. Importarlo en el head es buena práctica.

Los import no son buenas practicas porque nos pegan en performance. La mejor practica es no importar tus fuentes en tus estilos sino ponerlas adentro del head.
Como buena practica no es bueno cargar más de una fuente externa. Porque pega en performance. Si tenemos que cargar 2 fuentes que este bien justificado esta perfecto pero si tenemos mas de 2 ya es un problema para nuestro performance se puede convertir un problema a la hora de renderizar.
Importarla siempre en la etiqueta head.

Una vez que efectuado el enlace de la fuente con la etiqueta link, usar la propiedad: font-weight para utilizar los diferentes tamaños seleccionados en google fonts.
Ejemplo:
.nueve {
font-family: ‘Roboto’, sans-serif;
font-weight: 900;
}

¿Por que existen paginas que cargan en segundos y otras en varios?
Pues existen varios factores, pegar un import de las fuentes es uno de ellos

fuentes - Sans Serif sin linea al final estilo plano usada en Google Docs y similares

Qué forma tan sencilla de explicar esto. En otro curso hicieron un enredo de esta parte.

Ok, entendido el Display=Swap.
Eso me va a ayudar para un par de proyectos. Eso de sentir que se detiene la carga del sitio para que las fuentes se terminen de cargar es muy peye.

Por que no es buena practica importar las fuentes en el CSS con el @import ??

📝 Las tipografías web permiten especificar los archivos de tipo de letra.

En CSS, las “generic font families” (familias genéricas de fuentes) son categorías de fuentes que comparten características visuales similares. Estas familias se utilizan como valores de respaldo cuando la fuente específica no está disponible en el dispositivo del usuario. Aquí están las cinco familias genéricas de fuentes:

serif:

Ejemplo: font-family: ‘Times New Roman’, Times, serif;
Se utiliza para fuentes con serifa, que son fuentes con pequeños detalles al final de los trazos.
sans-serif:

Ejemplo: font-family: Arial, Helvetica, sans-serif;
Se utiliza para fuentes sin serifa, que son fuentes sin detalles adicionales en los extremos de los trazos.
monospace:

Ejemplo: font-family: ‘Courier New’, Courier, monospace;
Se utiliza para fuentes monoespaciadas, donde cada carácter ocupa el mismo ancho, como en una máquina de escribir.
cursive:

Ejemplo: font-family: ‘Comic Sans MS’, cursive;
Se utiliza para fuentes que simulan la escritura a mano o la caligrafía.
fantasy:

Ejemplo: font-family: ‘Impact’, fantasy;
Se utiliza para fuentes decorativas y fantasiosas.
Estos valores se pueden utilizar como valores de respaldo en la propiedad font-family para proporcionar opciones más amplias en caso de que la fuente preferida no esté disponible. Por ejemplo:

css
Copy code
body {
font-family: ‘Open Sans’, Arial, sans-serif;
}
En este ejemplo, si “Open Sans” no está disponible, se intentará con “Arial” y, finalmente, con cualquier fuente sans-serif genérica del sistema del usuario si ninguna de las anteriores está disponible.

Este curso tiene muchos elementos clave, me esta gustando bastante…

se puede hacer un import en css directamente pero no es tan bueno para el performance es decir para el rendimiento, y eso se convierte en mala practica, yo personalmente importo por link o descargo las fuentes en formato woff

.

Por fin pude ver la diferencia entre sans-serif y serif y el uso, la verdad no sabía por qué se colocaban al final de la fuente desscrita en css: ‘Tahoma…’, sans-serif;

El tema dice WEB FONTS, no solamente FONTS.

Yo por lo general cuando quiero usar fuentes diferentes uso las de Google Fonts

Google font la verdad que es una herramienta bastante útil y muy fácil de usar!

Home Platzi 2020

Home Platzi Junio 2022

Buenas prácticas a prácticar e.e

Desde un archivo externo con la etiqueta <style>, como atributo en una etiqueta HTML.

Díganme que notan el error de sintaxis. (Pregunta del quiz)

Les comparto este link donde google nos comparte varios artículos sobre fuentes para conocer un poco más del tema, son pequeñas guías para orientarnos mejor sobre que tipografía elegir para nuestro proyecto https://fonts.google.com/knowledge

Parece algo basico, pero es muy interesante.

Les recomiendo este sitio web para descargar todo tipo de fuentes tipográficas: https://www.dafont.com/es/

Tremenda clase, brutal la verdad en la forma como interactuamos con paginas externas, mas para fuentes nuevas

Buenas noches, colegas, así voy avanzando y aplicando lo nuevo sobre lo anterior aprendido en las primeras clases.

Encontré una FUENTE Sans-serif con puntas en las esquinas de las letras como las fuentes Serif*

La fuentes es:
Cambria Math

buenas practicas solo cargar 1 fuente externa e importarla en la etiqueta head

Información resumida de esta clase
#EstudiantesDePlatzi

• Existen fuentes ya instaladas en tu computadora por defecto

• En google font puedo descargar muchísimas fuentes

• Los import en CSS no son buenas prácticas, lo mejor es importarla en html y en la etiqueta de head

• Como buena práctica es solo importar 1 o 2 fuentes por proyecto, ya que si tenemos más de 2 fuentes podemos tener problemas en el tiempo de renderizado

https://type-scale.com/ les recomiendo esta web para setear los estilos de las fuentes. Es muy buena! saludos

google fonts chicos!

• Para buenas prácticas solo usar una fuente.
• Si cargamos dos tienen que estar bien justificados.
• Más de dos puede generar problemas.
• Importarlas siempre en la etiqueta head.

Excelente clase, muy clara y útil.
La verdad una buena fuente bien escogida le da mucha personalidad a tu página.

Súper interesante esta clase.