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.

Índice

    ¿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.

    Relacionado  Ajustar una imagen a un div: Ejemplo completo

    ¿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.

    Relacionado  Navbar bootstrap 4 con iconos y responsiva

    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.

    Relacionado  Ocultar DIV al imprimir con CSS

    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.

    Nestor Tapia

    Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

    Entradas Relacionadas

    Deja una respuesta

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

    Subir