{"id":72960,"date":"2025-10-02T04:38:17","date_gmt":"2025-10-02T07:38:17","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=72960&#038;preview=true&#038;preview_id=72960"},"modified":"2025-10-02T16:36:43","modified_gmt":"2025-10-02T19:36:43","slug":"fontes-variaveis","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/","title":{"rendered":"Usando fontes vari\u00e1veis em temas de WordPress"},"content":{"rendered":"<p>Desde a introdu\u00e7\u00e3o das <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-seguras-na-web\/\">fontes da web<\/a> em 2009, os designers passaram a contar com uma ampla variedade de op\u00e7\u00f5es tipogr\u00e1ficas. Essas fontes foram amplamente usadas por meio da regra <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">CSS<\/a> <code>@fontface<\/code>, oferecendo aos designers uma maneira de se libertarem das fontes web-safe (do sistema).<\/p>\n<p>Uma variedade de formatos de arquivos de fonte estava (e ainda est\u00e1) dispon\u00edvel em grandes fundi\u00e7\u00f5es de fontes, principalmente no <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-fontes-google\/\">Google Fonts<\/a>.<\/p>\n<p>Naquela \u00e9poca, 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:<\/p>\n<pre><code class=\"language-bash\">Roboto-Italic.woff2\nLato-BoldItalic.woff2\nOpenSans-SemiBold.ttf\nWorkSans-ExtraBold.ttf<\/code><\/pre>\n<p>Cada varia\u00e7\u00e3o precisava ser carregada como seu pr\u00f3prio arquivo. Isso aumentava o peso da p\u00e1gina, exigia mais solicita\u00e7\u00f5es HTTP e aumentava a complexidade ao escolher e aplicar fontes em um design.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Voc\u00ea precisa de uma r\u00e1pida atualiza\u00e7\u00e3o sobre fontes da web? Confira nosso guia: <em><a href=\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/#terminology\">Como alterar fontes no WordPress (e mudar tamanho, cor, otimizar)<\/a><\/em>.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>A ascens\u00e3o das fontes vari\u00e1veis<\/h2>\n<p>Em 2016, surgiu um grande avan\u00e7o na tipografia digital: as fontes vari\u00e1veis. Desenvolvidas de forma colaborativa pelo Google, Apple, Adobe e Microsoft, elas rapidamente se tornaram populares.<\/p>\n<p>A caracter\u00edstica principal de uma fonte vari\u00e1vel \u00e9 que ela pode conter diferentes eixos de varia\u00e7\u00e3o:<\/p>\n<table>\n<tbody>\n<tr>\n<td colspan=\"1\" rowspan=\"1\"><strong>Eixo <\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\"><strong>Propriedade CSS <\/strong><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">Weight<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-weight<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">Style<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-style: italic<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">Slant<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-style: oblique<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">Stretch<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-stretch<\/code><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\">Optical Size (opsz)<\/td>\n<td colspan=\"1\" rowspan=\"1\"><code>font-variations-setting<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>O formato de arquivo mais usado \u00e9 o <code>.woff2<\/code> (Web Open Font Format), um formato altamente compactado que se tornou uma <a href=\"https:\/\/www.w3.org\/blog\/2018\/wcag21-rec\/\">recomenda\u00e7\u00e3o do W3C<\/a> em 2018. Embora formatos como <code>.ttf<\/code> e <code>.otf<\/code> possam ser usados como uma fonte vari\u00e1vel, o formato mais eficiente \u00e9 <code>.woff2<\/code>. Todos os navegadores modernos oferecem suporte a fontes vari\u00e1veis.<\/p>\n<p>Para maior clareza aqui, estamos fazendo uma distin\u00e7\u00e3o entre &#8220;fontes da web&#8221; e &#8220;fontes vari\u00e1veis&#8221;. Na pr\u00e1tica, por\u00e9m, voc\u00ea ver\u00e1 com frequ\u00eancia fontes vari\u00e1veis agrupadas com fontes da web.<\/p>\n<h3>Por que usar fontes vari\u00e1veis?<\/h3>\n<p>H\u00e1 tr\u00eas motivos principais para voc\u00ea usar fontes vari\u00e1veis em seus projetos:<\/p>\n<ol start=\"1\">\n<li><strong>Melhor desempenho:<\/strong> em vez de carregar v\u00e1rios arquivos de fonte separados (Regular, Bold, Italic, etc.), um \u00fanico arquivo de fonte vari\u00e1vel pode cobrir todos eles. Isso significa menos <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-uma-solicitacao-http\/\">solicita\u00e7\u00f5es HTTP<\/a> e tempos de carregamento mais r\u00e1pidos.<\/li>\n<li><strong>Flexibilidade de design:<\/strong> fontes vari\u00e1veis oferecem controle refinado. Por exemplo, em vez de ficar limitado a <code>font-weight: 500<\/code> ou <code>600<\/code>, voc\u00ea pode definir um valor personalizado como <code>532<\/code>.<\/li>\n<li><strong>Tipografia responsiva:<\/strong> como as fontes vari\u00e1veis podem se adaptar de forma fluida, voc\u00ea pode criar uma tipografia que responda a todos os dispositivos. Um bom exemplo: usar <code>font-weight: clamp()<\/code> para dimensionar o peso entre as janelas de visualiza\u00e7\u00e3o, sem os &#8220;saltos&#8221; abruptos que voc\u00ea obteria com arquivos de fontes est\u00e1ticos.<\/li>\n<\/ol>\n<h2>Como o WordPress usa fontes vari\u00e1veis<\/h2>\n<p>Com o lan\u00e7amento do <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-6-1\/\">WordPress 6.1<\/a> em novembro de 2022, o suporte a fontes vari\u00e1veis foi adicionado ao sistema <code>theme.json<\/code>. A primeira demonstra\u00e7\u00e3o disso foi no tema <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-twenty-twenty-three\/\">Twenty Twenty-Three<\/a>.<\/p>\n<h3>Personalizando um tema com fontes vari\u00e1veis<\/h3>\n<p>Ao trabalhar com um <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">tema filho<\/a> (child theme) do TT5, primeiro carregamos os estilos do tema principal (parent theme) e do tema filho (child theme).<\/p>\n<p>Para garantir que nossas fontes personalizadas sejam exibidas de forma consistente no editor e no frontend, tamb\u00e9m carregamos um arquivo <code>fonts.css<\/code> que inclui as declara\u00e7\u00f5es <code>@font-face<\/code> necess\u00e1rias.<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/\/ enqueue parent and child styles\nadd_action('wp_enqueue_scripts', function() {\n   wp_enqueue_style(\n       'parent-style',\n       get_template_directory_uri() . '\/style.css'\n   );\n\n   wp_enqueue_style(\n       'child-style',\n       get_stylesheet_uri(),\n       array('parent-style'),\n       wp_get_theme()-&gt;get('Version')\n   );\n\n   \/\/ enqueue custom fonts\n   wp_enqueue_style(\n       'child-fonts',\n       get_stylesheet_directory_uri() . '\/fonts.css',\n       array(),\n       wp_get_theme()-&gt;get('Version')\n   );\n});<\/code><\/pre>\n<p>Como sempre, a forma de carregar scripts depende do pr\u00f3prio tema. N\u00e3o h\u00e1 um m\u00e9todo \u00fanico e padronizado.<\/p>\n<p>Para confirmar que configuramos nosso <em>child theme<\/em> corretamente, executamos este teste em <code>styles.css<\/code>:<\/p>\n<pre><code class=\"language-css\">body { background: #0000ff; }<\/code><\/pre>\n<h3>Adicionando fontes com theme.json<\/h3>\n<p>O TT5 j\u00e1 inclui duas fontes vari\u00e1veis por padr\u00e3o: <a href=\"https:\/\/fonts.google.com\/specimen\/Manrope\">Manrope<\/a> e <a href=\"https:\/\/fonts.google.com\/specimen\/Fira+Code\">Fira Code<\/a>. Para este exemplo, vamos adicionar a <a href=\"https:\/\/fonts.google.com\/specimen\/Vollkorn\">Vollkorn<\/a> e torn\u00e1-la a fonte de cabe\u00e7alho padr\u00e3o com peso 600.<\/p>\n<p>Aqui est\u00e1 a parte relevante de <code>theme.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.7\/theme.json\",\n  \"version\": 3,\n  \"settings\": {\n    \"appearanceTools\": true,\n    \"typography\": {\n      \"fontFamilies\": [\n        {\n          \"name\": \"Manrope\",\n          \"slug\": \"manrope\",\n          \"fontFamily\": \"Manrope, sans-serif\",\n          \"fontFace\": [\n            {\n              \"fontFamily\": \"Manrope\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"200 800\",\n              \"fontStyle\": \"normal\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Fira Code\",\n          \"slug\": \"fira-code\",\n          \"fontFamily\": \"\"Fira Code\", monospace\",\n          \"fontFace\": [\n            {\n              \"fontFamily\": \"\"Fira Code\"\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"300 700\",\n              \"fontStyle\": \"normal\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Vollkorn\",\n          \"slug\": \"vollkorn\",\n          \"fontFamily\": \"Vollkorn, serif\",\n          \"fontFace\": [\n            {\n              \"fontFamily\": \"Vollkorn\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"400 900\",\n              \"fontStyle\": \"normal\"\n            },\n            {\n              \"fontFamily\": \"Vollkorn\",\n              \"src\": [\"file:..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-Italic-VariableFont_wght.woff2\"],\n              \"fontWeight\": \"400 900\",\n              \"fontStyle\": \"italic\"\n            }\n          ]\n        }\n      ],\n      \"customFontSize\": true,\n      \"fluid\": true\n    }\n  },\n  \"styles\": {\n    \"typography\": {\n      \"fontFamily\": \"var:preset|font-family|manrope\"\n    },\n    \"elements\": {\n      \"heading\": {\n        \"typography\": {\n          \"fontFamily\": \"var:preset|font-family|vollkorn\",\n          \"fontWeight\": \"600\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>O resultado \u00e9 a apar\u00eancia da fonte Vollkorn em todo o site.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/vollkorn-in-wp.png\" alt=\"A fonte Vollkorn agora est\u00e1 dispon\u00edvel na biblioteca de fontes do WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A fonte Vollkorn agora est\u00e1 dispon\u00edvel na biblioteca de fontes do WordPress.<\/figcaption><\/figure>\n<p>Observa\u00e7\u00f5es importantes:<\/p>\n<ul>\n<li>Talvez voc\u00ea 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.<\/li>\n<li>Pode parecer que o c\u00f3digo para essas fontes \u00e9 redundante, pois elas j\u00e1 est\u00e3o registradas pelo tema principal (parent theme). No entanto, \u00e9 importante que voc\u00ea as declare em seu tema filho (child theme). Isso garante que elas sejam exibidas corretamente na interface da Biblioteca de Fontes e permane\u00e7am dispon\u00edveis mesmo que o tema principal (parent theme) seja atualizado com novos caminhos de arquivo ou altera\u00e7\u00f5es.<\/li>\n<li>Estamos referenciando dois arquivos diferentes da fonte Vollkorn.<\/li>\n<\/ul>\n<h3>Garantindo que as fontes carreguem corretamente<\/h3>\n<p>\u00c0s vezes, as fontes n\u00e3o ser\u00e3o exibidas corretamente no frontend at\u00e9 que voc\u00ea as declare no CSS. Aqui est\u00e1 um exemplo t\u00edpico de <code>styles.css<\/code>:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: TT5 Child\nTemplate: twentytwentyfive\nVersion: 1.0\n*\/\n\n\/* Ensure fonts are loaded and applied *\/\nbody {\n  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n               Oxygen-Sans, Ubuntu, Cantarell, sans-serif;\n}\n\ncode,\npre {\n  font-family: 'Fira Code', 'Courier New', monospace;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: 'Vollkorn', 'Times New Roman', serif;\n}<\/code><\/pre>\n<p>E em <code>fonts.css<\/code>, declaramos os arquivos de fonte usando <code>@font-face<\/code>. Isso garante que o navegador saiba quais fontes devem ser carregadas e aplicadas. Se voc\u00ea quiser <strong>realmente pr\u00e9-carregar<\/strong> fontes cr\u00edticas (por exemplo, a fonte do cabe\u00e7alho principal), tamb\u00e9m poder\u00e1 adicionar um <code>&lt;link rel=\"preload\"&gt;<\/code> ao <code>&lt;head&gt;<\/code> do site por meio de <a href=\"https:\/\/developer.wordpress.org\/plugins\/hooks\/\">hooks do WordPress<\/a>. Na maioria dos casos, a regra <code>@font-face<\/code> com <code>font-display: swap<\/code> oferece um bom equil\u00edbrio entre desempenho e experi\u00eancia do usu\u00e1rio.<\/p>\n<pre><code class=\"language-css\">\/* Preload critical fonts for better performance *\/\n@font-face {\n  font-family: 'Manrope';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Fira Code';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Vollkorn';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Vollkorn';\n  src: url('..\/twentytwentyfive\/assets\/fonts\/vollkorn\/Vollkorn-Italic-VariableFont_wght.woff2')\n       format('woff2');\n  font-weight: 100 900;\n  font-style: italic;\n  font-display: swap;\n}<\/code><\/pre>\n<p>O resultado \u00e9 uma p\u00e1gina em que os cabe\u00e7alhos, utilizam, por padr\u00e3o, a fonte Vollkorn com peso 600.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/using-vollkorn.png\" alt=\"Fonte Vollkorn definida como a fonte de cabe\u00e7alho padr\u00e3o no editor do WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Fonte Vollkorn definida como a fonte de cabe\u00e7alho padr\u00e3o no editor do WordPress.<\/figcaption><\/figure>\n<p>Se preferir, voc\u00ea pode incluir as regras <code>@font-face<\/code> diretamente em <code>styles.css<\/code>. Isso tamb\u00e9m eliminaria a necessidade de voc\u00ea carregar o arquivo <code>fonts.css<\/code>.<\/p>\n<h2>Facilitando a escolha dos pesos das fontes para os usu\u00e1rios<\/h2>\n<p>Uma das maiores vantagens das fontes vari\u00e1veis \u00e9 que os pesos n\u00e3o est\u00e3o limitados a a valores fixos, como 400 ou 600. Voc\u00ea pode usar qualquer valor entre <strong>100 e 900<\/strong>. O problema \u00e9 que o WordPress n\u00e3o oferece uma interface de usu\u00e1rio para que voc\u00ea escolha esses pesos personalizados imediatamente.<\/p>\n<p>Para resolver isso, criamos um <strong>plugin minimalista<\/strong>\u00a0chamado <em>Font Weight Options<\/em>. Ele adiciona uma p\u00e1gina de configura\u00e7\u00f5es em <strong>Appearance<\/strong> &gt; <strong>Font Weight<\/strong>,\u00a0na qual voc\u00ea pode definir pesos personalizados para o corpo do texto, cabe\u00e7alhos e blocos de c\u00f3digo.<\/p>\n<p>Aqui est\u00e1 o exemplo da l\u00f3gica central:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Font Weight Options\n *\/\n\nclass Font_Weight_Options {\n    public function __construct() {\n        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );\n        add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );\n    }\n\n    public function add_admin_menu() {\n        add_theme_page(\n            __( 'Font Weight Settings', 'font-weight-options' ),\n            __( 'Font Weight', 'font-weight-options' ),\n            'manage_options',\n            'font-weight-settings',\n            array( $this, 'render_admin_page' )\n        );\n    }\n\n    public function apply_font_weights_frontend() {\n        $weights = get_option( 'fwo_font_weights', array(\n            'body' =&gt; 400,\n            'headings' =&gt; 600,\n            'code' =&gt; 400,\n        ) );\n\n        echo \"&lt;style&gt;\n            body { font-weight: {$weights['body']} !important; }\n            h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }\n            code, pre { font-weight: {$weights['code']} !important; }\n        &lt;\/style&gt;\";\n    }\n}\n\nnew Font_Weight_Options();<\/code><\/pre>\n<p>O snippet acima mostra a l\u00f3gica central. Publicamos o <a href=\"https:\/\/gist.github.com\/olawanlejoel\/964409d74b71fb98e36b56179b8b09ec\">c\u00f3digo-fonte completo no GitHub Gist<\/a> se voc\u00ea quiser ver o plugin completo, incluindo o formul\u00e1rio de configura\u00e7\u00f5es e a valida\u00e7\u00e3o.<\/p>\n<p>A vers\u00e3o completa adiciona:<\/p>\n<ul>\n<li>Valores padr\u00e3o na ativa\u00e7\u00e3o do plugin<\/li>\n<li>Um formul\u00e1rio simples de configura\u00e7\u00f5es de administra\u00e7\u00e3o com campos num\u00e9ricos (100-900)<\/li>\n<li>Valida\u00e7\u00e3o para manter os valores dentro do intervalo<\/li>\n<li>Sa\u00edda dos pesos no editor de blocos e no frontend<\/li>\n<\/ul>\n<p>O resultado \u00e9 esta nova p\u00e1gina em nosso WP Admin, que permite que os usu\u00e1rios definam os valores de peso da fonte para nossas tr\u00eas fontes. Escolhemos tr\u00eas valores &#8220;n\u00e3o padr\u00e3o&#8221;.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/new-font-weight.png\" alt=\"Nova p\u00e1gina de configura\u00e7\u00f5es de pesos de fonte no painel de controle do WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Nova p\u00e1gina de configura\u00e7\u00f5es de pesos de fonte no painel de controle do WordPress.<\/figcaption><\/figure>\n<p>O resultado \u00e9 uma p\u00e1gina com esses pesos de fonte correspondentes que s\u00e3o renderizados conforme previsto no editor de p\u00e1ginas e no frontend.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/08\/test-fonts-wp.png\" alt=\"P\u00e1gina no painel de controle do WordPress exibindo tr\u00eas fontes com suas larguras atribu\u00eddas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">P\u00e1gina no painel de controle do WordPress exibindo tr\u00eas fontes com seus pesos atribu\u00eddos.<\/figcaption><\/figure>\n<h2>Uma forma mais simples e direta de adicionar uma \u00fanica fonte vari\u00e1vel<\/h2>\n<p>Se a abordagem anterior pareceu complexa, existe uma alternativa mais simples que n\u00e3o tem todos os recursos, mas \u00e9 uma maneira r\u00e1pida de inserir qualquer tipo de fonte em seu tema.<\/p>\n<p>Os usu\u00e1rios podem adicionar facilmente o Google Fonts por meio da Font Library. Se voc\u00ea preferir, d\u00ea uma olhada em nosso artigo sobre as <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-fontes-google\/?utm_source=chatgpt.com\">15 melhores fontes do Google por n\u00fameros (com dicas de uso)<\/a>, que pode ajudar.<\/p>\n<p>E se voc\u00ea preferir algo diferente de uma fonte do Google? H\u00e1 muitas maneiras de obter fontes de c\u00f3digo aberto devidamente licenciadas para seus projetos. Recorremos ao GitHub para obter <a href=\"https:\/\/github.com\/adobe-fonts\/source-sans\/blob\/release\/VF\/SourceSans3VF-Upright.otf\">SourceSans3VF-Upright<\/a>, uma fonte da Adobe.<\/p>\n<p>Nosso objetivo \u00e9 us\u00e1-la como uma fonte opcional que ser\u00e1 exibida corretamente no editor e no frontend.<\/p>\n<p>O arquivo da fonte foi colocado na pasta <code>\/assets\/fonts<\/code> do nosso tema filho (child theme). A partir da\u00ed, criamos <code>functions.php<\/code>.<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Enqueue parent and child theme styles.\n *\/\nfunction twentytwentyfive_kinstachild_enqueue_styles() {\n    \/\/ Parent theme style.\n    wp_enqueue_style(\n        'twentytwentyfive-style',\n        get_parent_theme_file_uri( 'style.css' ),\n        array(),\n        wp_get_theme()-&gt;get( 'Version' )\n    );\n\n    \/\/ Child theme style.\n    wp_enqueue_style(\n        'twentytwentyfive-child-style',\n        get_stylesheet_uri(),\n        array( 'twentytwentyfive-style' ),\n        wp_get_theme()-&gt;get( 'Version' )\n    );\n}\nadd_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );\n\n\/**\n * Enqueue child theme styles in the editor.\n *\/\nadd_action( 'after_setup_theme', function() {\n    add_editor_style( 'style.css' );\n} );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Note que, nessa configura\u00e7\u00e3o mais simples, n\u00e3o fazemos o carregamento manual de fontes personalizadas. Isso porque fontes vari\u00e1veis definidas em <code>theme.json<\/code> s\u00e3o automaticamente tratadas pelo WordPress, desde que estejam declaradas corretamente. Essa \u00e9 uma das vantagens\u00a0de usar o sistema de temas em bloco.<\/p>\n<\/aside>\n\n<p>Como no exemplo anterior, nosso arquivo <code>theme.json<\/code> precisa referenciar Manrope e Fira Code do tema principal (parent theme). Se voc\u00ea omitir esses c\u00f3digos, elas ser\u00e3o removidas do nosso tema.<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.7\/theme.json\",\n  \"version\": 3,\n  \"settings\": {\n    \"typography\": {\n      \"fontFamilies\": [\n        {\n          \"name\": \"Manrope\",\n          \"slug\": \"manrope\",\n          \"fontFamily\": \"Manrope, sans-serif\",\n          \"fontFace\": [\n            {\n              \"src\": [\n                \"file:..\/twentytwentyfive\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"\n              ],\n              \"fontWeight\": \"100 900\",\n              \"fontStyle\": \"normal\",\n              \"fontFamily\": \"Manrope\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Fira Code\",\n          \"slug\": \"fira-code\",\n          \"fontFamily\": \"\"Fira Code\", monospace\",\n          \"fontFace\": [\n            {\n              \"src\": [\n                \"file:..\/twentytwentyfive\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"\n              ],\n              \"fontWeight\": \"100 900\",\n              \"fontStyle\": \"normal\",\n              \"fontFamily\": \"\"Fira Code\"\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Source Sans 3\",\n          \"slug\": \"source-sans-3\",\n          \"fontFamily\": \"\"Source Sans 3\", sans-serif\",\n          \"fontFace\": [\n            {\n              \"src\": [\n                \"file:.\/assets\/fonts\/SourceSans3VF-Upright.woff2\"\n              ],\n              \"fontWeight\": \"100 900\",\n              \"fontStyle\": \"normal\",\n              \"fontFamily\": \"Source Sans 3\"\n            }\n          ]\n        }\n      ]\n    }\n  }\n}<\/code><\/pre>\n<p>Lembre-se de que voc\u00ea ainda precisa de um arquivo <code>styles.css<\/code> b\u00e1sico para incluir os metadados essenciais que informam ao WordPress que voc\u00ea est\u00e1 trabalhando com um tema filho (child theme).<\/p>\n<h2>Resumo<\/h2>\n<p>Seja com uma configura\u00e7\u00e3o totalmente personalizada ou com uma integra\u00e7\u00e3o r\u00e1pida, fontes vari\u00e1veis no WordPress oferecem uma forma poderosa de elevar a tipografia do seu site. Elas melhoram o desempenho, reduzem a complexidade e oferecem op\u00e7\u00f5es de design responsivas e flex\u00edveis que simplesmente n\u00e3o s\u00e3o poss\u00edveis com fontes est\u00e1ticas tradicionais.<\/p>\n<p>Para desbloquear todo o seu potencial, pode ser necess\u00e1rio criar uma interface personalizada que exponha os eixos vari\u00e1veis (como <em>weight<\/em>, <em>slant<\/em> ou <em>optical size<\/em>) e d\u00ea aos administradores mais controle.<\/p>\n<p>Se estiver criando um site WordPress na <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">plataforma de hospedagem da Kinsta<\/a>, voc\u00ea tamb\u00e9m se beneficiar\u00e1 da infraestrutura que prioriza o desempenho, facilitando ainda mais o fornecimento eficiente de ativos modernos, como fontes vari\u00e1veis.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Desde a introdu\u00e7\u00e3o das fontes da web em 2009, os designers passaram a contar com uma ampla variedade de op\u00e7\u00f5es tipogr\u00e1ficas. Essas fontes foram amplamente usadas &#8230;<\/p>\n","protected":false},"author":313,"featured_media":72961,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1036],"class_list":["post-72960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-temas-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Usando fontes vari\u00e1veis em temas de WordPress<\/title>\n<meta name=\"description\" content=\"Aprenda a usar fontes vari\u00e1veis em temas do WordPress com theme.json para melhorar o desempenho e a flexibilidade do design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Usando fontes vari\u00e1veis em temas de WordPress\" \/>\n<meta property=\"og:description\" content=\"Aprenda a usar fontes vari\u00e1veis em temas do WordPress com theme.json para melhorar o desempenho e a flexibilidade do design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-02T07:38:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-02T19:36:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bud Kraus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprenda a usar fontes vari\u00e1veis em temas do WordPress com theme.json para melhorar o desempenho e a flexibilidade do design.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bud Kraus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/\"},\"author\":{\"name\":\"Bud Kraus\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\"},\"headline\":\"Usando fontes vari\u00e1veis em temas de WordPress\",\"datePublished\":\"2025-10-02T07:38:17+00:00\",\"dateModified\":\"2025-10-02T19:36:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/\"},\"wordCount\":1635,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png\",\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/\",\"name\":\"Usando fontes vari\u00e1veis em temas de WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png\",\"datePublished\":\"2025-10-02T07:38:17+00:00\",\"dateModified\":\"2025-10-02T19:36:43+00:00\",\"description\":\"Aprenda a usar fontes vari\u00e1veis em temas do WordPress com theme.json para melhorar o desempenho e a flexibilidade do design.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Temas WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/temas-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Usando fontes vari\u00e1veis em temas de WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\",\"name\":\"Bud Kraus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"caption\":\"Bud Kraus\"},\"description\":\"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.\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/budkraus\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Usando fontes vari\u00e1veis em temas de WordPress","description":"Aprenda a usar fontes vari\u00e1veis em temas do WordPress com theme.json para melhorar o desempenho e a flexibilidade do design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/","og_locale":"pt_PT","og_type":"article","og_title":"Usando fontes vari\u00e1veis em temas de WordPress","og_description":"Aprenda a usar fontes vari\u00e1veis em temas do WordPress com theme.json para melhorar o desempenho e a flexibilidade do design.","og_url":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2025-10-02T07:38:17+00:00","article_modified_time":"2025-10-02T19:36:43+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png","type":"image\/png"}],"author":"Bud Kraus","twitter_card":"summary_large_image","twitter_description":"Aprenda a usar fontes vari\u00e1veis em temas do WordPress com theme.json para melhorar o desempenho e a flexibilidade do design.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Bud Kraus","Tempo estimado de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/"},"author":{"name":"Bud Kraus","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed"},"headline":"Usando fontes vari\u00e1veis em temas de WordPress","datePublished":"2025-10-02T07:38:17+00:00","dateModified":"2025-10-02T19:36:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/"},"wordCount":1635,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png","inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/","url":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/","name":"Usando fontes vari\u00e1veis em temas de WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png","datePublished":"2025-10-02T07:38:17+00:00","dateModified":"2025-10-02T19:36:43+00:00","description":"Aprenda a usar fontes vari\u00e1veis em temas do WordPress com theme.json para melhorar o desempenho e a flexibilidade do design.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/09\/using-variable-fonts-in-wordpress-themes-2.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/fontes-variaveis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Temas WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/temas-wordpress\/"},{"@type":"ListItem","position":3,"name":"Usando fontes vari\u00e1veis em temas de WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed","name":"Bud Kraus","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","caption":"Bud Kraus"},"description":"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.","url":"https:\/\/kinsta.com\/pt\/blog\/author\/budkraus\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/72960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/313"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=72960"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/72960\/revisions"}],"predecessor-version":[{"id":73055,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/72960\/revisions\/73055"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72960\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72960\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72960\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72960\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72960\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72960\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72960\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72960\/translations\/pt"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72960\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/72961"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=72960"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=72960"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=72960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}