Como personalizar as fontes do teu site com CSS3

Publicado por Perfil removido em 12/01/2015

[ Hits: 5.250 ]

 


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:

<!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

SSH: Como resolver problema de demora para digitar usuário e senha

BlueJ - Para iniciantes em Java e programação orientada a objetos

Configurando Modem USB Nokia CS-11 no Debian 6

Gimp e outros programas em português no Slackware 13

GUS-GO lança website e mirror Slackware 13.1

Leitura recomendada

Tabela sem Table, só com CSS

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

Partições NTFS - Resolvendo problemas de exclusão de arquivos

Configurando senha no root (Kali Linux 2020.1)

Montando partições automaticamente no Linux Mint

  

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



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts