Desde a introdução das fontes da web em 2009, os designers passaram a contar com uma ampla variedade de opções tipográficas. Essas fontes foram amplamente usadas por meio da regra CSS @fontface, oferecendo aos designers uma maneira de se libertarem das fontes web-safe (do sistema).

Uma variedade de formatos de arquivos de fonte estava (e ainda está) disponível em grandes fundições de fontes, principalmente no Google Fonts.

Naquela época, usar fontes da web significava trabalhar com arquivos separados para cada peso e estilo. Por exemplo, nomes de arquivos como os seguintes deixavam claro como a fonte seria exibida em uso:

Roboto-Italic.woff2
Lato-BoldItalic.woff2
OpenSans-SemiBold.ttf
WorkSans-ExtraBold.ttf

Cada variação precisava ser carregada como seu próprio arquivo. Isso aumentava o peso da página, exigia mais solicitações HTTP e aumentava a complexidade ao escolher e aplicar fontes em um design.

A ascensão das fontes variáveis

Em 2016, surgiu um grande avanço na tipografia digital: as fontes variáveis. Desenvolvidas de forma colaborativa pelo Google, Apple, Adobe e Microsoft, elas rapidamente se tornaram populares.

A característica principal de uma fonte variável é que ela pode conter diferentes eixos de variação:

Eixo Propriedade CSS
Weight font-weight
Style font-style: italic
Slant font-style: oblique
Stretch font-stretch
Optical Size (opsz) font-variations-setting

O formato de arquivo mais usado é o .woff2 (Web Open Font Format), um formato altamente compactado que se tornou uma recomendação do W3C em 2018. Embora formatos como .ttf e .otf possam ser usados como uma fonte variável, o formato mais eficiente é .woff2. Todos os navegadores modernos oferecem suporte a fontes variáveis.

Para maior clareza aqui, estamos fazendo uma distinção entre “fontes da web” e “fontes variáveis”. Na prática, porém, você verá com frequência fontes variáveis agrupadas com fontes da web.

Por que usar fontes variáveis?

Há três motivos principais para você usar fontes variáveis em seus projetos:

  1. Melhor desempenho: em vez de carregar vários arquivos de fonte separados (Regular, Bold, Italic, etc.), um único arquivo de fonte variável pode cobrir todos eles. Isso significa menos solicitações HTTP e tempos de carregamento mais rápidos.
  2. Flexibilidade de design: fontes variáveis oferecem controle refinado. Por exemplo, em vez de ficar limitado a font-weight: 500 ou 600, você pode definir um valor personalizado como 532.
  3. Tipografia responsiva: como as fontes variáveis podem se adaptar de forma fluida, você pode criar uma tipografia que responda a todos os dispositivos. Um bom exemplo: usar font-weight: clamp() para dimensionar o peso entre as janelas de visualização, sem os “saltos” abruptos que você obteria com arquivos de fontes estáticos.

Como o WordPress usa fontes variáveis

Com o lançamento do WordPress 6.1 em novembro de 2022, o suporte a fontes variáveis foi adicionado ao sistema theme.json. A primeira demonstração disso foi no tema Twenty Twenty-Three.

Personalizando um tema com fontes variáveis

Ao trabalhar com um tema filho (child theme) do TT5, primeiro carregamos os estilos do tema principal (parent theme) e do tema filho (child theme).

Para garantir que nossas fontes personalizadas sejam exibidas de forma consistente no editor e no frontend, também carregamos um arquivo fonts.css que inclui as declarações @font-face necessárias.

<?php
// enqueue parent and child styles
add_action('wp_enqueue_scripts', function() {
   wp_enqueue_style(
       'parent-style',
       get_template_directory_uri() . '/style.css'
   );

   wp_enqueue_style(
       'child-style',
       get_stylesheet_uri(),
       array('parent-style'),
       wp_get_theme()->get('Version')
   );

   // enqueue custom fonts
   wp_enqueue_style(
       'child-fonts',
       get_stylesheet_directory_uri() . '/fonts.css',
       array(),
       wp_get_theme()->get('Version')
   );
});

Como sempre, a forma de carregar scripts depende do próprio tema. Não há um método único e padronizado.

Para confirmar que configuramos nosso child theme corretamente, executamos este teste em styles.css:

body { background: #0000ff; }

Adicionando fontes com theme.json

O TT5 já inclui duas fontes variáveis por padrão: Manrope e Fira Code. Para este exemplo, vamos adicionar a Vollkorn e torná-la a fonte de cabeçalho padrão com peso 600.

Aqui está a parte relevante de theme.json:

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "typography": {
      "fontFamilies": [
        {
          "name": "Manrope",
          "slug": "manrope",
          "fontFamily": "Manrope, sans-serif",
          "fontFace": [
            {
              "fontFamily": "Manrope",
              "src": ["file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"],
              "fontWeight": "200 800",
              "fontStyle": "normal"
            }
          ]
        },
        {
          "name": "Fira Code",
          "slug": "fira-code",
          "fontFamily": ""Fira Code", monospace",
          "fontFace": [
            {
              "fontFamily": ""Fira Code"",
              "src": ["file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"],
              "fontWeight": "300 700",
              "fontStyle": "normal"
            }
          ]
        },
        {
          "name": "Vollkorn",
          "slug": "vollkorn",
          "fontFamily": "Vollkorn, serif",
          "fontFace": [
            {
              "fontFamily": "Vollkorn",
              "src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2"],
              "fontWeight": "400 900",
              "fontStyle": "normal"
            },
            {
              "fontFamily": "Vollkorn",
              "src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2"],
              "fontWeight": "400 900",
              "fontStyle": "italic"
            }
          ]
        }
      ],
      "customFontSize": true,
      "fluid": true
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var:preset|font-family|manrope"
    },
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var:preset|font-family|vollkorn",
          "fontWeight": "600"
        }
      }
    }
  }
}

O resultado é a aparência da fonte Vollkorn em todo o site.

A fonte Vollkorn agora está disponível na biblioteca de fontes do WordPress.
A fonte Vollkorn agora está disponível na biblioteca de fontes do WordPress.

Observações importantes:

  • Talvez você queira copiar os arquivos Manrope e Fira Code para o seu tema filho (child theme), caso o TT5 seja atualizado com novos caminhos para os arquivos.
  • Pode parecer que o código para essas fontes é redundante, pois elas já estão registradas pelo tema principal (parent theme). No entanto, é importante que você as declare em seu tema filho (child theme). Isso garante que elas sejam exibidas corretamente na interface da Biblioteca de Fontes e permaneçam disponíveis mesmo que o tema principal (parent theme) seja atualizado com novos caminhos de arquivo ou alterações.
  • Estamos referenciando dois arquivos diferentes da fonte Vollkorn.

Garantindo que as fontes carreguem corretamente

Às vezes, as fontes não serão exibidas corretamente no frontend até que você as declare no CSS. Aqui está um exemplo típico de styles.css:

/*
Theme Name: TT5 Child
Template: twentytwentyfive
Version: 1.0
*/

/* Ensure fonts are loaded and applied */
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

code,
pre {
  font-family: 'Fira Code', 'Courier New', monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Vollkorn', 'Times New Roman', serif;
}

E em fonts.css, declaramos os arquivos de fonte usando @font-face. Isso garante que o navegador saiba quais fontes devem ser carregadas e aplicadas. Se você quiser realmente pré-carregar fontes críticas (por exemplo, a fonte do cabeçalho principal), também poderá adicionar um <link rel="preload"> ao <head> do site por meio de hooks do WordPress. Na maioria dos casos, a regra @font-face com font-display: swap oferece um bom equilíbrio entre desempenho e experiência do usuário.

/* Preload critical fonts for better performance */
@font-face {
  font-family: 'Manrope';
  src: url('../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';
  src: url('../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2')
       format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

O resultado é uma página em que os cabeçalhos, utilizam, por padrão, a fonte Vollkorn com peso 600.

Fonte Vollkorn definida como a fonte de cabeçalho padrão no editor do WordPress.
Fonte Vollkorn definida como a fonte de cabeçalho padrão no editor do WordPress.

Se preferir, você pode incluir as regras @font-face diretamente em styles.css. Isso também eliminaria a necessidade de você carregar o arquivo fonts.css.

Facilitando a escolha dos pesos das fontes para os usuários

Uma das maiores vantagens das fontes variáveis é que os pesos não estão limitados a a valores fixos, como 400 ou 600. Você pode usar qualquer valor entre 100 e 900. O problema é que o WordPress não oferece uma interface de usuário para que você escolha esses pesos personalizados imediatamente.

Para resolver isso, criamos um plugin minimalista chamado Font Weight Options. Ele adiciona uma página de configurações em Appearance > Font Weight, na qual você pode definir pesos personalizados para o corpo do texto, cabeçalhos e blocos de código.

Aqui está o exemplo da lógica central:

<?php
/**
 * Plugin Name: Font Weight Options
 */

class Font_Weight_Options {
    public function __construct() {
        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
        add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );
    }

    public function add_admin_menu() {
        add_theme_page(
            __( 'Font Weight Settings', 'font-weight-options' ),
            __( 'Font Weight', 'font-weight-options' ),
            'manage_options',
            'font-weight-settings',
            array( $this, 'render_admin_page' )
        );
    }

    public function apply_font_weights_frontend() {
        $weights = get_option( 'fwo_font_weights', array(
            'body' => 400,
            'headings' => 600,
            'code' => 400,
        ) );

        echo "<style>
            body { font-weight: {$weights['body']} !important; }
            h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }
            code, pre { font-weight: {$weights['code']} !important; }
        </style>";
    }
}

new Font_Weight_Options();

O snippet acima mostra a lógica central. Publicamos o código-fonte completo no GitHub Gist se você quiser ver o plugin completo, incluindo o formulário de configurações e a validação.

A versão completa adiciona:

  • Valores padrão na ativação do plugin
  • Um formulário simples de configurações de administração com campos numéricos (100-900)
  • Validação para manter os valores dentro do intervalo
  • Saída dos pesos no editor de blocos e no frontend

O resultado é esta nova página em nosso WP Admin, que permite que os usuários definam os valores de peso da fonte para nossas três fontes. Escolhemos três valores “não padrão”.

Nova página de configurações de pesos de fonte no painel de controle do WordPress.
Nova página de configurações de pesos de fonte no painel de controle do WordPress.

O resultado é uma página com esses pesos de fonte correspondentes que são renderizados conforme previsto no editor de páginas e no frontend.

Página no painel de controle do WordPress exibindo três fontes com suas larguras atribuídas.
Página no painel de controle do WordPress exibindo três fontes com seus pesos atribuídos.

Uma forma mais simples e direta de adicionar uma única fonte variável

Se a abordagem anterior pareceu complexa, existe uma alternativa mais simples que não tem todos os recursos, mas é uma maneira rápida de inserir qualquer tipo de fonte em seu tema.

Os usuários podem adicionar facilmente o Google Fonts por meio da Font Library. Se você preferir, dê uma olhada em nosso artigo sobre as 15 melhores fontes do Google por números (com dicas de uso), que pode ajudar.

E se você preferir algo diferente de uma fonte do Google? Há muitas maneiras de obter fontes de código aberto devidamente licenciadas para seus projetos. Recorremos ao GitHub para obter SourceSans3VF-Upright, uma fonte da Adobe.

Nosso objetivo é usá-la como uma fonte opcional que será exibida corretamente no editor e no frontend.

O arquivo da fonte foi colocado na pasta /assets/fonts do nosso tema filho (child theme). A partir daí, criamos functions.php.

<?php
/**
 * Enqueue parent and child theme styles.
 */
function twentytwentyfive_kinstachild_enqueue_styles() {
    // Parent theme style.
    wp_enqueue_style(
        'twentytwentyfive-style',
        get_parent_theme_file_uri( 'style.css' ),
        array(),
        wp_get_theme()->get( 'Version' )
    );

    // Child theme style.
    wp_enqueue_style(
        'twentytwentyfive-child-style',
        get_stylesheet_uri(),
        array( 'twentytwentyfive-style' ),
        wp_get_theme()->get( 'Version' )
    );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );

/**
 * Enqueue child theme styles in the editor.
 */
add_action( 'after_setup_theme', function() {
    add_editor_style( 'style.css' );
} );

Como no exemplo anterior, nosso arquivo theme.json precisa referenciar Manrope e Fira Code do tema principal (parent theme). Se você omitir esses códigos, elas serão removidas do nosso tema.

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Manrope",
          "slug": "manrope",
          "fontFamily": "Manrope, sans-serif",
          "fontFace": [
            {
              "src": [
                "file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": "Manrope"
            }
          ]
        },
        {
          "name": "Fira Code",
          "slug": "fira-code",
          "fontFamily": ""Fira Code", monospace",
          "fontFace": [
            {
              "src": [
                "file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": ""Fira Code""
            }
          ]
        },
        {
          "name": "Source Sans 3",
          "slug": "source-sans-3",
          "fontFamily": ""Source Sans 3", sans-serif",
          "fontFace": [
            {
              "src": [
                "file:./assets/fonts/SourceSans3VF-Upright.woff2"
              ],
              "fontWeight": "100 900",
              "fontStyle": "normal",
              "fontFamily": "Source Sans 3"
            }
          ]
        }
      ]
    }
  }
}

Lembre-se de que você ainda precisa de um arquivo styles.css básico para incluir os metadados essenciais que informam ao WordPress que você está trabalhando com um tema filho (child theme).

Resumo

Seja com uma configuração totalmente personalizada ou com uma integração rápida, fontes variáveis no WordPress oferecem uma forma poderosa de elevar a tipografia do seu site. Elas melhoram o desempenho, reduzem a complexidade e oferecem opções de design responsivas e flexíveis que simplesmente não são possíveis com fontes estáticas tradicionais.

Para desbloquear todo o seu potencial, pode ser necessário criar uma interface personalizada que exponha os eixos variáveis (como weight, slant ou optical size) e dê aos administradores mais controle.

Se estiver criando um site WordPress na plataforma de hospedagem da Kinsta, você também se beneficiará da infraestrutura que prioriza o desempenho, facilitando ainda mais o fornecimento eficiente de ativos modernos, como fontes variáveis.

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.