2012-03-02 Actualizado 2023-11-05 css Edit on GitHub

CSS: cómo usar fuentes personalizadas

Aprende a usar fuentes personalizadas en CSS3 con la regla @font-face, incluyendo ejemplos de sintaxis y una demo.

Por Marius Bughiu · 1 min de lectura · 2012-03-02

CSS3 permite usar fuentes personalizadas mediante la regla @font-face. Son realmente fáciles de añadir y la sintaxis es así:

@font-face {
    font-family: someFont;
    src: url('path/font.ttf');
}

Esto declara una fuente para usar dentro de tu página web. Un ejemplo sería:

@font-face {
    font-family: CODEBold;
    src: url('../fonts/CODEBold.otf');
}

Ahora, para aplicar la fuente personalizada a tu texto puedes usar la propiedad font-family:

<h1 style="font-family: CODEBold">Start Debugging</h1>

Una gran fuente para tipografías personalizadas es dafont.com Mira una demo aquí: Custom Fonts Demo

Comments