SeedProd
SeedProd

Documentação do SeedProd

Documentação, Materiais de Referência e Tutoriais para SeedProd

Como Usar Fontes Personalizadas com SeedProd

O SeedProd suporta fontes personalizadas usando o método @font-face do CSS3. Isso permite carregar qualquer arquivo de fonte hospedado em seu servidor e aplicá-lo a elementos de texto em suas páginas e modelos.

Etapa 1: Prepare Seus Arquivos de Fonte

Baixe a fonte desejada e converta-a para formatos compatíveis com a web. Para garantir que sua fonte seja exibida corretamente em todos os navegadores e dispositivos, gere os seguintes tipos de arquivo usando o Gerador de Fontes Web do FontSquirrel:

  • WOFF: Web Open Font Format, adequado para páginas da web.
  • WOFF2: Uma versão aprimorada do WOFF com melhor compressão.
  • TTF: TrueType font, amplamente suportado no Mac e Windows.
  • SVG: Formato de fonte Scalable Vector Graphics.
  • EOT: Embedded OpenType, usado para compatibilidade com páginas da web.
  • OTF: Formato OpenType, suportado na maioria das plataformas.

Etapa 2: Envie Seus Arquivos de Fonte para o WordPress

Envie seus arquivos de fonte para o servidor de hospedagem do seu WordPress. Você pode fazer isso usando FTP, o Gerenciador de Arquivos do painel de controle da sua hospedagem ou um plugin de Gerenciador de Arquivos. Escolha qualquer pasta dentro do seu diretório /wp-content/ como destino de upload — por exemplo, /wp-content/fonts/.

Anote o caminho completo da URL para cada arquivo de fonte enviado. Você precisará dessas URLs na próxima etapa.

Etapa 3: Registre a Fonte no CSS Global do SeedProd

Abra o editor do SeedProd e vá para Configurações Globais > CSS Personalizado. Adicione uma regra @font-face que referencie seus arquivos de fonte enviados. Substitua NomeDaSuaFonte e as URLs de exemplo pelos nomes e caminhos de arquivo reais da sua fonte.

Seção CSS Personalizado de Configurações Globais no editor SeedProd
@font-face {
  font-family: 'YourFontName';
  src: url('https://example.com/wp-content/fonts/YourFont.woff2') format('woff2'),
       url('https://example.com/wp-content/fonts/YourFont.woff') format('woff'),
       url('https://example.com/wp-content/fonts/YourFont.ttf') format('truetype'),
       url('https://example.com/wp-content/fonts/YourFont.otf') format('opentype'),
       url('https://example.com/wp-content/fonts/YourFont.svg') format('svg'),
       url('https://example.com/wp-content/fonts/YourFont.eot') format('embedded-opentype');
}

Etapa 4: Aplique a Fonte aos Elementos

Depois que a fonte for registrada, aplique-a a quaisquer elementos em sua página adicionando uma segunda regra CSS na mesma seção CSS Personalizado. O exemplo abaixo aplica a fonte a todas as tags de título — ajuste os seletores para segmentar os elementos que você precisar.

h1, h2, h3 {
  font-family: 'YourFontName', sans-serif;
}
Fonte personalizada aplicada a títulos no SeedProd via CSS Global

Sua fonte personalizada agora está disponível em todas as suas páginas do SeedProd. Você pode usar seletores CSS adicionais para aplicar a fonte a parágrafos, botões, links de navegação ou quaisquer outros elementos para manter sua tipografia consistente em todo o seu site.

Artigos Relacionados

Documentação do SeedProd


  
Receba dicas e recursos gratuitos diretamente na sua caixa de entrada, junto com mais de 60.000 outros.

  

    

      

        

          
        

        

          
        

        

          
        

      

    

  

  

    Follow Us