Call Us! Button

Request an Appointment Button

Aprenda a usar fontes customizadas no RD Station
December 3, 2019
Fontes customizada no RD Station

Não há a opção de usar fontes customizadas no RD Station facilmente, mas o sistema também não impede que você o faça. Neste exemplo iremos usar fontes do Google Fonts.

Confira o passo a passo:

Selecione sua fonte

Acesse https://fonts.google.com/ e selecione a fonte desejada. Se você possuir o link do CSS da fonte de alguma outra forma, serve também. Neste exemplo usamos a fonte Bebas Neue.

Selecione a sua fonte e clique em SEE SPECIMEN

Com a fonte selecionada, abra a aba inferior e clique em @IMPORT

Desse código, você apenas vai precisar da regra @import, e da parte inferior font-family.

Abra a LP do RD Station

Após abrir a LP para edição, você deve ir em Edição Avançada e inserir seu código.

Então em CSS você deve inserir a regra para importar a sua fonte e o CSS para definir as fontes. Nesta parte é interessante um conhecimento prévio em CSS.

No exemplo abaixo, é definido a fonte para apenas um elemento. Do jeito que o RD gera o HTML, você deve pegar o ID do objeto e verificar que tipo ele é para fazer regras mais específicas.

@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');

#rd-text-k3eqc3p4 strong {
     font-family: 'Bebas Neue', cursive!important;
 }

Caso queira deixar toda a LP com a mesma fonte, basta usar o seguinte código:

@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');

* {
     font-family: 'Bebas Neue', cursive!important;
 }

Visualizando os resultados

Apesar de não aparecer no editor, não se preocupe, a fonte aparece apenas quando você pre visualiza a LP, ou publica e acessa a página publicada!
Lembre-se também de sempre usar o inspetor de elementos para ver se as suas regras CSS estão sendo utilizadas.

Ficou com alguma dúvida? Deixe um comentário!

The post Aprenda a usar fontes customizadas no RD Station appeared first on Nelito.

  • All
  • Uncategorized

Esse post foi escrito pelo ChatGPT. Descubra como ele funciona!

O ChatGPT é uma ferramenta de conversação desenvolvida pela OpenAI que permite aos usuários conversar…
Read More

How to use navigator.sendBeacon with PHP 7

Recently I needed to send a request on the unload of a page (save where…
Read More

How to add hover to images in Duda.co

Duda does not provide a widget to do this natively, but it can be achieved…
Read More

How to host email on Duda.co

Duda does not provide email hosting services, so you can’t host email on Duda directly.…
Read More

Our Lazy Feline Friends

Fluffy’s favorite holiday is just around the corner: National Lazy Day is August 10th! Granted,…
Read More

Keeping Kitty Hydrated

Summer is in full swing now. Staying hydrated is extremely important at this time of…
Read More

Keeping Fluffy Fit

Cats are very active when they are young. It’s always adorable seeing a frisky kitten…
Read More

Pool Safety for Dogs

Does your dog like swimming? Our canine companions are rather divided on this topic. Just…
Read More

Reasons to Hug Your Cat

Is your feline pal a cuddlebug? If so, you may want to make a note…
Read More
1 2 3 4