Inspeccione mas los tamaños de fuente y usa Inter de 700
Bienvenida al curso
Por qué aprender Responsive Design con Mobile First
Setup inicial
Analizando el diseño: proyecto del curso
El valor de Mobile First
Arquitectura inicial
Assets de nuestro proyecto
Fuentes de nuestro proyecto
Estilos base
Sección de Header
Maquetación del header
Implementando BEM
Uso de linear-gradient
Uso de position para botón flotante
Sección de Intercambios
Estructura base de la sección de intercambio
Imagen de background
Estructura de tabla de monedas
Estilos base de tabla de monedas
Detallando estilos de tabla de monedas
Finalizando estilos de tabla de monedas
Sección de Beneficios
Estructura base de la sección de beneficios
Estilos de la sección de beneficios
Maquetando tarjetas de beneficios
Sección de Planes
Maquetando sección comodín
Estructura de sección de planes
Aplicando estilos a sección de planes
Aplicando estilos a las tarjetas de la sección de planes
Detallando estilos en tarjetas de planes
Aplicando estilos al botón de call to action
Scroll horizontal con CSS
Sección de Footer
Footer
Media Queries
Aplicando media queries
Lighthouse
Análisis con Lighthouse
Próximos pasos
Cierre y próximos pasos
Comparte tu proyecto y certifícate
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
There are several types of fonts that make up the design of a project. Remember that as part of good practice in web development, you should not have more than two fonts. In case you find more than two, you will have to communicate with the design team to reach a conclusion on which ones to choose.
How to know the font type in Figma?
The design team may have already given you a report with this data, but if not, you can recognize the font from the project in Figma. To do this:
- Click on the font to inspect.
- On the right panel, in the inspect tab you will see details such as size, thickness and font type. You must take all of them into account when looking for them.
In this way we check all the texts to make sure of the number of fonts used.
How to download fonts for a project?
As you may remember, one of the best sites to find fonts is Google Fonts. To download the fonts for our project, we do the following:
Copy the name found in the "Inspect" tab of the selected font. Click on the font.
You will find several font thicknesses. Let's select them based on the ones found in the inspection of our project by clicking on "Select this style". We do the same steps with the other font if found.
Once we have selected the fonts and thicknesses we are going to use, we select the "Embed" tab in the right panel. Copy the link that Google Fonts gives us.
How to insert fonts in a project
To link the link we copied in the previous step, we open our index.html file and go to the head section. Paste the link just below the title tag.
The link generated for the project we are working on is as follows:
<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;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">Note: The link tag with the attribute value rel="proconnect" notifies the browser that the page requires a connection to another domain and that this should be done as quickly as possible. In this way, when the browser needs to make use of the resources(in this case the font types), the downloading of resources will be faster because the connection will already exist previously. This allows to improve the page performance.
Remember that Google itself tells you, just below the link it gives you, how to call the font family you selected.
And that's it! Now we can start creating our first styles.
Contribution created by: José Miguel Veintimilla (Platzi Contributor) with contributions from Isay Humberto Lucas Hernandez.
Contributions 81
Questions 17
Sort by:
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👷)
•📱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 😃 💣
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.
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:
hola, ya llevo tiempo con este problema, cuando voy a buscar las fuentes no me salen para agregarlas en 100, 400 o 500.
:'(
Como recomendación para los nuevos, hagan una copia del proyecto de **Figma** en sus borradores, así pueden entrar a las variables del proyecto e ir viendo todo con más detalle. Ahora Figma cobra para ver el código CSS.
¿Por qué la "buena práctica" limita a 2 la cantidad máxima de fuentes que un sitio web debería tener? 🤔.
Dejaré por aquí este pequeño artículo de la Diseñadora Web Celeste López donde explica sobre las tipografías/fuentes ✨.
<https://www.latevaweb.com/el-diseno-web-y-la-tipografia>
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.
Yo utilizo esta extensión de VS Code para importar las fuentes de Google Fonts de manera rápida![]()
Clase 6: Hay diversos tipos de fuentes que componen el diseño un proyecto. Recuerda que como parte de las buenas prácticas en el desarrollo web, no debes tener más de dos fuentes. En caso de encontrar más de dos, tendrás que comunicarte con el equipo de diseño para llegar a una conclusión sobre cuáles elegir.
## ¿Cómo conocer el tipo de fuente en Figma?
Puede que el equipo de diseño ya te haya entregado un informe con estos datos, pero si no es así, puedes reconocer la fuente desde el proyecto en Figma. Para ello:
* Haz clic sobre la fuente a inspeccionar.
* Sobre el panel derecho, en la pestaña inspeccionar verás los detalles como tamaño, grosor y tipo de fuente. Debes tomar en cuenta todos ellos al momento de buscarlas.
De esta manera comprobamos todos los textos para asegurarnos de la cantidad de fuentes utilizadas.
## ¿Cómo descargar las fuentes para un proyecto?
Como recordarás, una de las mejores páginas para encontrar fuentes es [Google Fonts](https://fonts.google.com/). Para descargar las de nuestro proyecto, hacemos lo siguiente:
1. Copia el nombre encontrado en la pestaña “Inspeccionar” de la fuente seleccionada. Haz clic sobre la fuente.
2. Encontrarás varios grosores de fuentes. Vamos a seleccionarlos con base a los hallados en la inspección de nuestro proyecto haciendo clic en “Seleccionar este estilo”. Hacemos los mismos pasos con la otra fuente en caso de ecnontrar.
3. Una vez seleccionadas las fuentes y grosores que vamos a usar, seleccionamos la pestaña “Embeber” del panel derecho. Copiamos el link que nos da Google Fonts.
## Cómo insertar fuentes en un proyecto
Para linkear el enlace que copiamos en el paso anterior, abrimos nuestro archivo index.html y vamos hasta hasta la sección del head. Pegamos el enlace justo debajo de la etiqueta title.
El enlace generado para el proyecto en que estamos trabajando es el siguiente:
`<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"`>
**Nota**: El tag de link con el valor de atributo **rel=“proconnect”** permite notificarle al navegador que la página requiere establecer una conexión a otro dominio y que esta debe realizarse de la forma más rápida posible. De esta forma cuando el navegador requiera hacer uso de los recursos (*en este caso los tipos de fuente*), la descarga de recursos será más rápido porque la conexión ya existirá de forma previa. Esto permite mejorar el performance de la página.
Recuerda que Google mismo te indica, justo debajo del link que te da, cómo llamar la familia de la fuente que seleccionaste.
¡Y listo! Ya podemos empezar empezar a crear nuestros primeros estilos.
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">
Want to see more contributions, questions and answers from the community?