Quería agregar un estilo de fuente, para que al usar el CSS la tenga disponible, me descargué las fuentes tipografías, pero no sé cómo usarlas.
-
1¿Podrías ser más claro? ¿Estás hablando de Visual Studio o Visual Studio Code? ¿Qué relación hay entre CSS y ese Visual Studio? ¿Te refieres a cambiar la tipografía del editor o la de una página web?– MateoCommented el 10 jul. 2022 a las 3:40
-
si correcto, ahí lo corrijo, seria para visual studio code, queria cambia la tipografia de una pagina web, pero dicha tipografia no esta en mi visual studio code, por lo que queria instalar dicha fuente, pero nose como– Maximiliano AcuñaCommented el 10 jul. 2022 a las 3:49
-
Visual Studio Code ni ningún otro editor de físico influye en el resultado. Lo que importa es lo que escribes en los archivos de HTML y CSS.– MateoCommented el 10 jul. 2022 a las 4:45
1 respuesta
Puedes declarar la fuente en CSS de la siguiente manera:
@font-face {
font-family: Calibri;
src: url('Calibri.ttf');
}
En la propiedad font-family
indicas el nombre que usarás para elegirla en tus estilos.
En src
necesitas indicar dónde se encuentra el archivo de la fuente.
Opcionalmente puedes indicar para qué grosor de letra, estilo y otras variantes de la tipografía se utilizará.
El código quedaría así:
<style>
@font-face {
font-family: Calibri;
src: url('Calibri.ttf');
}
p {
font-family: Calibri;
}
</style>
<p>Texto</p>
Puedes usar Google Fonts o algún sitio similar. Te facilitará la importación de tipografías.
Para ello eliges todas las tipografías que quieras. Cuando termines te diriges al panel de la derecha:
Copias el contenido del recuadro y lo pegas en tu HTML.
Solo resta asignarle la propiedad font-family
al elemento correspondiente. Quizá te preguntes, ¿Cómo se llama la fuente? Bueno, debajo del recuadro hay otro más.
En este caso me dice font-family: 'Roboto', sans-serif;
. Ese es el estilo que le debo dar a los elementos para que usen la tipografía que elegí.
<head>
<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=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
<body>
<h3 style="font-family: 'Roboto', sans-serif;">Texto con tipografía personalizada</h3>
</body>