Como personalizar as fontes do teu site com CSS3

Publicado por Perfil removido em 12/01/2015

[ Hits: 6.235 ]

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

Adquirindo o Cedega Trial

Ubuntu - compartilhando conexão via cabo crossover

Gnomebaker - Aplicativo para gravação de CDs e DVDs à altura do k3b

Instalando pacotes x86 no Debian 7 x64

MDK (Mix Development Kit) no Projeto GNU

Leitura recomendada

Tabela sem Table, só com CSS

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

Baixar arquivos com wget utilizando autenticação

Fontes feias no Firefox da distro Funtoo [Resolvido]

VMWare Player em máquinas com 2 placas de rede

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