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>