Portada » CSS Hoja de estilos en cascada » Usar fuentes personalizadas usando CSS

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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad