Como personalizar as fontes do teu site com CSS3

Publicado por Perfil removido em 12/01/2015

[ Hits: 6.634 ]

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 executar um programa em C via Terminal [Vídeo]

Assistindo DVD no SuSE 10.1

Como deixar as abas do Firefox mais fininhas

Atualizando Debian 11 para Debian 12

Criando um visualizador de imagens no Lazarus

Leitura recomendada

Tabela sem Table, só com CSS

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

Wine no Debian Wheezy 64 bits

Como exibir números com um largura fixa de caracteres, complentando com zeros a esquerda

Instalação do SNMP no Ubuntu

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