Pular para o conteúdo

Como personalizar as fontes do teu site com CSS3

Dica publicada em Javascript / CSS3
Perfil removido removido
Hits: 7.087 Categoria: Javascript Subcategoria: CSS3
  • Indicar
  • Impressora
  • Denunciar

Como personalizar as fontes do teu site com CSS3

Ninguém merece ficar preso às fontes do HTML. Para criar um site com mais estilo em CSS3 você usa o @font-face. No GitHub existe uma série de fontes disponíveis para download. Acesse aqui:
Faça o download do arquivo, logo em seguida extraia para uma pasta* de fácil localização e incorpore na sua folha de estilo.

* Crie uma pasta chamada "fonts" para facilitar o acesso.

Arquivo HTML:




    
    
    Fonte CSS3
    



Incorporando mais fontes com estilo no código css3 .

Nota: Internet Explorer 8 e versões anteriores não suportam a regra @font-face.


Arquivo de estilos:

/*Documento CSS3*/

@font-face {
    font-family: padrao;
    src: url(/home/fran/Web/fonts/adventpro/AdventPro-ExtraLight.ttf);
}

@font-face {
    font-family: negrito;
    src: url(/home/fran/Web/fonts/adventpro/AdventPro-Bold.ttf);
}

div {
    font-family: 'padrao', sans-serif;
}

b {
    font-family: 'negrito', sans-serif;
}

Até a próxima!

FrostWire: Solucionando problemas ao iniciar

Wireless Realtek RTL8187B no Debian 4

Baixando arquivos grandes demais para a sua conexão.

Gnomenu - menu estiloso para o Gnome

Instalando Brave Browser no Linux Mint 20

Tabela sem Table, só com CSS

Pingendo - Crie um layout para o teu site em 5 minutos!

Testando sempre o Firefox mais recente

wikit - Wikipédia no seu terminal

URL da IDE Intel XDK no GNU/Linux

#1 Comentário enviado por fabio em 12/01/2015 - 12:03h
Boa! Lembrando que também é possível usar o CDN do Google Fonts, daí nem é necessário fazer download da fonte.

http://www.google.com/fonts

Exemplo:

<link href='http://fonts.googleapis.com/css?family=Roboto'; rel='stylesheet' type='text/css'>

Contribuir com comentário

Entre na sua conta para comentar.