W3.CSS Google Fonts
Com W3.CSS é extremamente fácil adicionar novas fontes.
- Muito fácil de usar (somente CSS e HTML)
- Uso ilimitado de bibliotecas de fontes externas (como Google Fonts)
- Funciona em todos os navegadores modernos
Este é Roboto
Essa é Sofia
Sofia em chamas
Fazendo a Web!
Fazendo a Web!
Fazendo a Web!
Fazendo a Web!
Fazendo a Web!
Usando fontes do Google
As fontes do Google são gratuitas e têm mais de 1.000 fontes para escolher.
No cabeçalho de sua página da web, vincule a uma fonte do Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Em seguida, adicione o CSS sobre onde usá-lo:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Outro exemplo
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Criar uma classe de fonte
No cabeçalho de sua página da web, vincule a uma fonte do Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Em seguida, crie uma classe de fonte:
Exemplo
.w3-sofia {
font-family: Sofia, cursive;
}
Em sua página da web, use a classe de fonte:
Exemplo
<p class="w3-sofia">Making the Web!</p>
Fazendo a Web!
Exemplo
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
Fazendo a Web!
Exemplo
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Fazendo a Web!
Exemplo
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Fazendo a Web!
Exemplo
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Fazendo a Web!