![[CSS][TUTORIAL]Colocando uma fonte externa/não padrão Empty](https://2img.net/i/empty.gif)
[CSS][TUTORIAL]Colocando uma fonte externa/não padrão 06.07.14 23:23
Colocando uma fonte externa/não padrão
Irei fazer com a fonte OpenSans !
Tenha em mente que você precisa ter a fonte hospedada para ela funcionar !
Exemplo:
http://www.maniateenfm.com.br/ppf/OpenSans-Light.ttf
1- Primeiramente crie sua div e classe CSS.
HTML:
- Código:
<div class="tutorialfonte">TEXTO DE TESTE</div>
CSS:
- Código:
@font-face {
font-family: OpenSans;
font-style: normal;
font-weight: normal;
src: url(http://www.maniateenfm.com.br/ppf/OpenSans-Light.ttf);
}
.tutorialfonte {
font-family: OpenSans;
}
2- O CSS para adicionar a fonte É:
- Código:
@font-face {
font-family: [color=#ff3333]NOME DA FONTE[/color]);
font-style: normal;
font-weight: normal;
src: url([color=#ff3333]LINK DA FONTE[/color]);
}
.tutorialfonte {
font-family: [color=#ff3333]NOME DA FONTE[/color];
}
No caso da OpenSans:
font-family: OpenSans;
3- Antes e depois:
Antes:
![[CSS][TUTORIAL]Colocando uma fonte externa/não padrão AV3p9HO](https://i.imgur.com/aV3p9HO.png)
https://i.imgur.com/aV3p9HO.png
Depois:
![[CSS][TUTORIAL]Colocando uma fonte externa/não padrão Mc7R500](https://i.imgur.com/Mc7R500.png)
https://i.imgur.com/Mc7R500.png
HTML PRONTO:
- Código:
<!-- base disponibilizada pela http://www.power-pixel.net -->
<html>
<head>
<title>SEU TITULO</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
@font-face {
font-family: OpenSans;
font-style: normal;
font-weight: normal;
src: url(http://www.maniateenfm.com.br/ppf/OpenSans-Light.ttf);
}
.tutorialfonte {
font-size: 50px;
font-family: OpenSans;
}
</style>
<body>
<div class="tutorialfonte">Texto de textes</div>
</body>
</html>
Atenciosamente
Example
Example
CyberDesign • 07.07.14 1:14
MegaPython • 16.07.14 9:51
