Usar fuentes personalizadas usando CSS
Usar fuentes personalizadas usando CSS. Al estar desarrollando páginas web se puedes elegir una gran variedad de fuentes para aplicar a los textos. Sin embargo, si queremos que nuestra web tenga una fuente en especial o personalizada debemos agregar una declaración a nuestro fichero de estilos CSS.
¿Cómo usar fuente personalizada en CSS?
Para usar fuentes personalizadas debemos de usar la declaración "@font-face
{}». Además, dentro de su contenedor llamar al archivo de fuente y asignarle un nombre personalizado.
Pasos para usar fuentes personalizadas usando CSS
- Primer Paso: Declarar
@font-face
- Segundo paso: Crear clase CSS
Resumiendo, puede usar una fuente personalizada usando @font-face en su CSS y necesitaremos 2 pasos. He aquí un ejemplo básico:
Usar fuentes personalizadas usando CSS
Vamos a ver dos pasos específicos para poder crear nuevos estilos personalizados en CSS.
Primer Paso: Declarar @font-face
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('../fonts/font.ttf'); /*URL to font*/
}
Segundo paso: Crear clase CSS
Debemos de crear una clase y llamar a la fuente creada. Luego, podemos usar el nombre de fuente personalizada en nuestras clases y/o para usar la fuente en una etiqueta HTML en específico:
.classname {
font-family: 'YourFontName';
}
Fuente compatible CSS
En el caso que tengamos problemas con la compatibilidad de las fuentes, podemos asegurarnos de que su fuente sea compatible con varios navegadores, asegúrese de utilizar esta sintaxis:
@font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
Archivos de tipo fuente
Navegando por internet podemos buscar y encontrar múltiples archivos de fuente que podemos utilizar. En este caso, vamos a usar el formato Truetype, para ello, la fuente que te bajes tiene que tener la extensión de archivo TTF.
¿Como usar una fuente personalizada en CSS?
Una vez la tengas descargado, podemos añadir esta fuente a tu página web, tan simple como añadir las siguientes líneas a tu hoja de estilo.
@font-face {
font-family: 'NombreFuente';
src: url('../fonts/fuenteDescargada.ttf') format("truetype");
font-weight: normal;
font-style: normal;
}
En el código anterior, hemos asignado el nombre: NombreFuente indica el nombre que quieres dar a esta nueva fuente. Además, en la tercera línea del código usando el atributo src deberás indicar la ruta del archivo.
Una vez añadido este código a tu hoja de estilos, podemos usarlo como cualquier otra fuente usando el atributo font-family del estilo del elemento que desees.
<p style="font-family: 'NombreFuente';">Mi texto</p>
A continuación, te mostramos un par de ejemplos:
- Primer ejemplo de uso de fuente personalizada
- Segundo ejemplo de uso de fuente personalizada
Con estos ejemplos ya puedes hacer que tu web luzca mejor usando cualquier fuente que quieras y además aptas a los distintos navegadores.
Fuente personalizada usando CDN externo
Si no deseas liarte mucho con las fuentes descargadas, puedes usar un CDN como el de Google por ejemplo para que gestione las fuentes de tu web. Veamos un ejemplo.
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
Una vez declarado el archivo externo podemos usarlo de la siguiente manera cotidiana.
body {
font-family: 'Bangers', cursive;
}
Conclusión
Usar fuentes personalizadas es muy sencillo, solo basta buscar en internet una fuente deseada y declararlo en nuestro archivo CSS para posteriormente usarlo en las diferentes etiquetas y elementos de nuestra web.
Además, hemos aprendido a usar CDN de fuentes de Google para obtener un mismo resultado.
La personalización de fuentes se puede declarar dentro de nuestro archivo HTML o usar un archivo CSS.
Espero que esta pequeña explicación les ayude a personalizar las fuentes en sus proyectos que estén realizando.