Como agregar fuentes en asp.net blazor

Cuando estas creando una app usando ASP.NET, puede pasar que tengas que agregar fuentes de estilo diferentes a las normalmente usada en al app. Como agregar fuentes en asp.net blazor, vaz a poder saber en que lugar debes agregar las fuentes nuevas para asi no tener conflictos en tu aplicacion.

Para agregar fuentes personalizadas a un proyecto ASP.NET Blazor, puede seguir estos pasos:
- Obtenga los archivos de fuentes: puede comprar los archivos de fuentes en una fundición de fuentes o descargarlos de un sitio web gratuito de fuentes. La mayoría de los archivos de fuentes vienen en forma de archivos TTF u OTF, y necesitará los archivos de fuentes para cada peso y estilo que desee usar en su proyecto.
- Agregue los archivos de fuentes al proyecto: copie los archivos de fuentes en una carpeta dentro de su proyecto Blazor, como la carpeta «wwwroot/fonts».
- Haga referencia a los archivos de fuentes en su hoja de estilos: en la hoja de estilos de su proyecto Blazor, puede hacer referencia a los archivos de fuentes mediante la regla @font-face. Por ejemplo:

@font-face {
  font-family: "MyCustomFont";
  src: url("/fonts/MyCustomFont.ttf") format("truetype");
}

Use la fuente en sus estilos: ahora puede usar la fuente personalizada en sus estilos configurando la propiedad font-family con el nombre que especificó en la regla @font-face. Por ejemplo:

body {
  font-family: "MyCustomFont", sans-serif;
}

Para usar las fuentes directamente desde internet, podemos seguir los siguientes pasos:
- Navega hasta Google Fonts. Dentro de Google Fonts, vamos a buscar la fuentes que nos guste para luego seleccionar los estilos de grosor que deseen usar. En la zone superior derecha, veran un icono que lespresentara las familias seleccionadas anteriormente. Nos dirigimos a la seccion «usar en la web» y seleccionamos «@import«
- Seleccionamos el estilo presentado como este ejemplo: «@import url(‘https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap’);» y luego nos dirigimos a la carpeta wwwroot/css de nuestro proyecto. Abrimos el fichero site.css, y agregamos el codigo que anteriormente copiamos.
- Lo siguiente sera abrir la pagina de estilo dedicada a la pagina que queramos modificar yy agregamos a la clase que tendra la nueva fuente. Para esto, vamos a Google Fonts de nuevo, y en la misma ventana en donde se importa la fuente, mas debajo veremos la opcion llamada «CSS rules to specify families«. Alli copiaremos el codigo CSS que se vera de esta forma: «font-family: ‘Roboto’, sans-serif;» y lo pegaremos en nuestro estilo.

Agregar fuente al estilo.

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

Agregar la font-family a la clase de estilo.

.nuevabloque{
...
font-family: 'Roboto', sans-serif;
...
}

Tenga en cuenta que los pasos anteriores deben realizarse en la hoja de estilo de sus proyectos de Blazor, que generalmente se encuentra en la carpeta «wwwroot/css» y se denomina «site.css» o algo similar.

¡Y eso es! Su fuente personalizada ahora debería estar disponible para su uso en su proyecto Blazor. Para usarlo para diferentes elementos o estilos, simplemente establezca la propiedad font-family en el nombre de su fuente personalizada en la regla CSS adecuada.

Relacionado