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

19 de maio de 2019

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!
fontes personalizadas no blog

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.

fontes personalizadas no blog
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
fontes personalizadas no blog
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:

fontes personalizadas no blog

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...




Me siga no instagram » @michelleoliveirablog
Encontre mais dicas me seguindo no Pinterest » michelleoliveirablog


Caso tenha dúvidas ou sugestões, deixe nos cometários aqui abaixo ou entre em contato. Vou ficar muito feliz em receber uma mensagem sua.

Compartilhe esse post e espalhe a informação!

3 comentários:

  1. POxa não funciona mais com o tumblr nem Github

    ResponderExcluir
    Respostas
    1. POXAAA, vou procurar uma forma atualizada ;)

      Excluir
    2. Moça, não se preocupe, funcionou perfeitamente aqui. MUITO OBRIGADO POR ISSO.

      Excluir


Deixe a opção *NOTIFIQUE-ME* marcada, assim você é aviso quando eu responder seu comentário!


» Seja educado, e respeite os direitos dos outros, seus comentários são bem vindos. Com moderação!
» Aceito criticas, se forem dadas com educação, não me importo em publicá-las, criticas construtivas nos ajudam a crescer.





Subir