O @font-face é usado no CSS para introduzir nos elementos fontes que não são padrão do Windows, Mac, etc, e que provavelmente não existem instaladas no computador de seus visitantes. O código é compatível com Safari, Firefox e Chrome se a fonte for ttf, e se a fonte for eot o código é compatível com os Internet Explorers da vida (versão 7 ou superior).
Adicione o código abaixo entre as tags <style> e </style> 
@font-face { font-family: NOME CERTINHO DA FONTE AQUI; src: url('http://urldafontehospedada.com/nome.ttf'); }
Após fazer a edição do código acima, aonde você quiser em seu CSS, edite o font-family do elemento que quer que fique com a fonte diferenciada, porque agora ela está instalada em seu HTML/CSS. Exemplo:
body {
font-family: NOME CERTINHO DA FONTE AQUI;}
Gostou? Tem dúvidas? Acesse o meu ask-me.