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.
2. Dafonte
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.
@Tipo de letra { fonte - família : "Minha fonte" ; src : url ( { { "download-font.woff2" | asset_url } } ) formato ( "woff2" ) ; } |
Se você estiver usando vários tipos de fonte, separe o URL com vírgula. Consulte o código abaixo
@Tipo de letra { fonte - família : 'Minha fonte' ; font - display : substituto ; src : url ( { { "download-font.eot" | asset_url } } ) ; /* Modos de compatibilidade do IE9 */ src : url ( { { "download-font.woff" | asset_url } } ) format ( "woff" ) , /* Navegadores modernos */ url ( { { "download-font.woff2" | asset_url } } ) formato ( "woff2" ) , url ( { { "download-font.ttf" | asset_url } } ) formato ( "truetype" ) , /* Safari, Android, iOS */ url ( { { "download-font.svg" | asset_url } } ) formato ( "svg" ) ; /* iOS legado */ } |
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.
. meu - texto { font - family : "Minha fonte" ! importante ; } |
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.
@Tipo de letra { família de fontes : 'esfumaçado' ; font - display : substituto ; src : url ( https : //samplelink.com) formato('woff2'); } |
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".
0 comentários