Mouseup

home / mouseLab
MouseLab

Como utilizar fonts externas em websites?

Daniel D2

Estou aqui denovo com mais um post sobre css falando de uma funcionalidade importantissima do Css que é o @font-face que nos permite inserir uma tipográfia diferente em nossos projetos, com tudo vale salientar que a utilização de font's sem autorização e sem licença é crime, existem alguns sites que disponibilizam font's gratuitas como o Da font.com (www.dafont.com).

Nesse post iremos utilizar fonts nos formatos "*.ttf" truetype font e "*.eot" Embedded OpenType para converter as font's nesses formatos eu utilizei o site (http://www.fontsquirrel.com/fontface/generator) onde há um gerador gratuito para esses formatos.

Bons estudos e até a proximo post.


imagem
 
body 
{
background-color: #CCC;
margin:0px 0px 0px 0px;
}
/* @font-face é uma das funcionalidades mais incríveis do CSS. Ela permite que você utilize famílias de fonts em seu website sem que o usuário tenha a font instalada no sistema, parece bobagem mais nos poupa muito trabalho no desenvolvimento */
/* Declare a tag com uma arroba na frente "@font-face" */
@font-face
{
 /* Adcione a propriedade "font-family" e nela você atribui o valor deseja tipo "minhaFont" no caso eu utilizei o nome da font mesmo */
  font-family: RiotSquad;
 /* Adcionei a font no formato "*.eot" por que os IE's só reconhecem essas extensão */
  src: url('riotsquadAnexa.eot');
 /* Adcionei a font no formato "*.ttf" validos para os outros navegadores */
  src: url('riotsquadAnexa.ttf') format("truetype");
 /* Obs. o nome da font é o nome do arquivo tipo se o arquivo estiver com o nome de "fonte.ttf" você anexa com o mesmo nome */ 
}
.classeTexto
{
/* Na classe do texto adcione novamente a propriedade "font-family" chamando a familia de font criada no "@font-face" acima e depois adcione outras font's por segurança para substituir caso não funcione em navegadores ching lings */
font-family: RiotSquad, Arial, Tahoma, Sans-serif;
/* tamanho da font */
font-size:48px;
/* cor para a font */
color:#333;
}
 
/* Centralizando o exemplo quer entender? acesse o topico: "Como centralizar uma div com css em modos relative, static, absolute, fixed." */
#divCentralizada
{
position:absolute;
left:50%;
top:50%;
height:50px;
width:600px;
margin-left: -300px;
margin-top: -25px;
}
 
 
<!-- tag&#039;s em html utilizada nos exemplos acima -->
 
<div id="divCentralizada" align="center">
<span class="classeTexto">Yes! font&#039;s diferentes</span>
</div>
imagem
Clique para baixar Voltar a página

 

Relacionados

 

Comentários

 
imagem
 
imagem Comente, critique deixe sua impressão pra gente!
imagem
 
Redes sociais
Copyright © 2008 - 2012 MouseUP Serviços de Internet LTDA. Todo o conteúdo deste site é de uso exclusivo da MouseUP.
Proibida reprodução ou utilização a qualquer título, sob as penas da lei.
Youtube Google Maps Twitter Facebook Orkut