Neste tutorial vamos ver como usar em todos os navegadores a nova propriedade @font-face, essa propriedade tem a função de carregar fontes externas, ou seja, fontes que podemos baixar em sites de fontes e hospedar (Upload Static File).
Exemplos de fontes que podemos passar para o @font-face são as fontes em pixel usadas em status e outros.
Para usar a @font-face é muito fácil, você só precisa baixar a fonte que você deseja, encontradas em sites de baixar fontes e hospedar. Eu hospedei a fonte em pixel chamada de PF Ronda Seven:
@font-face {font-family: "pfrondaseven";src: url('http://static.tumblr.com/0yxnuuq/rz7mavie7/pf_ronda_seven.ttf'); format('truetype'); }
Explicando: font-family: “pfrondaseven” é o nome dado a fonte.
src: url (‘http://static.tumblr.com/0yxnuuq/rz7mavie7/pf_ronda_seven.ttf’) é a URL da fonte que eu hospdei.
E format (‘truetype’) é o formato que deixa a fonte ser reconhecida em navegadores decentes (Google Chrome, Opera …)
Coloque no CSS do seu theme entre <style> e </style> e depois aplique aonde você quer usar a fonte nessa seguinte forma:
.div {lalala; font-family: pfrondaseven;}
Pronto, a fonte vai pegar normalmente.
Para que a fonte pegue em todos os navegadores você vai ter que alterar os códigos, e serão esses:
@font-face {font-family: 'pfrondaseven'; src: url('http://static.tumblr.com/c2etikr/3xZmavvq2/pf_ronda_seven-webfont.eot'); src: local('pfrondaseven'), url('http://static.tumblr.com/0yxnuuq/rz7mavie7/pf_ronda_seven.ttf') format('truetype');}
Mas para transformar a fonte em .eot para pegar no navegador IE você vai ter que usar esse site para hospedar a fonte e baixa-la no formato .eot depois hospede ela no Upload Static File.
Agora vou explicar os códigos que entraram:
src: url(‘http://static.tumblr.com/c2etikr/3xZmavvq2/pf_ronda_seven-webfont.eot’); é o formato que o IE reconhece a fonte face.
stormborns
turnnoffyourmind
romaincrisis
titsay
origamiaround
snowghoul
izzy806
vaporwave
