Usando fontes baixadas da internet no blog com @font-face

Usar fontes baixadas da internet também é um tutorial que eu tinha no outro blog e como sei que muita gente não sabe como fazer isso e eu também preciso de fontes novas pra por aqui no blog, resolvi posta de novo aqui, acompanhe o passo a passo do texto e fotos, é um pouco grandinho mas é bem fácil, porem precisa de atenção, e recomendo que quando for fazer, faça primeiro em um blog de testes ok!

1 - Escolha a fonte desejada e gere com kit com o formato da fonte...

É necessário que você tenha o arquivo da fonte que vai utilizar baixada no seu computar, se não tiver ainda é só baixar, disponibilizei aqui no blog um arquivo onde tem 5 Fontes gratuitas para usar no blog caso goste de alguma pode baixar e usar também.

Agora vamos gerar o kit da nossa fonte, esse processo é necessário pois nem todo  navegador lê o mesmo formato de fonte, e é por esse motivo que vamos gerar o kit da fonte que queremos usar.

E como queremos que todos os nossos leitores independente do navegador que esteja utilizando veja da mesma forma, vamos gerar todos os formatos. 

O próximo passo é  acessar o site fontsquirrel e na pagina WEBFONTE-GENERATOR  e fazer o upload da fonte escolhida

1 → carregue a fonte escolhida

2→ marque  expert (especialista)

3→ marque os formatos: TRUE TYPE (tipo verdadeiro), WOOF, WOFF2 e EOT lite

4→ marque: remember my settinggs (lembre minhas configurações)

5→ marque: Agreement (acordo).

     Faça o download do kit

Agora vamos descompactar o arquivo que vem compactado e extrair o arquivo vamos deletar essses quatro arquivos:  specimen_files | generator_config | lovely_day_personal_use-demo (vai ser o nome da sua fonte) stylesheet. 
Agora temos que hospedar os formatos da  fonte escolhida, hospede onde desejar, eu uso tumblr, para fazer a hospedagem e é nele que vou demonstrar como faz...

O tutorial é grande mas é só ir com calma.

Se você ainda não tiver uma conta no tumblr clique aqui para criar uma  conta e aqui para acessar o painel  https://www.tumblr.com/customize

Siga os seguinte passos:
 1 → Editar tema
 2 → Editar html
 3 → Recursos do tema
 4 → Adicionar um arquivo (carregue todos os formatos da fonte)
Veja o passo a passo na foto abaixo:

Arquivos carregados não feche a pagina, vamos agora no painel do blog
Clique em TEMA e EDITAR HTML  dentro dá caixa de códigos html de um clique e aperte ctrl+F  e cole  esse código na caixa dando um enter   → ]]></b:skin> ←

acima do código encontrado cole esse outro código:

@font-face {
    font-family: 'NOME DA FONTE';
    src: url('URL FORMATO EOT');
         url('URL FORMATO WOFF2') format('woff2'),
         url('URL FORMATO WOFF') format('woff'),
         url('URL FORMATO TTF') format('truetype');
    }

Agora vamos voltar no tumblr e pegar o link das fontes que carregamos lá, é só posicionar o mouse e copiar o link clicando com o botão direito e alterar no código cada uma em seu devido lugar certinho

A minha ficou assim:

@font-face {
    font-family: 'lovely_day_personal_use';
    src: url('https://static.tumblr.com/2v0nc90/Sklpbxjx7/lovely_day_personal_use-webfont.eot');
         url('https://static.tumblr.com/2v0nc90/WnEpbxjxi/lovely_day_personal_use-webfont.woff2') format('woff2'),
         url('https://static.tumblr.com/2v0nc90/8RZpbxjxe/lovely_day_personal_use-webfont.woff') format('woff'),
         url('https://static.tumblr.com/2v0nc90/iLvpbxjxa/lovely_day_personal_use-webfont.ttf') format('truetype');
    }

Faça em um blog de testes primeiro, faça com calma e atenção não hora de alterar os códigos, é um tutorial longo, mas é fácil de fazer...