Inserindo outras fontes no layout | Social UP

Inserindo outras fontes no layout

Você sabe como utilizar outras fontes que não sejam as padrões da Loja Integrada? Pois bem, é por isso que fizemos este vídeo. Se você quiser pode acompanhar o passo-a-passo, mas também se quiser ser mais direto(a), pode visualizar o vídeo.
Inicialmente vamos escolher uma fonte. Você poderá utilizar ou Google Fonts ou o Typekit para encontrar a fonte desejada.
No exemplo, utilizei a fonte Arvo retirada do Google Fonts. Mas você pode selecionar qualquer uma delas, pois o processo é o mesmo. Clique no sinal "+" e abrirá no canto direito inferior uma pequena janela com as informações da fonte. Na aba CUSTOMIZE você pode selecionar as variações, que neste caso escolhi a 400 e a 700, respectivamente regular e negrito. Na aba EMBED você terá dois códigos para inserir na sua loja, utilize qualquer um dos dois, mas nunca os dois juntos para não termos conflitos de código. Neste exemplo, utilizaremos o CSS, que estará em EMBED > @IMPORT assim identificado:

@import url('https://fonts.googleapis.com/css?family=Arvo:400,700');
Copiado o código, iremos até a nossa loja, acessando a engrenagem no canto superior direito encontraremos "Editar CSS". Na hora de colar, caso você já tenha outros códigos CSS, é importante que você os desça e mantenha na primeira linha esse que foi copiado. Após colar, o serviço não para por aí.
Você deve digitar as seguinte instrução no CSS:

body {
font-family: 'Arvo', serif !important;
}
Esta instrução faz com que, de modo geral, apliquemos esta fonte como principal no corpo da loja, porém você irá perceber que não são todas as fontes que mudam ao inserir este código, neste caso convidamos você a acessar o seu site, clicar com botão direito em áreas em que não foi aplicada a fonte, clicar em "Inspecionar Elemento" ou "Inspect" - de acordo com o idioma do seu navegador - Irá abrir uma nova janela em que aparecerão diversas tags de HTML, classes e ids. (No vídeo você poderá ver melhor esse detalhe). Mas fazendo esse processo você descobre os nomes das classes para inserir no CSS.
Um exemplo, citado no vídeo, foi o do menu, no qual não aplicou a fonte escolhida e fazendo este processo é possível descobrir que o menu tem uma classe .menu e dentro existe uma tag strong e assim é possível digitar no CSS.

.menu strong {
font-family: 'Arvo', serif !important;
}
Este processo é bastante aconselhado para quem não tem nenhum ou pouco conhecimento de CSS. Fica fácil de entender e aplicar. Mas caso você ainda considere complexo, entre em contato conosco, pois podemos lhe ajudar. contato@socialup.com.br

Acompanhem o vídeo explicativo:

Postado originalmente em 26/04/2017

Atualizado em 05/03/2018

Deixe um comentário

O que você achou dessa postagem? Ficou com alguma dúvida, tem algo a acrescentar? Ficaremos muito felizes com o seu comentário. Apenas o seu nome e o comentário ficarão públicos, seu e-mail não será publicado.