Integre fontes personalizadas via @FontFace

Fontes personalizadas são ótimas para diferenciar seu site e torná-lo realmente único. Você pode escolher uma fonte que corresponda ao seu logotipo, uma fonte usada em seus cartões de visita e materiais impressos ou fontes criativas que combinam com o público do seu site. A coleção interna de fontes do Duda, junto com aquelas fornecidas pela biblioteca de Google Fonts, oferece uma ampla variedade de opções para corresponder a diversos designs de sites. Se quiser mais, veja o guia abaixo para saber como incorporar fontes personalizadas nos sites.

Isenção de responsabilidade: Este guia se baseia em uma ferramenta de terceiros, e não uma feita pela Duda. Além disso, observe se a tecnologia @font-face se enquadra no código personalizado. Não podemos garantir que a fonte escolhida seja compatível com a incorporação na Web, que os arquivos recebidos do criador da fonte estejam prontos para uso ou que o código editado esteja no formato correto.

Embora esses problemas raramente causem problemas na edição do site, faça backup do site antes de fazer alterações personalizadas no código. Confira a nossa política sobre códigos personalizados aqui.

Preparar arquivos de fontes personalizadas

As fontes personalizadas podem ter vários formatos, sendo que as mais conhecidas são: .otf, .ttf, .woff, .svg, e .eot. Para usar a sua fonte, será preciso ter os arquivos .ttf, .eot e .svg .

Se você tiver apenas um arquivo .otf ou .ttf, recomendamos o uso de uma ferramenta externa para converter a fonte para os formatos necessários (em nosso guia abaixo, usamos o FontSquirrel, mas você pode usar as alternativas disponíveis).

Conversão de arquivos .otf ou .ttf

1. Faça o download ou compre a fonte no formato .otf ou .ttf.
   Nota

   A fonte deve ser licenciada para a Web para que funcione.

2. Acesse a ferramenta geradora de webfonts FrontSquirrel, carregue a fonte e use a opção Expert para convertê-la. Escolha estes formatos (pelo menos): TrueType (.ttf), EOT Lite (.eot), SVG (.svg) e baixe o kit.

Enviar fontes para o Duda

Se você já tiver os links das fontes (por exemplo, se elas estiverem hospedadas no seu criador de fontes com links disponíveis, ou se você tiver enviado as fontes para uma plataforma de compartilhamento de arquivos), passe para a próxima etapa. Caso contrário, será preciso incorporar as versões geradas do .ttf, do .svg e do .eot das fontes do site.

1. No painel da esquerda, clique em Conteúdo, depois em Conteúdo do site e Gerenciar imagens.
2. Clique em Carregar novo arquivo para carregar esses arquivos.
3. Se você passar o mouse sobre um dos itens em Arquivos enviados, clique em Selecionar para gerar um botão Baixar arquivo no seu site.
4. Na barra de navegação, clique em Informações e Ferramentas ( ) e clique em Link de visualização. Com o botão direito do mouse, clique no botão e selecione Copiar endereço do link. Esse é o link para o arquivo no seu site do Duda.

   Esse processo deve ser feito separadamente para cada arquivo, para que, no final, você tenha três links para três formatos de arquivo.

   Nota

   Essa etapa não funciona se visualizada no editor. É preciso usar o link de visualização, disponível em Informações e Ferramentas, na barra de navegação.

Incorporar arquivos no Duda via @ font-face

1. Acesse o Modo Desenvolvedor no seu site, abra o arquivo site.css e cole o seguinte código:
   

@font-face {
font-family: 'FONT-NAME';
src: url('URL') format('embedded-opentype'),
url('URL') format('svg#FONT-NAME'),
url('URL') format('truetype');
font-weight: normal;
font-style: normal;
}

2. Navegue até a pasta que foi fornecida no seu repositório de fontes, ou baixada do FontSquirrel, e procure um arquivo de folha de estilo com um código semelhante ao descrito acima. A linha iniciada com font-family: terá o nome exclusivo atribuído à sua fonte:
   
3. Copie o nome da fonte e substitua duas instâncias de FONT-NAME no trecho de código acima pelo nome da fonte.
4. Salve e feche o Modo de Desenvolvedor.
5. No painel esquerdo, clique em Conteúdo e, em seguida, clique em Conteúdo do Site.
6. Clique em Gerenciar arquivos e em Selecionar no arquivo de fonte para adicionar um botão ao site.
7. Clique no botão para abrir o Editor de Conteúdo, clique com o botão direito do mouse no URL da fonte e selecione Copiar endereço do link.
8. Vá para o Modo de Desenvolvedor, abra site.css e substitua a URL pelos caminhos até os respectivos formatos que você enviou (a URL copiada do botão na etapa 7) e clique em Salvar.

A seguir, um exemplo de como o código final deve ficar:

Retorne ao editor, clique com o botão direito do mouse no elemento de texto que você quer editar e clique em Editar HTML/CSS. Em seguida, você pode aplicar a nova fonte aos widgets em todos os dispositivos ou em exibições específicas de dispositivos usando o trecho CSS no seguinte formato: font-family: 'FONT-NAME' !important;. Por exemplo, para nossa fonte, adicionamos esta linha de código CSS: font-family: 'inklandregular' !important;.

Dessa forma, é possível aplicar a fonte a parágrafos, cabeçalhos etc. Se quiser aplicar fontes personalizadas a elementos de texto no cabeçalho, faça isso no Modo Desenvolvedor.

Aplique uma fonte a fontes específicas do tema do site

Para aplicar suas fontes personalizadas ao Tema do Site, você deve trocar os elementos CSS específicos pelo nome da fonte personalizada. Para isso:

1. Clique no botão Modo Desenvolvedor na barra de navegação.
2. Clique em Site HTML/CSS e, em seguida, clique em site-theme.css.
3. Procure a classe específica do título ou da fonte a ser alterada (por exemplo: H1, H2 e assim por diante) e substitua a família de fontes atual pelo nome da fonte personalizada.
4. Clique em Salvar.
5. Clique em Fechar para fechar o modo de desenvolvedor.

Aplicar fonte com CSS

Para definir a fonte incorporada como a fonte do tema do site, adicione a seguinte linha CSS ao site.css. Saiba mais sobre como adicionar CSS personalizado Modo Desenvolvedor.

Substitua YOUR_GOOGLE_INTEGRATION_CODE acima pelo código CSS da família de fontes que você copiou do Google Fonts. Clique em Salvar.

Aplicar fonte a um widget específico

Para aplicar uma fonte a um widget específico:

1. Clique com o botão direito do mouse no Widget e clique em Editar HTML/CSS para abrir a janela de edição do HTML/CSS do widget.
2. Adicione o código CSS da família de fontes que você salvou no Passo 2, acima, entre os colchetes { } no CSS geral ou específico do dispositivo.

A fonte será aplicada aos elementos de texto do widget e você poderá usar o editor embutido para alterar as cores e editar o texto normalmente.

Aplique uma fonte a fontes específicas do tema do site

Para aplicar fontes personalizadas ao tema do site, você deve trocar os elementos CSS específicos pelo nome da fonte personalizada. Para isso:

1. Clique no botão Modo Desenvolvedor na barra de navegação.
2. Clique em Site HTML/CSS e, em seguida, clique em site-theme.css.
3. Procure a classe específica do título ou da fonte a ser alterada (por exemplo: H1, H2 e assim por diante) e substitua a família de fontes atual pelo nome da fonte personalizada.
4. Clique em Salvar.
5. Clique em Fechar para fechar o modo de desenvolvedor.

Notas

• O Duda não é compatível com .woff2.
• Preste atenção na maneira como os glifos são interpretados na versão web da sua fonte. Muitas fontes personalizadas oferecem várias versões de glifos. Verifique se a sua fonte processa corretamente antes de aplicá-la ao site ativo.
• As fontes personalizadas podem reduzir o desempenho e o tempo de carregamento do site, pois a fonte deve ser baixada antes para poder ser exibida. Normalmente, os sites do Duda têm classificação de velocidade de página muito alta, mas uma redução na velocidade de carregamento da página é inevitável quando são carregadas fontes adicionais no site. É importante analisar se o uso de fontes personalizadas justifica uma diminuição na velocidade da página.
• Caso a fonte personalizada não seja renderizada, por vários motivos, considere a possibilidade de adicionar uma fonte alternativa no CSS.
• Com o Duda, você não precisa usar consultas @media para exibir fontes somente em determinados dispositivos. Em vez disso, basta adicionar um CSS personalizado por dispositivo.
• Use apenas fontes licenciadas para incorporação na Web e/ou uso comercial. O não cumprimento da licença do proprietário da fonte é uma violação de seus direitos autorais.