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...
Nenhum comentário:
Postar um comentário
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.