Certamente já deve ter se deparado com as limitações de fontes ao criar uma pagina web, ou já teve vontade de usar aquelas fontes engraçadas e/ou interessantes mas não sabia como, a solução e acompanhar este artigo ate ao fim.
A primeira coisa a fazer e baixar a fonte que quiser usar, geralmente vem num arquivo com extensão "ttf" ou "otf". pode baixar as fontes neste site: 1001fonts.
Ok, para importar um tipo de fonte e usar no nosso site usamos o elemento @font-face que e responsável por indicar uma fonte de letras.
NOTA: o @font-face pode ser usado varias vezes no mesmo arquivo css, permitindo assim importar varias fontes. vamos a um exemplo pratico.
Baixe a fonte eddie no site que indiquei acima, extrai o arquivo eddie.ttf e guarda numa pasta (o melhor e criar uma pasta e guardar la). A seguir crie um arquivo css com o nome style.css na mesma pasta onde guardou a fonte. adicione o seguinte código ao arquivo style.css
@font-face {
font-family: "eddie";
src: url("eddie.ttf") format("truetype");
}
Como pode ver usamos o elemento @font-face que tem dois atributos:
font-family: "eddie"; - indica o nome da fonte (o nome e arbitrario).
src: url("eddie.ttf") format("truetype"); - indica o arquivo de fonte (deve indicar o caminho do arquivo, no nosso caso nao precisamos porque esta na mesma pasta)
Pronto, já importamos o arquivo de fonte. A seguir vamos criar uma classe no arquivo style.css para usar a fonte que importamos:
.eddie-font{
font-family: "eddie";
}
A nossa classe chama se eddie-font, com o atributo font-family que indica o nome da fonte a ser usado nesta classe, neste caso usamos a fonte que importamos, com o nome eddie
NOTA: Para usar uma classe css num elemento html, basta indicar o nome da classe no atributo class do elemento. Exemplo: <p class="eddie-font">exempodo uso da fonte eddie importada</p>. este paragrafo usara a fonte eddie, definida na classe eddie-font.
O teu arquivo style.css ficara assim:
@font-face {
font-family: "eddie";
src: url("eddie.ttf") format("truetype");
}
.eddie-font{
font-family: "eddie";
}
Vamos agora criar um arquivo HTML com um paragrafo que usa a fonte eddie. Crie um arquivo HTML com o nome fontes_externas.html e adiciona o seguinte código.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Importar Fontes Apartir de Arquivos de Fontes</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
</head>
<body>
<p class="eddie-font">exempodo uso da fonte eddie importada</p>
</body>
</html>
A linha <link rel="stylesheet" href="style.css" type="text/css" media="screen"/> importa a folha de estilo (style.css)
Salve o arquivo e abra-o atravez do browser e veja o resultado.
Por hora e tudo, bom trabalho
obrigado por seu tutorial, rápido, pratico e de fácil entendimento.
ResponderEliminarAjudou muito!!!! Obrigada, deu super certo!
ResponderEliminarMuito bom o teu tutorial. Tenho uma pergunta: se eu desenvolver um site usando uma fonte que eu baixei do site 1001 fontes e hospedá-lo na web, todos os usuários verão o site com a fonte que usei ou será necessário que cada visitante do meu site tenha, obrigatoriamente, a fonte instalada em suas estações?
ResponderEliminarOla Allan, em primeiro lugar desculpas pela demora para responder.
EliminarRespondendo a tua questão: Não, não sera preciso que os visitantes tenham a fonte porque estara instalada no teu site, a busca pela fonte sera feita no teu site e não na estação do usuario.
Obrigado!