Usando fontes diferentes com @Font-Face

Oi gente hoje venho falar sobre uma coisinha chamada font-face, ela é super útil e pode ajudar muito os blogueiros de muitas formas. Ela é um tipo de substituto do google web fontes, essa palavrinha da possibilidade de usar fontes que você tenha baixado ou tenha em seu computador que não possua no Google Fontes, que é bem legal, porque pode usar fontes diferentes do padrão. Para isso existe a regra do CSS chamada @font-face que permite que você utilize fonts fora do padrão do sistema. E hoje vou mostrar como usa-lo é bem fácil, pode aplicar em qualquer parte de seus códigos como sidebar, area de postagens, menus etc.

Para usar a fonte você precisa hospeda la não é difícil, eu recomendo o tumblr ou o google biblioteca, separe a fonte que deseja usar os arquivos de fonte terminam em .ttf e são aqueles que você usa para instalar. Depois de hospedar pegue o link direto da sua fonte, e arrume como irei mostrar abaixo:

Códigos

@font-face{
src:url(link da fonte);
font-family: "link da fonte.ttf";
}

Também possui desta forma não tem muita diferença, mas veja qual funciona melhor em seu modelo:

Códigos

@font-face {
font-family: "nomedafonte.ttf";
src: url('link da fonte');
}

Quando adicionar esse código com ele recomendo colocar acima de ]]></b:skin>, vai ser o nome da fonte que você substituiu que irá entrar no lugar tipo sidebar.

Códigos

@font-face {font-family: "NOME DA FONTE"; src: url('LINK HOSPEDADO.ttf');}

.sidebar h2 {

font-family: NOME DA FONTE;

color: #000;

font-size: 13px;

text-align: center;

}

Deu para entender mais ou menos? Em vermelho é o local qual entrara a fonte, a parte em azul é o código do @font-face, e abaixo do vermelho e a personalização da sidebar. Mas isso é apenas um exemplo você pode adicionar em qualquer lugar que desejar. Bem, este é o tutorial de hoje espero que tenham gostado e entendido caso ainda tenham duvidas podem perguntar pelos comentários eu irei ajudar a todos, beijinhos e ate a próxima.

Créditos: Up Tutoriais