Como adicionar Google Fonts na Landing Page

24 views 1 de junho de 2018 5 de junho de 2018 villetarget_helper 0

Mais opções de fontes com o Google Fonts

Ao construir sua landing page, a escolha das fontes é uma decisão importante na composição do visual.

A plataforma ville Target dispõe de uma gama de fontes interessante, mas também te oferece a possibilidade de personalizar ainda mais seu conteúdo com a adição das fontes disponibilizadas pelo Google.

Vejamos abaixo como adicionar Google Fonts em sua landing page.
 

Escolha sua fonte

1) Acesse o Google Fonts e escolha a fonte que deseja utilizar. Para adicionar a fonte escolhida à sua coleção, clique no botão “+que fica no canto superior direito da fonte. Iremos utilizar como exemplo a fonte ‘Oswald’.

2) Clique na barra preta na parte inferior da tela, indicando “1 Family Selected”. Ali, você poderá customizar as propriedades da fonte de acordo com sua preferência.

3) Copie todo o código na seção EMBED > STANDARD, conforme indicado abaixo.

 

Aplique a fonte no Construtor de Landing Pages

4) Acesse o ville Target, e abra o construtor de landing pages. No menu do topo, clique em Avançado.  Cole o código que você copiou na caixa de texto abaixo de “Código antes do fechamento da tag </head>”.

5) Agora é hora de definir a nova fonte nos elementos em que deseja aplicá-la.  Temos diferentes maneiras de fazer isso:

  1. Aplicar diretamente a um pedaço de texto
  2. Criar uma Classe e aplicar aos elementos via CSS.

 

Aplicando a fonte diretamente em um pedaço de texto.

  • Clique em ‘Detalhes’ no menu do topo, selecione o bloco de texto em que deseja aplicar a fonte.

  • Vá na opção “font-family” e troque a fonte padrão pela sua fonte escolhida (no nosso exemplo, “Oswald”). Depois clique em “Aplicar mudanças”.

  • Neste caso apenas o pedaço de texto selecionado tem a fonte alterada.

 

Criando uma Classe e aplicando a fonte em vários elementos via CSS

Este caminho exige o mínimo de conhecimento em HTML e CSS, mas tem a vantagem de aplicar a fonte em vários locais ao mesmo tempo.

  • Clique em Custom CSS, no canto superior direito do Construtor de Páginas.

  • Adicione um classe, da seguinte maneira:
    • .nome_da_sua_classe -> pode chamar sua classe do que quiser, mas ela deve iniciar com um ponto “.”. Em nosso exemplo, o nome da classe é “nova_fonte”;
    • adicionar entre chaves “{}” a propriedade “font-family: ‘nome-da-fonte’, estilo-da-fonte;” -> em nosso exemplo “font-family: ‘Oswald’, sans-serif;”

  • Agora clique Elementos, no canto superior esquerdo, e selecione o Elemento que deseja adicionar as classes. Clique em <Fonte>, para acessar o código fonte do Elemento.
    • Adicione o nome da classe dentro do atributo “class”, conforme imagem abaixo. Aqui não precisa do ponto (.) antes do nome da classe.
    • Note que na mesma linha onde adicionamos a classe, temos na imagem abaixo traçado de vermelho o atributo font-family e valores para o mesmo. Isso ocorre quando alteramos a fonte no modo “Detalhes”, como no exemplo anterior. Como o atributo de estilo em linha tem prioridade sobre atributo de classe, apague estes valores caso eles apareçam em seu código fonte.
    • Após realizar as modificações, não esqueça de salvar.

  • Para visualizar as modificações feitas, clique em Salvar e Preview.

  • Veja que todos os elementos de texto aos quais adicionamos a classe “nova_fonte” tiveram a fonte alterada para ‘Oswald’.

Importante: As alterações de fonte feitas utilizando CSS só surtirão efeito ao carregar a página. O script que nos dá acesso ao Google Fonts é carregado neste momento. Por este motivo, enquanto estiver no Page Builder, parecerá que a fonte não foi aplicada. Ao clicar em Salvar e Preview, a página é carregada, o script é processado e as modificações são visíveis.

 

Abraço da equipe ville Target.

Esse artigo foi útil?