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!
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...
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 blogAgora 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:
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!
POxa não funciona mais com o tumblr nem Github
ResponderExcluirPOXAAA, vou procurar uma forma atualizada ;)
Excluir