1. Download da Fonte
Primeira coisa é fazer o download da fonte. Escolha a fonte desejada e clique no botão download. Lembre-se de observar se a fonte escolhida aceita caracteres especiais como: ç, á, ã, etc.2. Conversão da Fonte
Para instalar a fonte no seu site, você precisa possuir o arquivo nas seguintes extensões: ttf, eot e woff. O site Font2Web faz essa conversão para você, basta fazer upload do arquivo e depois o download dos arquivos convertidos.3. Envio da Fonte para o Google Drive
Agora que você já tem seus arquivos de fonte, faça o upload no seu Google drive. Crie uma pasta chamada fontes e coloque esses arquivos dentro desta. Altere a privacidade desta pasta.4. Ajuste de Endereço
Agora que a sua pasta de fontes já esta pública, é necessário montar o endereço dela. O Google Drive vai gerar um link para você.No link gerado, após a palavra id= está a id da sua pasta, você pegará este id e colocará no formato abaixo:
http://googledrive.com/host/ + ID + /nomedafonte.ttf
Exemplo:
https://drive.google.com/open?id=0B4VvzPif3BooUnIzeThIdHpwR1U
http://googledrive.com/host/0B4VvzPif3BooUnIzeThIdHpwR1U/nomedafonte.ttf
5. Declaração no CSS
Prontinho, agora é só declarar este arquivo de fonte em seu CSS conforme o exemplo abaixo. Para ter acesso ao CSS do seu blog é só ir em Modelo > Personalizar > Avançado > Adicionar CSS.@font-face {
font-family: "NomedaFonte";
src: url("http://googledrive.com/host/seuID/NomedaFonte.eot") format("eot"),
url("http://googledrive.com/host/seuID/NomedaFonte.woff") format("woff"),
url("http://googledrive.com/host/seuID/NomedaFonte.ttf") format("truetype");
}
Tem alguma dúvida? No site CSS3 Generator esse código é gerado para você.
Espero que este tutorial ajude vocês. Qualquer dúvida só deixar nos comentários que qualquer coisa eu completo ele. Mil beijos!
nossa, bem bacana, eu entendo mt pouco de personalizar o meu blog e sempre acabo com os recursos basicos
ResponderExcluirwww.tofucolorido.com.br
www.facebook.com/blogtofucolorido
Eu sou muito pouco entendida nestas coisas! Adoro estes conselhos!
ResponderExcluirhttp://adorosercomosou.blogspot.pt/
Já andei fuçando sites e vendo essas coisas, menina mais morro de preguiça de começar... kkkk
ResponderExcluirbjus!
http://petalasdelicadas.blogspot.com.br/
Ótima dica
ResponderExcluirdeixa o blog da gente bem mais com a nossa carinha né?
Amei
Kisses
Adoro novas fontes.. amei!
ResponderExcluirBeijo
Dicas para Todas