Shopify features and tools
Add Shopify Custom Font for Dawn theme or Any Shopify theme

Adicionar fonte personalizada do Shopify para o tema Dawn ou qualquer tema do Shopify

Log in or Sign up to ensure access to FREE code across multiple devices.

Adicione facilmente uma fonte personalizada ao tema Dawn da sua loja Shopify ou qualquer outro tema usando o tutorial passo a passo fornecido abaixo. Escolha entre formatos de fonte populares, como TrueType, Web Open Font Format (WOFF) e Web Open Font Format 2 (WOFF2) para garantir compatibilidade com navegadores modernos. Confira recursos de fontes gratuitas como Google, Dafont, 1001freefonts e Fontspace, mas lembre-se de verificar o uso da licença comercial. Você também pode criar combinações de fontes personalizadas com instafonts. Comece hoje mesmo a aprimorar o design da sua loja com uma tipografia exclusiva.

Estes são os seguintes formatos de fonte disponíveis hoje.

TrueType (TTF): Desenvolvido pela Microsoft e Apple e compatível com alguns navegadores mais antigos, especialmente em dispositivos móveis.
Web Open Font Format (WOFF): Um formato wrapper para fontes TrueType e OpenType que compacta os arquivos e é compatível com todos os navegadores modernos.
Web Open Font Format 2 (WOFF2): WOFF atualizado que foi desenvolvido pelo Google. Este é considerado o MELHOR formato de fonte, pois oferece tamanhos de arquivo menores. Tamanho de arquivo menor significa melhor desempenho para navegadores modernos.

Você pode baixar fontes gratuitas da lista abaixo, mas certifique-se de verificar a licença se estiver usando-a comercialmente.

1.Google

2. Dafonte

3. 1001 fontes gratuitas

4. Espaço de fontes

Você também pode combinar fontes personalizadas ao seu gosto com instafonts .

1. Obtenha seu arquivo de fonte em qualquer site que você tenha, desde que o tipo de arquivo seja TFF.

2. O arquivo que baixei é tff, então temos que alterá-lo para arquivo WOFF ou WOFF2 para que o tema do Shopify possa reconhecer o arquivo. Precisamos descompactar o arquivo para poder converter.

3. Em seguida, usamos o conversor de fontes gratuito CloudCovert para converter do arquivo TFF para WOFF2.

4. Vá para a página de administração do Shopify, depois para Loja online, Temas.

5. Escolha o tema que deseja editar, clique em Ações e em Editar código.

6. Abra a pasta Ativos e clique em “Adicionar um novo ativo”. Em seguida, baixe o arquivo da fonte.

7. Eu sugeriria colocar a declaração da fonte dentro do <head> do arquivo theme.liquid na pasta layout para que seja carregado primeiro. Precisamos seguir este formato abaixo para inserir nossa fonte. Consulte a documentação do Shopify .

Você pode definir qualquer nome na família de fontes. Este nome será usado na chamada da fonte no CSS.

Se você estiver usando vários tipos de fonte, separe o URL com vírgula. Consulte o código abaixo

8. Tudo o que precisamos fazer é chamar essa fonte para nossos textos temáticos. Para chamar a fonte, usamos o nome da família de fontes que fornecemos. NOTA: Use !important no final se desejar substituir o estilo de fonte anterior.

OUTRA SOLUÇÃO:

Se por algum motivo a solução acima não funcionar. Pode ser que o arquivo da fonte não esteja vinculado corretamente. Tente seguir as instruções abaixo.

1. Na sua Admin Store, clique em Configurações no canto inferior esquerdo

2. Vá para Arquivos e carregue sua fonte.

3. Copie o link quando terminar o upload e cole-o na fonte. Veja o código abaixo para referência

Observação: substitua o link https://samplelink.com pelo link do arquivo Shopify.


Se ainda não conseguir vincular sua fonte corretamente, você pode nos contratar para fazer isso por você. Também podemos corrigir o problema de link quebrado ou link inativo das fontes do Shopify quando se trata de fontes. Basta entrar em contato conosco usando "Converse conosco".
Copied!

Lutando com instruções?

Não se preocupe, nós oferecemos cobertura por um preço razoável. Entre em contato conosco através de "Converse conosco" para obter um orçamento.

Relaxe enquanto nós cuidamos disso para você!

Voltar para o blogue

Deixe um comentário