Fuentes de nuestro proyecto

Inspeccione mas los tamaños de fuente y usa Inter de 700

Fuentes:

• Inter (300, 500)
• DM Sans (400, 500, 700)

Recomendaciones de FRONT A FRONT

Hey amigo dev…vengo del futuro🤖

Vengo a hacer un par de recomendaciones:

•Aprende a utilizar muy bien BEM (metodología explicada en este curso ya que lo necesitaras en tu futuro empleo👷)

Sitio para aprender bem

•📱Cuando este en un proyecto y estes prototipando, empieza desde la versión movile, (mi error fue ese, no comenzar por ahí) así te ahorraras mucho tiempo.

💣Extra: Aprende CSS grid, eso será la Bomba para acelerar y crear sitios increíbles 😃 💣

Curso de CSS GRID 2021

PD: Te sirvió?

Una buena practica es ocupar variables para codigo repetido asi no repetir constantemete una linea de codigo como por ejemplo el tamaño de la fuente y el tipo de fuente, colores (aun no los he agregado)

:root{
	--font-sans:'DM Sans', sans-serif;
	--font-inter:'Inter', sans-serif;
	--size-300:300;
	--size-400:400;
	--size-500:500;
	--size-700:700; 
}```

a todos… antes yo pensaba que importar elementos desde Google era incluso una buena práctica, hasta que me vine a vivir a China. Si usas cosas escenciales para cargar la página, conexiones como las que usamos en China van a volver sus páginas insufribles! Mi consejo es que pongan las fuentes y demás codigos escenciales (como en un pasado lo fue jQuery u otras apis) en sus propios servidores, y dejar lo que si o si toca dejarlo en google pues en google (tipo las analitycs o los addsense)

Estas fueron las que yo encontré y ustedes?
PD: Les dejo la etiqueta para que las importen 😄

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

Para ser mas precisos a mi me salió Inter(400) en vez de la de 300.

Hola amigos, les comparto una web donde hay combinaciones de fuentes, solo 2 como dice el gran Diego.

https://fontpair.co/

Es absurdo lo buen profesor que es Diego excelente.

Si ya conocen el nombre de la fuente que quieren importar, les recomiendo la extensión de Google Fonts para Visual Studio Code (Les permite añadir fuentes mediante link o import) : https://marketplace.visualstudio.com/items?itemName=lior-chamla.google-fonts

Recuerda buenas practicas:
(a mi se me olvida mucho este par de buenas practicas)

• no cargar mas de dos fuentes
• cargarlas directamente con el link en el head del html.

Para ahorrarse lo del Toogle Word Wrap pueden presionar Alt + z

Hola, comparto el link actualizado ya que tambien hay un inter 700 en el precio.

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">```

Regla CSS

font-family: ‘DM Sans’, sans-serif;
font-family: ‘Inter’, sans-serif;```

Las fuentes son:

• Inter 300
• Inter 400
• DM Sans 400
• DM Sans 500
• DM Sans 700

A dia de hoy, se hace con las siguientes lineas:
html:
Preferible usar este

<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=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet"> 

css:

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap');

toggle-wrap === alt + z

Por si necesitan los enlaces de las fuentes.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Aquí les dejo el link de las fuentes para embeberlo en nuestro HTML

<link href=“https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap” rel=“stylesheet”>

Hola 😃
Estas son las fuentes. Seguí las que aparecen al principio de Andrés, pero en la clase 10 descubrí que no carga del todo bien y genera una fuente distinta. Así que las copié directo de Google Fonts

    <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=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap" rel="stylesheet">

Recomiendo para usar las fuentes locales
https://google-webfonts-helper.herokuapp.com/

Para aquellas que hacen el curso este es el nuevo link que me genera Google fonts:

<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=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap"
      rel="stylesheet"
    />

Si ya conocen el nombre de la fuente que necesitan les recomiendo la extensión de Google Fonts para Visual Studio Code (Les permite agregar fuentes por link o import rápidamente) : https://marketplace.visualstudio.com/items?itemName=lior-chamla.google-fonts

Fuentes:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">```

DM sans (400,500,700)
Inter (300,500)

<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=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">

font-family: 'DM Sans', sans-serif;
font-family: 'Inter', sans-serif;

<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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:[email protected]&display=swap" rel="stylesheet">

ya con las fuentes cargadas en el head segun lo recomendado de buenas practicas

Este el codigo que me dio Google font para agregar las fuentes

<code> 
	<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=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">

Saludos

¿Por que los @import no son buenas practicas?

Una forma facil de guardar y ocupar con posterioridad las fuentes es alamecenarlas directamente en variables dejo el ejemplo:

:root{
    --bitcoin-orange:#F7931A;
    --soft-orange:#FFE9D5;
    --secundary-blue:#1A9AF7;
    --dmSans:font-family: 'DM Sans', sans-serif;
    --inter:font-family: 'Inter', sans-serif;
}

Agregar fuentes al html

Colocar fuentes al proyecto: se recomienda no utilizar más de dos tipos de fuentes. Todos los tamaños y pesos de las tipografías deben pertenecer solamente a dos familias. En este caso "Inter" y "DM Sans".

no sabia que podian agregar 2 fuentes con un solo link 😃

Pues a dia de hoy dic/21 google fonts te genera tres “links”, en aportes anteriores de compañeros hasta hace poco se generaba 2 “links” y esto google lo hacia con la finalidad de precargar las fuentes y darle mejor rendimiento a la pagina, pero hoy genera estos tres links que todavia no estoy seguro la finalidad de agregar uno mas.
A todo esto calculo que se deben copiar los tres a mi html

<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=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap” rel=“stylesheet”>

En este enlace pueden ver todas las fuentes en Google:
https://fonts.google.com/

Si ya conocen los nombres de las fuentes que necesitan, les recomiendo la extensión de Google Fonts para Visual Studio Code (Para agregar fuentes mediante link o import)

DM SANS 400 500 700
INTER 400 500 700

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;700&display=swap" rel="stylesheet"> 

<!-- CSS FILE -->
    font-family: 'DM Sans', sans-serif;
    font-family: 'Inter', sans-serif;

link fuentes html:
<link rel=“preconnect” href=“https://fonts.gstatic.com”>
<link href=“https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap” rel=“stylesheet”>

link fuentes css:
font-family: ‘DM Sans’, sans-serif;
font-family: ‘Inter’, sans-serif;

Código para agregar las fuentes en el <head> de HTML:

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">

Código CSS para usar las fuentes:

font-family: 'DM Sans', sans-serif;
font-family: 'Inter', sans-serif;

codigo de las fuentas y puse la etiqueta style solo para la referencia de la regla en el css

 <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap"
        rel="stylesheet">
    <style>
        ¨ {
            font-family: 'DM Sans', sans-serif;
            font-family: 'Inter', sans-serif;
        }

Buena práctica:
No utilizar más de dos fuentes en un mismo proyecto.
Herramienta para descargar e importar fuentes:
Google fonts

Por buenas practicas no podemos meter mas de dos fuentes, si el diseño tuviera mas de dos fuentes hay que hablar con los diseñadores mencionándoles ese problema y tenemos que escoger entre 1 o 2 para poder manejar todas las fuentes con eso.
Los import en CSS no son tan buenas practicas para las fuentes sobre todo cuando tenemos mas de uno. Asi que copiamos el link.

Acá la especificación de la regla:

font-family: ‘DM Sans’, sans-serif;
font-family: ‘Inter’, sans-serif;

Hola Compañeros, encontré en un repositorio esta forma muy útil para cargar las fuentes localmente si están trabajando con SASS:

@function str-replace($string, $search, $replace: "") {
	$index: str-index($string, $search);

	@if $index {
		@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
	}

	@return $string;
}

//----------- Mixin -------------

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
	$src: null;

	$extmods: (
		eot: "?",
		svg: "#" + str-replace($name, " ", "_")
	);

	$formats: (
		otf: "opentype",
		ttf: "truetype"
	);

	@each $ext in $exts {
		$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
		$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
		$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
	}

	@font-face {
		font-family: quote($name);
		font-style: $style;
		font-weight: $weight;
    font-display: swap;
		src: $src;
	}
}

Con esta función y mixin lo único que quedaría sería cargar la fuente correspondiente, que se pueden descargar de la misma página de Google Fonts e incluir los archivos ttf en una carpeta llamada fonts dentro de la carpeta CSS. Posteriormente en nuestro ambiente de SASS, compilamos lo siguiente:

@include font-face(dm-sans, fonts/DM_Sans/DMSans-Regular)

De todas maneras les dejo el link al repositorio por cualquier duda y para que vean otros parámetros que se le pueden agregar al @include.

Resumen del aporte de algunos compañeros y del profe, con lo que me quede fue;

index.html

<!-- Font -->
<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

styles.css

(contexto setup inicial del curso definitivo HTML y CSS; la medida rem mejora la accesibilidad para personas con dificultad visual ya que es una medida relativa que se base en el root con una medida inicial de 16px pero si lo dividimos entre 62.5% desde la etiqueta HTML (16px*0.625) nos daría una nueva medida de 10px, espero ser claro.

:root{
	--font-sans:'DM Sans', sans-serif;
	--font-inter:'Inter', sans-serif;
	/*Font sizes (fs) Tamaño (xs-extra small, s-small, m-medium, b-bold */
	--fs-xs: 30rem;
	--fs-s: 40rem;
	--fs-m: 50rem;
	--fs-b: 70rem; 
}
* {
    box-sizing: border-box;
    margin: 0rem;
    padding: 0rem;
}
html {
    font-size: 62.5%;
}

Aquí el link directo a las fuentes de google.
DM Sans : https://fonts.google.com/specimen/DM+Sans?query=DM+sans
Inter: https://fonts.google.com/specimen/Inter?query=inter
También les dejo el <link para html>
<link rel=“preconnect” href=“https://fonts.gstatic.com”>
<link href=“https://fonts.googleapis.com/css2 family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap” rel=“stylesheet”>
Y el cómo importarlas
font-family: ‘DM Sans’, sans-serif;
font-family: ‘Inter’, sans-serif;

Una pregunta que hace el preconnect?

Nota: no es recomendable añadir muchas fuentes pues sobrecarga la página, se podría adminitir un máximo de 2 fuentes distintas.

Aquí les dejo el link para que puedan descargar las fuentes de acuerdo a los requerimientos del proyecto:

Google Fonts

Clase 6 - Fuentes de nuestro proyecto

Resumen de la clase

¿Desde dónde podemos descargar fuentes tipográficas para nuestros proyectos web?

• Google Fonts.

¿Cuántas fuentes tipográficas debemos de usar en nuestro proyecto web?

• Por buenas prácticas se recomienda que usemos entre 1 o 2 fuentes.

¿Cómo podemos saber qué fuentes tipográficas van a usar nuestros proyectos web?

• Esta información la podemos averiguar por medio de dos fuentes:
  • El diseñador gráfico del equipo.
  • El diseño de Figma.

¿Cómo podemos saber el tipo de fuente tipográfica que hay en los diseños en Figma?

• Simplemente dando click sobre el texto podemos ver esta información en el menú derecho. Este menú nos muestra el código CSS del proyecto, esto nos sirve como guía a la hora de trabajar.

¿Qué pasos debemos de seguir para descargar fuentes tipográficas desde Google Fonts y agregarlas a nuestros proyectos web?

• Buscar la fuente o las fuentes.
• Seleccionar los pesos de la fuente que necesitamos (Si se requiere).
• Para seleccionar los pesos de la fuente damos click en los botones que dicen “Select this style”.
• En el menú derecho debemos de seleccionar la opción “Embed”. En esta sección tenemos dos formas para agregar las fuentes tipográficas a nuestro proyecto:
  • Con <link>.
  • Con @Import.
• Copiamos el código que nos proporciona Google Fonts dependiendo de la opción que hayamos escogido y la pegamos en nuestro proyecto web.
• Llamamos en nuestro código CSS la fuente según corresponda

¿Entre <link> y @Import cuál de estas opciones es mejor para usar en nuestros proyectos web?

• La etiqueta <link>.

¿En qué lugar de nuestro proyecto web debemos de escribir la etiqueta <link>?

• Debemos de hacerlo dentro de la etiqueta <head> de nuestro documento HTML.

Por is alguien le interesa yo genere una ruta con fuentes colores usando variables de entorno igual resete akgnos estilos

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

:root {
    /*--------- Listado de colores ---------*/
    --bg-secondary-blue: #1A9AF7;
    --bg-bitcoin-orange: #F7931A;
    --bg-soft-orange: ##FFE9D5;
    --bg-soft-blue: #E7F5FF;
    --bg-warm-black: #201E1C;
    --bg-warm-black1: #282623; 
    --bg-grey: #BABABA;
    --bg-off-white: #FAF8F7;
    --bg-just-white: #FFFFFF;
    --bg-gradient-linear: linear-gradient(207.8deg, var(--bg-warm-black) 16.69%, var(--bg-bitcoin-orange) 100%);

    /*--------- Sombras ---------*/
    --shadow-white: 0px 4px 8px rgba(89, 73, 30, 0.16);
    --shadow-black: 0px 4px 8px rgba(0, 0, 0, 0.16);

    /*--------- Fuentes  ---------*/
    --font-family: 'DM Sans', sans-serif;
    --normal: 1rem; /* 16px */
    --small: .875rem; /* 14px */
    --smallx: 1.25rem; /* 20px */
    --medium: 1.5rem;/* 24px */
    --large: 2.5rem; /* 40px */

    /*--------- Fuente ancho e linea ---------*/
    --small-line: 1.125rem; /* 18px */
    --smallx-line: 1.5rem; /* 24px */
    --medium-line: 1.625rem; /* 26px */
    --large-line: 2.625rem; /* 42px */
}

/*------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

Consegui estas:

DM Sans
400 , 500 , 700
https://fonts.google.com/specimen/DM+Sans?query=dm+sans

Inter
400 , 500 , 700
https://fonts.google.com/specimen/Inter?query=Inter

📌 Traer las fuentes desde el head con link es una buena práctica
💪 Máximo 2 fuentes en total en el proyecto

Les dejo un video para poder añadir una fuente externa a nuestro proyecto:
https://www.youtube.com/watch?v=022kUEr3EUA&t=13s

Muy buenas las clases

holaaa, dejo las fuentes:

<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=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap” rel=“stylesheet”>
este es el css:
font-family: ‘DM Sans’, sans-serif;
font-family: ‘Inter’, sans-serif;

<!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">
    <!-- FONTS -->
    <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=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet"> 
    <title>Web App | Mobile First</title>
</head>
<body>
    <header></header>
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>
</html>

Super La clase Ahora Si veo que viene Lo Bueno

HTML5

<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=DM+Sans:ital,wght@0,500;1,400;1,700&family=Inter:wght@300;500&display=swap" rel="stylesheet">

CSS3

font-family: 'DM Sans', sans-serif;
font-family: 'Inter', sans-serif;

Los @import en css no son buenas prácticas en css, sobre todo cuando tenemos más de una fuente.
Se recomienda usarlo mediante <link>.

<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=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap” rel=“stylesheet”>

Hola a todos, alguien sabe cual es el repo de este proyecto?
(En GitHub)

súper 😃

No encontré todos los assets em Figma, alguien me puede ayudar?

Fuentes: Creanme

En el actualizado se usa Inter 700 (bold), tambien podriamos traer inter 700.

Siento que voy a aprender y practicar mucho con este curso 🙌

Si no has descargado tu assets, hazlo ahora 😄
https://drive.google.com/file/d/1Jg6m-DyDNPlsPc6HgzJFdwmJH3-BYC-z/view?usp=sharing

Bien todo bien De granda, si pude descargar todo los iconos

colocar fonts

👌

Alguien me puede indicar porque tiene que ser después de title?

Por buenas prácticas. No podemos agregar más de dos fuentes en el proyecto. Buena recomendación.
Gracias .

Link de las fuentes

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">