É fácil usar as fontes do Google no WordPress. É um diretório gratuito de mais de 800 fontes da web que você pode usar no seu site. O Serviço do Google Fonts é um serviço gratuito com melhor classificação usado por milhões de sites do WordPress para aprimorar a aparência e a usabilidade do site. Veja como usar as fontes do Google no WordPress sem comprometer o desempenho do site e melhorar suas no PageSpeed .
Método 1: hospedar fontes do Google em seu servidor WordPress
Etapa 1: Escolha uma fonte do Google
O uso de menos fontes do Google reduzirá as solicitações (menos fontes = menos solicitações).
Selecione os pesos da fonte com cuidado - o número de pesos da fonte que você usa também afetará a velocidade com que sua página é carregada. Para garantir que as fontes do Google carreguem apenas os pesos necessários, desmarque os outros para que apenas as consequências necessárias sejam embaladas.
Etapa 2: Baixe a fonte
Download da fonte é a segunda etapa do processo. É importante observar que o Google baixará automaticamente todos os pesos da fonte, portanto, a seleção de pesos de fonte não é necessária nesta fase. Em vez disso, é necessária a seleção dos pesos da fonte para a etapa três.
Etapa 3: converter fontes em fontes da web
Clique no botão Adicionar fontes no site, selecione apenas fontes que você usará no seu site e envie -as. É um arquivo roboto-regus.ttf e um arquivo roboto-bold.ttf, para que ambos os pesos sejam incluídos. À medida que Woff e Woff2 cobrem todos os navegadores significativos, deixe as configurações como estão. Clique no botão Converter para iniciar o processo de conversão.
Etapa 4: Download de arquivos de fonte convertidos
Assim que as fontes forem convertidas, você pode baixá -las. Como duas fontes foram baixadas em nosso computador, teremos um total de 4 arquivos de fonte no arquivo zip (desde que baixamos duas fontes, teremos quatro arquivos de fonte no arquivo zip).
Etapa 5: Faça o upload de arquivos de fonte para arquivos do WordPress
Verifique se os arquivos de fonte da Web são enviados via FTP ou CPALEL , idealmente na pasta WP-Content/Uploads, para evitar ser substituído por tema e atualizações principais. Carregamos as fontes para uma pasta "fontes" (para que elas fossem separadas de outros arquivos). Você poderá fazer o download das fontes depois de abrir os links do seu navegador, para que você possa confirmar que eles foram enviados com sucesso.
Etapa 6: adicione fonte personalizada ao CSS
Depois de baixar o arquivo zip, adicionaremos o STILESHEET.CSS CSS no arquivo. O código CSS abaixo conecta suas fontes ao seu CSS existente e as disponibiliza.
Você pode colocar o código CSS em funções.php ou iniciar seu arquivo style.css. Um arquivo CSS externo ou a função WordPress 'wp_enqueue_style podem ser usados no código CSS. No arquivo padrão do estilo.css do tema, vamos colá -lo. Substitua quaisquer URLs relativos por URLs absolutos copiando/colando o código na folha de estilo.
URLs padrão do tema no Stylesheet.css:
src: url ('roboto-bold.woff2') formato ('woff2'),
URL ('ROBOTO-BOLD.WOFF') formato ('woff');
Mudar para:
src: url ('https://demo.com/wp-content/uploads/fonts/roboto-regular.woff2') formato ('woff2'),
url ('https://demo.com/wp-content/uploads/fonts/roboto-regular.woff') formato ('woff');
Para usar a fonte facilmente no HTML atual, crie uma classe personalizada. CLASSES CSS ROBOTO_FONT e ROBOTO_BOLD_FONT .
.roboto_font {
Fonte-família: "Roboto", "Arial", Sans-Serif; }
.roboto_bold_font {
Fonte-família: "Roboto", "Arial", Sans-Serif;
Peso da fonte: negrito;
}
Etapa 7: defina a fonte padrão
Para tornar essa fonte a fonte padrão no seu site, você deve incluir o código CSS no seu arquivo style.css.
Você pode ter que depurar ou editar a fonte para substituir as propriedades existentes da família.
A próxima etapa é fazer o upload do arquivo Stylesheet.css que você obteve dentro do seu arquivo chamado Stylesheet.css e adicionar o CSS. O código CSS abaixo fará com que suas fontes funcionem com o CSS existente e estejam prontas para serem usadas assim que você o inserir. Você pode usar uma folha de estilo externa ou a função WordPress wp_enqueue_style para inocar folhas de estilo.
Método 2: Pré -carga Fontes da Web - acima da otimização de dobras
Se você estiver usando fontes do Google, pode ser necessário consultar a folha de estilo que foi preparada pelo Google e enviada ao seu site WordPress a partir dos servidores do Google. Quando você usa a ferramenta de desenvolvedor oferecida pelo Google Chrome para inspecionar seu site, você pode vislumbrar o processo nos bastidores. Existe a possibilidade de você ver duas entradas para as fontes do Google Inside Source.
Por favor, veja a imagem que foi anexada aqui.
Ao clicar no Fonts.GOOGLEAPIS , você aprenderá que a fábrica de estilo para a qual você produziu o URL é mostrada na página aberta. Além disso, é feita uma chamada para o arquivo de fonte específico para cada declaração de fontes.
Isso indica que o usuário deve visitar fonts.gstatic.com para obter o peso necessário para a fonte se um peso de fonte diferente for usado. Esta etapa pode aumentar o tempo de carregamento da sua página do 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 das fontes.
function twentyeleven_resource_hints($urls, $relation_type) {
if (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', 'vinte e onze_resource_hints', 10, 2);
Método 3: Otimize o Google Fontes WordPress usando o plug -in
Os plug-ins, como é o caso da maioria das tarefas relacionadas ao WordPress, tornam muito mais simples otimizar o Google Fonts. Além disso, eles cuidarão do aspecto do software para você, para que você não precise se preocupar com onde o código deve ficar no sistema.
Se você tiver o Google Fonts instalado em seu site WordPress e executar um teste de desempenho usando PageSpeed Insights ou GTmettrix, receberá a seguinte mensagem de erro: fonts.googleapis.com.
Isso ocorre porque o Google Fonts não é compatível com a plataforma WordPress. Indica que seu site WordPress precisa ter o Google Fonts otimizado.
Um plugin gratuito pode ser utilizado para a fixação do mesmo. É – OMGF | Hospede fontes do Google localmente
Depois de concluir a instalação, o plug-in começará imediatamente a mudar o método WordPress wp en queue script() Google Fonts para a função wp head(). Este plugin faz tudo sozinho.
Encontre mais artigos desse tipo em Seahawk Media .
