neste tutorial, mostrarei como enviar qualquer fonte da web do Google para o seu blog do Blogger. Existem algumas maneiras de fazer isso, mas é assim que eu faço.
este tutorial é mais adequado para aqueles que têm algum conhecimento CSS. Para este tutorial, estou usando o modelo “simples” do Blogger.
aqui está um exemplo de uma fonte Web personalizada do Google instalada em nosso modelo Lemon Macaron.
Etapa 1
Antes de começarmos, sempre recomendo fazer backup do seu modelo atual antes de fazer qualquer alteração (caso algo dê errado).
você pode fazer isso em seu painel indo para o modelo > Backup / Restauração (localizado no canto superior direito) > baixe o modelo completo.
Etapa 2
depois de fazer backup do seu modelo, clique em Editar HTML (ainda estamos na guia “Modelo”).
Etapa 3
deixando esta página aberta, abra uma nova guia ou janela e vá para o site do Google Web Fonts. Pesquise a fonte que você gostaria de usar e selecione uso rápido.
eu escolhi usar a Fonte ‘Lobster Two’.
Etapa 4
para a Seção 1: Escolha os estilos desejados, escolha os estilos desejados disponíveis para sua fonte (você pode selecionar vários estilos). Lembre-se de que selecionar muitos estilos pode desacelerar seu blog. Eu selecionei Normal 400 como você pode ver abaixo.
para a Seção 3: Adicione este código ao seu site, clique na guia @ import.
Etapa 5
copie as informações na caixa @ import.
agora, deixando esta página aberta, volte para o seu blog (onde você selecionou Editar HTML). Vamos colar o código de importação de fontes em seu modelo.
procure o texto a seguir localizado no início do editor de modelos (geralmente localizado nas linhas 13 ou 14):
<b:skin>...</b:skin>
uma Vez expandido, colar as informações que você copiou do @import caixa de Fontes do Google Web site, o seguinte texto:
/* Variable definitions
deve olhar como este:
Clique em salvar modelo. Sua fonte já foi importada! Agora você pode colocar a família de fontes onde deseja que ela seja exibida em seu modelo.
Etapa 6
rapidamente, mostrarei como usar sua fonte recém-importada. Neste exemplo, vou usar a fonte para o título do meu post. No editor HTML procure por:
h3.post-title, .comments h4
remova a seguinte linha:
font: $(post.title.font);
e substitua-o pelo texto listado na Seção 4: integre as fontes ao seu CSS no site do Google Web Fonts.
font-family: 'Lobster Two', cursive;
deve ser algo assim depois de colar as informações da família de fontes:
