Utilizar Fontes Customizadas

Observe que esta função não é aplicada para as lojas de avaliação do Shopify

Antes de seguir etapas específicas, você pode assistir a este vídeo tutorial

Neste artigo, você aprenderá como adicionar fontes personalizadas e aplicá-las à sua página PageFly.

Etapa 1: Baixe e Converta a fonte em um formato de fonte da web

1.1 -Faça o download da fonte

Em nosso exemplo, baixamos uma fonte de www.dafont.com. Vamos fazer isso.

Depois de baixar a fonte, você deverá ver os seguintes arquivos em uma pasta compactada. Você precisará converter dois arquivos com as extensões “otf” e “ttf”.

1.2 – Converta a fonte no formato de fonte da web

Você precisa visitar https://transfonter.org/ para converter a fonte acima.

Clique em Adicionar fontes para carregar os 2 arquivos acima. Marque a caixa de seleção “WOFF” e “WOFF2” na seção Formatos.

Clique em Converter para ver o link “baixar” e fazer o download.

No seu computador, deve haver 2 arquivos com as extensões “woff” e “woff2“.

1.3 – Carregue a fonte na sua loja Shopify e atualize

No painel do Shopify, navegue até Configurações> Arquivos

Faça o upload de 2 arquivos de fonte para sua loja.

Na coluna URL, copie os URLs dessas fontes para o seu bloco de notas ou para outro lugar. Nós os usaremos na Etapa 2.2 quando aplicarmos essas fontes à nossa página PageFly. No nosso exemplo, os URLs das fontes são: https://pastebin.com/raw/SepA71rg

Etapa 2: Aplique a fonte na página PageFly

2.1 – Abra o arquivo CSS da fonte e substitua-o pelos URLs da fonte do Shopify

No seu computador, localize a pasta da fonte que você baixou na parte anterior e procure o arquivo “stylesheet.css” e abra-o.

Você pode abrir esse arquivo com Brackets.io ou algum aplicativo alternativo.

using custom fonts

Depois de abrir o arquivo, você verá o código abaixo.

(Incorpore isso https://pastebin.com/raw/CT9HsQHa)

Você precisa substituir o URL dos arquivos woff2 e woff pelo URL do Shopify que você obteve na Etapa 1.3. Portanto, no nosso caso, será o código abaixo. Você precisará copiar esse trecho de código para Adicionar código personalizado da sua página.

Vamos fazer isso.

(Incorpore isso https://pastebin.com/raw/r6vbFYGE)

2.2 -Abra sua página PageFly e clique no botão Adicionar código personalizado

custom fonts

Copie o código que você recebeu do arquivo “stylesheet.css”

custom fonts pagefly

Agora você precisa decidir se deseja aplicar a fonte personalizada à página inteira ou ao elemento específico.

2.3 -Aplique a fonte personalizada à página inteira

(Incorpore isso https://codepen.io/anon/pen/YJjJPg)

pagefly custom fonts

2.4 – Aplique a fonte personalizada a um elemento específico

Selecione o elemento

Em Geral> Atributo, coloque um nome para a Classe. Por exemplo: fonte-personalizada

use custom fonts of pagefly

Então incorpore isso https://pastebin.com/raw/hNn8xU1k

(Substitua *: not (.fa) na etapa 2.3 para .custom-font)

use custom fonts

Observe que você não deve escolher nenhuma fonte em Estilo> Tipografia> Família de fontes para fazer esse código funcionar.

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages