Como personalizar as fontes do teu site com CSS3

Publicado por Perfil removido em 12/01/2015

[ Hits: 6.625 ]

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

Instalando Spotify no Ubuntu 19.04

Instalar Flash no Opera, no Ubuntu 7.04

[ResuLinux] Configurando suporte a Bluetooth

Criando seu próprio tema splash screen para KDE 4

Veja como é fácil instalar programas no Ubuntu (Iniciantes)

Leitura recomendada

Tabela sem Table, só com CSS

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

Instalando Etcher no Fedora 28

Instalando K3s no Fedora CoreOS

SpeedStream 5200 em roteador - Parte 2

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