Utilizando fontes externas no site
- Prof. Angelo F. Gomes
- 20 de ago. de 2017
- 1 min de leitura
Como discutido em sala, um site deve primar pelo conteúdo, mas também pelo visual atraente.
Pensando no visual, normalmente, achamos fontes estilizadas na Internet e queremos utilizá-las em nossas páginas. Contudo, estas fontes não estão disponíveis no seu computador e tão pouco você deverá contar com que as mesmas estejam disponíveis nas máquinas dos usuários.
Para resolver este problema, uma forma muito simples de estilizar suas páginas é utilizando a biblioteca online do Google Fonts - https://fonts.google.com/.
Há uma diversidade de fontes gratuitas que você poderá dispor sem problemas. Alerto, apenas, que uma página não deve conter uma variação grande de fontes, o que pode comprometer o seu layout.
Arquivo CSS estilo-fonte.css :
.tangerine-font { font-family: 'tangerine', serif; font-size: 90px; text-shadow: 4px 4px 4px #aaa; text-align: center; color:#fff; }
.clicker-font { font-family: 'Clicker Script', cursive; font-size: 32px; text-align: center; color:#fff; }
No HTML:
<!DOCTYPE html> <html> <head> <meta name="description" content="Usando caracteres externos." charset="utf-8"> <meta name="keywords" content="Fontes, CSS, HTML, Online"> <title> Fontes Externas </title> <link rel="stylesheet" href="estilo-fonte.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine|Clicker+Script"> <!--Perceba que utilizamos duas fontes, separadas pelo símbolo " | ". --> </head> <body style="background-color:#000;"> <div> <p class="tangerine-font">Oracao dos Programadores</p> <p class="clicker-font">Ave Memória cheia de maps, <br/>o editor é convosco, <br/>bendita sois vós entreas placas, <br/>e o curto de vosso entry: PC-Plus. <br/> <br/>Santa memória, <br/>mãe do DOS, <br/>roteai por nós, <br/>programadores, <br/>agora e na hora da compilação, <br/>append! </p>
</div> </body> </html>
Comments