Uma ótima maneira de adicionar um pouco de marca e individualismo ao seu site WordPress é alterar as fontes do seu tema.

A tipografia e outros elementos de banda criam uma boa primeira impressão, definem o clima para os visitantes do seu site e estabelecem a identidade da sua marca. Estudos^(Studies) também descobriram que as fontes afetam a capacidade dos leitores de aprender, recordar informações e memorizar textos.

Se você acabou de instalar um tema WordPress^{(installed a WordPress theme)} ou tem alguma experiência em CSS e codificação, mostraremos várias opções que você pode usar para alterar fontes no WordPress .

Como alterar as fontes no WordPress^{(How to Change Fonts in WordPress)}

Existem três opções principais disponíveis para você alterar as fontes no WordPress:

• Use fontes da Web como Google Fonts , Fonts.com ou Adobe Edge Web Fonts , que estão hospedadas em um site de terceiros
• Codifique^(Code) fontes da web em seu tema e coloque-as na fila
• Hospede^(Host) fontes em seu site e adicione-as ao seu tema

1. Como alterar fontes no WordPress usando fontes da Web^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Usar fontes da web é uma maneira mais fácil e rápida de alterar fontes no WordPress do que baixar e fazer upload de arquivos de fontes.

Com esta opção, você pode acessar uma variedade de fontes^{(access a variety of fonts)} sem atualizá-las cada vez que houver uma alteração, e isso não ocupa espaço do servidor em sua hospedagem. As fontes são servidas diretamente dos servidores do provedor usando um plugin ou adicionando código ao seu site.

Certifique^(Make) -se de que as fontes da Web que você escolher para o seu site correspondam à identidade da sua marca, sejam fáceis de ler para o corpo do texto, sejam familiares aos visitantes do site e transmitam o tipo de humor e imagem que você deseja.

Você pode adicionar fontes da web usando um plug-in do WordPress^{(using a WordPress plugin)} ou manualmente adicionando algumas linhas de código ao seu site. Vamos explorar as duas opções.

Como adicionar fontes da Web usando um plug-in do WordPress^{(How to Add Web Fonts Using a WordPress Plugin)}

Dependendo da fonte da web que você escolheu, você pode usar um plugin do WordPress para acessar a biblioteca de fontes e escolher a que deseja em seu site. Para este guia, escolhemos o Google Fonts^{(Google Fonts)} e usamos o plug-in Google Fonts Typography .

1. Para começar, faça login no painel de administração do WordPress e selecione Plugins > Add New .

1. Digite Tipografia do Google Fonts^{(Google Fonts Typography)} na caixa de pesquisa e selecione Instalar agora^{(Install Now)} .

1. Selecione Ativar^(Activate) .

1. Em seguida, acesse o Personalizador^(Customizer) indo em Appearance > Customize .

1. Selecione a seção Google Fonts .

1. Em seguida, clique no link para abrir as configurações das fontes e configurá-las da seguinte forma:

• Em Configurações básicas^{(Basic Settings)} , defina a fonte padrão para o corpo do texto, títulos e botões.

• Em Configurações avançadas^{(Advanced Settings)} , configure o título e a descrição do site, o menu, os títulos e o conteúdo, a barra lateral e o rodapé.

• Desmarque^(Uncheck) quaisquer pesos de fonte indesejados na seção Carregamento^{(Font Loading)} de Fonte para evitar a lentidão do seu site^{(avoid slowing down your site)} .

Se houver fontes em seu site que não estão sendo exibidas ou funcionando corretamente, use a seção Depuração^{(Debugging )} para solucionar problemas.

1. Você pode testar essas configurações no Personalizador^(Customizer) para verificar se estão funcionando da maneira desejada e, em seguida, selecione Publicar^(Publish) .

Observação^(Note) : se você esquecer de selecionar publicar no Personalizador^(Customizer) , perderá todas as alterações feitas.

Como adicionar fontes da Web usando código^{(How to Add Web Fonts Using Code)}

Você pode instalar e usar fontes da web se tiver acesso ao código do seu tema. Esta é uma alternativa manual para adicionar um plugin extra, mas não é complicado se você seguir os passos cuidadosamente.

No entanto, existem etapas diferentes a serem seguidas se você estiver usando um tema do diretório de temas do WordPress ou um tema personalizado.

Se você comprou um tema do diretório de temas do WordPress , crie um tema filho^{(create a child theme)} e dê a ele os arquivos style.css e functions.php. É mais fácil se você tiver um tema personalizado, pois pode editar a folha de estilo e o arquivo de funções do seu tema.

1. Para começar, selecione uma fonte da biblioteca do Google Fonts e selecione o ícone + (plus) para adicioná-la à sua biblioteca.

1. Em seguida, selecione a guia na parte inferior onde você encontrará o código para adicionar ao seu site. Vá para a seção de fonte ^{(Embed font)}Incorporar^(Embed) na guia Incorporar. Você encontrará o código gerado pelo Google Fonts , que se parece com isto:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Nota^(Note) : Escolhemos Work Sans para este guia, portanto, o nome da fonte pode ser diferente do seu, dependendo do que você escolheu.

1. Copie esta parte do código: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style('googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts');

Nesse caso, enfileiramos as fontes Cambria e Work Sans .

O próximo passo é adicionar as fontes à folha de estilo do seu tema para que a fonte funcione em seu site.

1. Para fazer isso, abra o arquivo style.css do seu tema e adicione o código para estilizar elementos individuais com suas fontes da web da seguinte forma:

body {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
família de fontes: 'Cambria', serif; ^{(font-family: ‘Cambria’, serif;)}
}

Nesse caso, a fonte principal será Work Sans enquanto elementos de cabeçalho como h1, h2 e h3 usarão Cambria .

Uma vez feito, salve a folha de estilo e verifique se suas fontes estão funcionando como deveriam. Caso contrário, verifique se as fontes não estão sendo substituídas na folha de estilo ou limpe o cache do navegador e tente novamente.

1. Tenha uma fonte de backup para garantir que as fontes possam ser renderizadas ou acessadas facilmente, especialmente para usuários com dispositivos antigos, conexões ruins ou se o provedor de fontes tiver problemas técnicos. Para fazer isso, vá para a folha de estilo e edite o CSS para ler da seguinte forma:

body {
font-family: 'Work Sans', Arial, sans-serif;
}

h1, h2, h3 {
família de fontes: 'Cambria', Times New Roman, serifa; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Se tudo estiver bem, os visitantes do seu site verão suas fontes da web padrão, no nosso caso Work Sans e Cambria . Se houver problemas, eles verão as fontes de backup, por exemplo, Arial ou Times New Roman no nosso caso.

2. Como alterar fontes no WordPress hospedando fontes^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Hospedar fontes em seus próprios servidores ajuda a otimizar o desempenho de suas fontes da Web, mas também é uma maneira mais segura^{(a more secure way)} de fazer isso em vez de extrair recursos de sites de terceiros.

O Google^(Google) Fonts e outras fontes da Web permitem que você faça download de fontes para uso como fontes hospedadas localmente, mas você ainda pode fazer download de outras fontes para o seu computador, desde que as licenças o permitam.

1. Para começar, baixe, descompacte, carregue o arquivo de fonte em seu site e vincule-o em sua folha de estilo. Nesse caso, você não precisa enfileirar as fontes no arquivo functions.php como fez com as fontes da web. Confirme se os arquivos que você está enviando estão no formato .woff antes de usá-los em seu site.

1. Em seguida, vá para wp-content/themes/themename para fazer o upload do arquivo de fonte para o seu tema. 
2. Abra a folha de estilo e adicione o seguinte código (neste caso, estamos usando a fonte Work Sans , mas você pode substituí-la por suas próprias fontes):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
peso da fonte: normal; ^{( font-weight: normal;)}
estilo da fonte: normal; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
peso da fonte: negrito; ^{( font-weight: bold;)}
estilo de fonte: normal; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
peso da fonte: normal; ^{( font-weight: normal;)}
estilo de fonte: normal; ^{( font-style: normal;)}
}

Nota^(Note) : Usar @fontface permite que você use negrito, itálico e outras variações de sua fonte, após o que você pode especificar o peso ou o estilo de cada fonte.

1. Em seguida, adicione estilo para seus elementos da seguinte maneira:

body {
font-family: 'Work Sans', Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
família de fontes: 'Cambria', Times New Roman, serifa; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Personalize sua tipografia do WordPress^{(Customize Your WordPress Typography)}

Alterar as fontes no WordPress é uma ótima ideia para melhorar a marca e a experiência do usuário. Não é uma tarefa simples, mas você terá mais controle sobre seu tema.

Você^(Were) conseguiu personalizar as fontes do seu site seguindo as etapas das dicas deste guia? Conte^(Tell) -nos nos comentários.

How to Change Fonts in WordPress

A great way tо add some branding and individualism to your WordPress site is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Como mover WordPress site de um host para outro

• Como instalar e WordPress configuração no Microsoft Azure

• Como correr blazingly rápido WordPress em Microsoft Azure

• Como configurar Privacy em WordPress e por que é importante

• Como instalar WordPress em Google Cloud Platform

• Como instalar um tema no WordPress

• Como configurar seu próprio site semelhante ao Twitter usando o tema P2 do WordPress

• Como fazer um WordPress Site Secure

• Mostre o trecho na página inicial de WordPress blog

• Como fazer a transição do editor clássico do WordPress para o Gutenberg

• O melhor formato de escrita de blog para obter seus pontos

• Como duplicar uma página no WordPress

• WordPress Jetpack: O que é e vale a pena instalar?

• Como remover todos os vestígios de um plugin WordPress

• Como realizar testes de divisão eficazes no WordPress

• Como construir um blog Wix tão bom quanto o WordPress

• Como fazer backup do seu site WordPress

• Como encontrar seu login de administrador do WordPress

• WordPress mostra HTTP Error ao enviar imagens

• Como adicionar uma barra lateral que flutua no Wordpress