Como adicionar uma fonte offline ao seu site WordPress

Se você deseja adicionar alguma personalidade extra ao seu site WordPress, considere carregar uma fonte offline. Embora existam muitas maneiras de fazer isso, mostraremos um dos métodos mais fáceis usando o Font Squirrel Webfont Generator. Depois de baixar os arquivos de fonte , você pode enviá-los para o seu site WordPress e usá-los como qualquer outra fonte. Vamos começar!

Este artigo estava na minha mesa há algum tempo, e eu queria compartilhá-lo com você. As fontes do Google são totalmente carregadas localmente. Eu tenho usado as fontes do Google Oswald e Lato do Crunchify.com até agora. Basta abrir a URL na imagem acima que aparece na nova aba e você notará que ela gerou 14 novas fontes . Este tutorial também ajudará se você tiver alguma das seguintes perguntas. Depois de extrair o arquivo Lato.zip, você poderá ver todas as dez fontes do Lato com extensão .ttf. Na maioria dos sites, você só precisa de fontes regulares, negrito e itálico.

Na Etapa 2, você deve agora converter suas fontes para os formatos woff2, eot,svg, ttf e wof. Um arquivo pode ser carregado no site https://Font-Converter.net/en que converterá a fonte para esses formatos. Nada mais precisa ser dito. Agora você pode carregar fontes do seu sistema de arquivos local.

Como faço para adicionar fontes personalizadas ao tema WordPress?

Existem algumas maneiras diferentes de adicionar fontes personalizadas ao seu tema WordPress. Uma maneira é usar a biblioteca do Google Fonts. Você pode encontrar uma lista abrangente de todas as fontes disponíveis no site do Google Fonts. Depois de encontrar uma fonte que você gosta, você pode adicionar o código à folha de estilo do seu tema (style.css). Por exemplo, se você quiser usar a fonte “Open Sans”, adicione o seguinte código à sua folha de estilo: body { font-family: 'Open Sans', sans-serif; } Outra maneira de adicionar fontes personalizadas ao seu tema WordPress é usar um plugin como o Easy Google Fonts . Este plugin facilita a adição de fontes personalizadas ao seu tema sem ter que editar nenhum código.

O plug-in Easy Google Fonts pode ser usado para adicionar fontes personalizadas ao seu site WordPress. Ao usar esse método, você poderá chamar a atenção para o seu site usando uma ampla variedade de fontes. A tipografia tem demonstrado ter uma série de benefícios na pesquisa. Um site simples torna mais fácil para os clientes se comunicarem com você. Ao usar as propriedades CSS, você pode alterar o estilo e o posicionamento de sua fonte preferida, além de alterar seu estilo e posicionamento. Além de seus próprios controles de fonte, você pode usar a página de configurações do plugin WordPress para adicioná-los. Se você não quiser usar um plug-in, poderá usar este em vez das fontes da Adobe.

Instale o plug-in Custom Adobe Fonts para simplificar a incorporação dessas fontes em seu site WordPress. Instale o plug-in e navegue até a vasta biblioteca de fontes da Adobe para encontrar uma fonte que funcione para você (você deve se registrar para usá-la). Depois de escolher uma fonte, clique nela e procure no canto superior direito da página por 'Adicionar ao projeto da web'. Usando o Font Pair, você pode ver como são suas combinações de fontes e pode misturar e combinar fontes com base no que vê. Existem vários sites excelentes que vendem fontes personalizadas que foram criadas pelo próprio designer. Uma grande biblioteca de fontes está incluída na fonte Squirrel e também é simples de implementar. Você pode usar o kit de fontes da web do @Font-Face.

Seu site WordPress agora deve estar pronto para uso. O kit inclui o arquivo de fontes, bem como uma folha de estilo que contém o código necessário para criar sua própria folha de estilo CSS. Por exemplo, precisaríamos usar o seguinte CSS para a fonte OpenSans-ExtraBold- web . A melhor solução é salvar todos os arquivos de fonte em um local de sua escolha.

Como carregar fontes do Google no WordPress

Navegue até o painel de administração do WordPress e selecione Adicionar novo. Baixe e instale o Easy Google Fonts da Google Play Store. Após instalar o plugin, você deve clicar no botão Ativar para começar a usá-lo.

Em seu site ou produtos digitais, você pode usar o Google Fonts para experimentar mais de 1.000 famílias de fontes diferentes. Se você deseja adicionar manualmente as fontes do Google ao seu site WordPress, existem várias opções. Eles são gratuitos e de código aberto, portanto, podem ser usados ​​por qualquer desenvolvedor. A maneira mais conveniente de integrar as fontes do Google é incluir um snippet com o URL da família de fontes específica em seu arquivo functions.php. Se você achar o processo manual difícil, você pode usar um plugin. Você pode primeiro instalar o plug-in visitando o repositório de plug-ins do WordPress. Agora deve ser instalado e ativado.

A maioria dos temas do WordPress inclui a integração de fontes do Google como parte de suas configurações padrão. Os plugins que compõem a plataforma OMGF permitem que você navegue em mais de 600 fontes em seu site. No menu suspenso 'Família de fontes', você pode selecionar entre mais de 100 tipos diferentes para várias seções do seu site. Existem várias opções para adicionar controles de fonte personalizados , conforme mostrado na visualização do personalizador.

Devo carregar fontes do Google localmente WordPress?

Se o seu site WordPress tiver erros do Google Font, você deve carregar as fontes do Google localmente para resolvê-los. Existem alguns recursos e scripts externos que você não pode controlar, o que impossibilita compactar, minimizar ou otimizá-los. A velocidade do seu WordPress será severamente prejudicada se você não tomar essas precauções.

Wp-content/themes/your-theme/fonts

A pasta wp-content/themes/your-theme/fonts é onde você pode armazenar quaisquer fontes personalizadas que deseja usar com seu tema. As fontes podem ser adicionadas a esta pasta via FTP ou usando um plug-in de gerenciador de arquivos. Uma vez que as fontes são adicionadas a esta pasta, elas podem ser usadas no CSS do seu tema referenciando o nome da fonte.

Os Estilos Globais podem ser usados ​​para alterar a fonte do seu site se ele usar um dos seguintes temas. Nesse caso, as fontes base e títulos estão no mesmo par de fontes. Para salvar os novos pares de fontes, clique no botão Publicar no menu Estilos globais ou clique em Redefinir para reverter as alterações. Depois de escolher as fontes personalizadas apropriadas, você pode alterá-las com a frequência que desejar. Se você quiser alterar o tamanho do título ou das fontes básicas, poderá fazê-lo selecionando a opção de tamanho abaixo e à direita de cada fonte e, em seguida, selecionando um tamanho no menu suspenso. Com CSS personalizado, você pode alterar o tamanho da fonte padrão global. Certifique-se de desativar ou excluir um plug-in se decidir parar de usá-lo após testá-lo. Não é possível vincular uma conta Typekit.com a um blog ou site do WordPress.com. Se você quiser testar a compatibilidade de uma fonte específica com um determinado idioma, use o Personalizador.

Adicionar fontes ao WordPress sem plug-in

Existem algumas maneiras de adicionar fontes ao WordPress sem um plugin. Uma maneira é usar a biblioteca do Google Fonts. Basta acessar o site do Google Fonts, selecionar a fonte que deseja usar e copiar o código fornecido. Em seguida, abra seu painel do WordPress e vá para Aparência > Personalizar. Em seguida, clique na guia “CSS adicional” e cole o código que você copiou do Google Fonts. Salve suas alterações e a nova fonte será aplicada ao seu site.

Os temas não precisam incluir fontes da Web em suas configurações padrão. Ao navegar em uma página da web, você poderá baixá-la usando seu navegador. Para copiar e colar o código das fontes em seu arquivo de tema, basta escolher a fonte desejada. Você pode usar várias fontes ao mesmo tempo e verá quanto tempo as fontes carregam. Adicione mais CSS ao seu blog WordPress acessando o painel do blog WordPress. Copie todo o código da caixa cinza 1 na fonte da web do corpo do texto. A nova família de fontes da Web pode ser encontrada na segunda caixa cinza da biblioteca de fontes do Google . Além disso, o código a seguir pode ser usado para ajustar o tamanho e o peso da fonte.