É possível incluir fontes personalizadas em criativos de HTML5. Para isso, basta fazer upload de um arquivo de fonte personalizada no Studio e usar a regra de font-face de CSS.
Tipos de arquivos de fonte compatíveis
- EOT
- OTF
- TTF
- WOFF
- WOFF2
Carregar fontes personalizadas com CSS
No arquivo CSS do seu criativo, adicione a regra @font-face antes dos outros estilos. Para simplificar o processo, este exemplo usa apenas um arquivo de fonte TrueType. Para maximizar a compatibilidade com os navegadores, inclua também origens de arquivos de fonte WOFF ou EOT. Saiba mais sobre o suporte a font-face para navegadores com CSS-Tricks.
CSS
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Regular.ttf') format('truetype');
}Em seguida, use a propriedade de família de fontes para configurar os elementos como no exemplo abaixo. Este exemplo define a Open Sans como fonte a ser usada em um div de texto com o código "text-element".
CSS
#text-element {
font-family: 'Open Sans', Arial, sans-serif;
}Fazer upload do arquivo de fonte personalizada no Studio
É possível fazer upload de um arquivo de fonte personalizada junto com os arquivos de outros criativos ou fazer upload na Biblioteca de materiais, caso você planeje usar a mesma fonte em vários criativos.
Fazer upload de uma fonte com os arquivos de criativos
Se você usa uma fonte personalizada em um único criativo, é possível fazer upload do arquivo da fonte junto com os arquivos HTML, JavaScript e de imagem.
Fazer upload de uma fonte na Biblioteca de materiais
Se você usa uma fonte personalizada em vários criativos, poupe tempo e faça upload da fonte na Biblioteca de materiais.
Uso de fontes personalizadas em criativos dinâmicos
O método descrito acima também pode ser aplicado se você usa a mesma fonte personalizada em todas as variações de um criativo dinâmico.
Se você deseja usar diferentes fontes personalizadas em cada variação de um único criativo dinâmico, faça upload das fontes na Biblioteca de materiais e coloque os caminhos para a Biblioteca de materiais no seu feed. Em seguida, crie o código JavaScript para atualizar a regra de font-face de CSS para o elemento de texto usando os caminhos do feed. O exemplo abaixo usa duas colunas no feed para carregar e definir uma fonte personalizada, uma coluna "Nome da fonte" para o nome da família de fontes a ser usada e outra, "Fonte", para o arquivo da fonte que será carregado.
Amostra de código JavaScript
var sheets = document.styleSheets; // Returns an Array-like StyleSheetList
var sheet = document.styleSheets[0]; // Get the first style sheet
sheet.insertRule("@font-face {
font-family: 'dynamicContent.SampleElement[0].fontname';
src: url('dynamicContent.SampleElement[0].font') format('truetype');
}", 0);
// Substitua "text-element" pelo ID do div de texto em que você deseja usar a fonte.
sheet.insertRule("#text-element {
font-family: 'Open Sans', Arial, sans-serif;
}", 1);