Usar o Google Fonts no WordPress é fácil. Trata-se de um diretório gratuito com mais de 800 fontes da web que você pode usar em seu site. O serviço Google Fonts é um serviço gratuito de alta qualidade, usado por milhões de sites WordPress para melhorar a aparência e a usabilidade. Veja como usar o Google Fonts no WordPress sem comprometer o desempenho do site e melhorar sua no PageSpeed Insights .
Método 1: Hospede as fontes do Google no seu servidor WordPress
Passo 1: Escolha uma fonte do Google
Usar menos fontes do Google reduzirá as solicitações (menos fontes = menos solicitações).
Selecione as espessuras de fonte com cuidado – A quantidade de espessuras de fonte que você usa também afetará a velocidade de carregamento da sua página. Para garantir que o Google Fonts carregue apenas as espessuras necessárias, desmarque as outras opções para que somente as necessárias sejam carregadas.
Passo 2: Baixe a fonte
O segundo passo do processo é baixar a fonte. É importante notar que o Google baixará automaticamente todas as variações de peso da fonte, portanto, selecionar o peso não é necessário nesta etapa. A seleção do peso da fonte será necessária no terceiro passo.
Passo 3: Converter fontes em fontes da web
Clique no botão Adicionar Fontes no site, selecione apenas as fontes que você usará em seu site e faça o upload. Trata-se de um arquivo roboto-regular.ttf e um arquivo roboto-bold.ttf, portanto, ambas as espessuras estão incluídas. Como WOFF e WOFF2 são compatíveis com todos os principais navegadores, mantenha as configurações como estão. Clique no botão Converter para iniciar o processo de conversão.
Passo 4: Baixe os arquivos de fonte convertidos
Assim que as fontes forem convertidas, você poderá baixá-las. Como duas fontes foram baixadas para o nosso computador, teremos um total de 4 arquivos de fonte no arquivo zip (já que baixamos duas fontes, teremos quatro arquivos de fonte no arquivo zip).
Passo 5: Carregar arquivos de fonte para os arquivos do WordPress
Certifique-se de que os arquivos de fontes da web sejam enviados via FTP ou cPanel, idealmente para a pasta wp-content/uploads, para evitar que sejam sobrescritos por atualizações do tema e do núcleo do WordPress. Nós enviamos as fontes para uma pasta chamada "fonts" (para que ficassem separadas de outros arquivos). Você poderá baixar as fontes depois de abrir os links no seu navegador, confirmando assim que o envio foi realizado com sucesso.
Passo 6: Adicionar fonte personalizada ao CSS
Após baixar o arquivo zip, adicionaremos o arquivo CSS stylesheet.css à pasta. O código CSS abaixo conecta suas fontes ao seu CSS existente e as torna disponíveis.
Você pode inserir o código CSS no arquivo functions.php ou no seu arquivo style.css. Um arquivo CSS externo ou a função wp_enqueue_style do WordPress podem ser usados no código CSS. No arquivo style.css padrão do tema, vamos colar o código. Substitua quaisquer URLs relativas por URLs absolutas copiando e colando o código na folha de estilo.
URLs padrão do tema no arquivo stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Alterar para:
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
Para usar facilmente a fonte no HTML atual, crie uma classe personalizada. Classes CSS: roboto_font e roboto_bold_font.
.roboto_font {
família de fontes: “Roboto”, “Arial”, sem serifa; }
.roboto_bold_font {
família de fontes: “Roboto”, “Arial”, sem serifa;
peso da fonte: negrito;
}
Passo 7: Defina a fonte padrão
Para definir essa fonte como a fonte padrão do seu site, você precisa incluir o código CSS no seu arquivo style.css.
Você pode precisar depurar ou editar a fonte para substituir as propriedades existentes da família de fontes.
O próximo passo é fazer o upload do arquivo stylesheet.css que você obteve para a pasta com o mesmo nome e adicionar o CSS. O código CSS abaixo fará com que suas fontes funcionem com o CSS existente e estejam prontas para uso assim que você o inserir. Você pode usar uma folha de estilo externa ou a função wp_enqueue_style do WordPress para adicionar folhas de estilo à fila.
Método 2: Pré-carregar fontes da Web – Otimização da parte superior da página
Se você estiver usando o Google Fonts, talvez precise consultar a folha de estilo preparada pelo Google e enviada para o seu site WordPress a partir dos servidores do Google. Ao usar as ferramentas de desenvolvedor do Google Chrome para inspecionar seu site, você poderá ter uma ideia do processo em segundo plano. É possível que você encontre duas entradas para o Google Fonts no arquivo Source.
Veja a imagem que está anexada aqui.
Ao clicar no fonts.googleapis , você verá que a folha de estilo para a qual você gerou a URL é exibida na página aberta. Além disso, uma chamada é feita para o arquivo de fonte específico para cada declaração font-face.
Isso indica que o usuário precisa acessar fonts.gstatic.com para obter a espessura de fonte necessária caso esteja utilizando uma espessura diferente. Essa etapa pode aumentar o tempo de carregamento da sua página WordPress.
Portanto, acesse o arquivo functions.php do seu tema atual e insira o seguinte código PHP dentro da função responsável pelo gerenciamento de fontes.
função twentyeleven_resource_hints( $urls, $relation_type ) {
se ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
'origem cruzada'
);
}
retornar $urls;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Método 3: Otimizar fontes do Google no WordPress usando um plugin
Assim como acontece com a maioria das tarefas relacionadas ao WordPress, os plugins simplificam bastante a otimização de fontes do Google. Além disso, eles cuidam da parte técnica, dispensando a preocupação com a localização do código no sistema.
Se você tiver o Google Fonts instalado em seu site WordPress e executar um teste de desempenho usando o PageSpeed Insights ou o GTmettrix, você receberá a seguinte mensagem de erro: fonts.googleapis.com.
Isso ocorre porque o Google Fonts não é compatível com a plataforma WordPress. Isso indica que seu site WordPress precisa ter suas fontes do Google otimizadas.
Um plugin gratuito pode ser usado para corrigir isso. É o OMGF | Hospedar Fontes do Google Localmente.
Após a conclusão da instalação, o plugin começará imediatamente a substituir o método `wp en queue script()` do WordPress que utiliza o Google Fonts pela função `wp head()`. Este plugin faz tudo sozinho.
Encontre mais artigos como este na Seahawk Media.
