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

CSS: como usar fontes personalizadas

Aprenda a usar fontes personalizadas em CSS3 com a regra @font-face, com exemplos de sintaxe e uma demo.

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

O CSS3 permite usar fontes personalizadas com a regra @font-face. São bem fáceis de adicionar e a sintaxe é assim:

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

Isso declara uma fonte para uso dentro da sua página. Um exemplo:

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

Para aplicar a fonte personalizada ao seu texto, use a propriedade font-family:

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

Uma ótima fonte para tipografias personalizadas é o dafont.com Veja uma demo aqui: Custom Fonts Demo

Comments