Como personalizar as fontes do teu site com CSS3

Publicado por Perfil removido em 12/01/2015

[ Hits: 6.674 ]

2 0

Denuncie Favoritos Indicar Impressora

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:

w0ng/googlefontdirectory · GitHub

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:

<!DOCTYPE html>
<html>
<head lang="pt-br">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Fonte CSS3</title>
    <link rel="stylesheet" href="/home/fran/Web/css/font.css">
</head>
<body>

<div>Incorporando mais fontes <b>com estilo</b> no código css3 .</div>

    <p><b>Nota:</b> Internet Explorer 8 e versões anteriores não suportam a regra @font-face.</p>
</body>
</html>

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!

Outras dicas deste autor

Como instalar o módulo (driver) da placa Wireless RTL8192se

GPhoto2 - Integre sua câmera digital no Linux

Tema do VOL para celular Nokia 2630

GUS-GO lança website e mirror Slackware 13.1

Samba - Consertando bug com o Nautilus no Ubuntu 8.04

Leitura recomendada

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

Tabela sem Table, só com CSS

Configurando Speedy no Conectiva 10

Erro do Grub ao clonar servidor Linux com ACRONIS

Como abrir arquivos .swp

Comentários

[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'>

1 0