Como adicionar fontes personalizadas no site WordPress [2022]

Você sabe qual é a parte central do seu web design? Adicionar uma fonte personalizada a um site WordPress é o passo final que você pode dar para manter os visitantes do seu site no seu site e melhorar a legibilidade do site. A fonte escolhida para o site representa a imagem da sua marca. Vamos mergulhar para aprender sobre fontes personalizadas com prós e contras.

Mesmo que você encontre fontes gratuitas online, você estará limitado a usá-las com base na compatibilidade do seu tema. É por isso que vamos explicar como adicionar fontes personalizadas no WordPress usando formas manuais e plugins do WordPress.

Por que usar fontes personalizadas e onde encontrá-las?

Como mencionado acima, você encontrará vários sites de onde pode baixar fontes facilmente. Por exemplo, o Font Squirrel vem com até três fontes gratuitas que você pode usar. O Google Fonts é outra opção incrível, onde você encontrará mais de 900 fontes para escolher. Além disso, o Edge Web Fonts também pode oferecer uma enorme variedade de fontes. Para uso pessoal, você pode optar por Fonts.com ou 1001 Free Fonts .

DaFont é a biblioteca de fontes mais antiga que possui mais de 60.000 tipos de letra a partir dos quais você pode filtrar as fontes desejadas. Você precisa baixar as fontes escolhidas e não são como a integração do Google Font. Um tipo semelhante de biblioteca de fontes é o UrbanFont com uma enorme variedade de fontes criativas e lucrativas.

Adobe Fonts ou Typekit é uma biblioteca de fontes muito útil para todos os web designers, pois possui mais de 1900 fontes disponíveis. Mesmo se você assinar a conta gratuita, ela ainda oferece mais de 200 fontes da web.

Se você deseja alugar fontes mensalmente e pagar uma taxa de assinatura, pode optar pelo Fontstand . Oferece cerca de 2000 fontes incríveis e cobra mensalmente. Assim como esta Type Network é outra biblioteca de fontes auto-hospedada onde você obterá mais de 400 famílias de fontes por vez e explorará com facilidade.

Como escolher a melhor fonte personalizada para um site?

Como você já conhece os recursos para encontrar as fontes personalizadas desejáveis ​​para o WordPress, você precisa saber escolher as melhores fontes agora. Filtrar fontes aleatórias tornará seu processo de seleção demorado e desajeitado. Em vez disso, você pode tentar as etapas a seguir ao escolher a melhor fonte personalizada para um site WordPress. Neste blog, exploraremos o Google Fonts para escolher as melhores fontes e ver as práticas recomendadas ao filtrar todas as fontes.

Fontes de lista curta que você gosta – Na fonte do Google, você pode pesquisar facilmente a fonte desejada na caixa de pesquisa e definir a categoria. O resultado da pesquisa será alterado de acordo com seu ajuste. Você pode ver as fontes em alfabetos, números numéricos e outros formatos.

Verifique os detalhes da fonte - Verificar os detalhes da fonte é importante porque você verá todos os estilos e tamanhos de fonte disponíveis de uma só vez. Uma vantagem incrível que você encontrará no Google Fonts é que ele exibe pares populares com essa fonte.

Ao verificar os detalhes da fonte, fique atento ao formato da fonte também. Porque nem todas as fontes suportam todos os sistemas de navegadores. Aqui está a lista mais recente de navegadores e a lista de formatos de fonte suportados.

Fonte – https://www.w3schools.com/Css/css3_fonts.asp

Enriqueça sua coleção de fontes - Quando terminar de filtrar as fontes corretas, você pode adicionar essas fontes à sua coleção apenas clicando no botão ' Selecionar esta fonte' .

Métodos fáceis para adicionar fonte personalizada ao site WordPress

Reunimos algumas das maneiras mais fáceis de adicionar fontes personalizadas ao seu site em um formato passo a passo. Vamos mergulhar e ver como fazê-lo.

Como adicionar manualmente uma fonte personalizada no WordPress

Adicionar fontes personalizadas manualmente é a maneira mais sábia de não deixar seu site lento. Como você já explorou alguns tamanhos de fonte para encontrar a fonte desejada, faça o download da fonte primeiro. Agora você precisa fazer o upload da fonte para sua conta de hospedagem do site. Confira qual tema você está usando para o seu site WordPress. Carregue o arquivo CSS de sua fonte para sua conta. Ao baixar a fonte, lembre-se de extrair os arquivos do arquivo .zip.

Para carregar seu arquivo de fonte, vá para o diretório wp-content/themes/your-theme/fonts. Você pode criar uma pasta de fontes separada para sua conveniência. Carregue o arquivo usando o Gerenciador de Arquivos para o hPanel. Agora navegue até sua conta do WordPress e clique na opção Aparência . Escolha o Editor de Temas onde será mostrado o arquivo style.css. Adicione o seguinte código na parte inferior do código.

@font-face {

família de fontes: Aguafina Script-Regular;

src: url ( http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf );

peso da fonte: normal;

}

Agora clique no botão 'Atualizar arquivo' para salvar as alterações. Lembre-se de que o código do tipo de fonte carrega a fonte sempre que um visitante chega ao seu site. O tipo de letra, no entanto, ainda não foi aplicado a nenhum elemento. Você deve alterar o mesmo arquivo style.css para atribuir uma fonte a um elemento específico. O código a seguir, por exemplo, faria o título do nosso site usar o script de fonte.

.site-title {

font-family: “Aguafina Script-Regular” , Arial, sans-serif;

}

Como definir fontes personalizadas usando plugins do WordPress

Para todos os usuários do WordPress, usar plugins de fonte é a maneira mais fácil de definir fontes personalizadas. Aqui apresentamos alguns dos plugins de fontes mais fáceis e úteis para adicionar fontes personalizadas no site WordPress.

WP Google Fonts

Você pode usar fontes personalizadas e aplicá-las a determinados elementos CSS usando o plug-in WP Google Fonts . Instale o plug-in WP Google Fonts do diretório de plug-ins do WordPress e use o painel do WordPress para acessar o Painel de controle de fontes do Google. Você pode escolher tipos de letra e ajustar opções como estilo de fonte, elementos alocados e muito mais.

Plug-in de fontes

Fonts Plugin é uma alternativa freemium ao Easy Google Fonts que funciona de maneira semelhante, permitindo que você integre facilmente o Google Fonts em suas páginas sem precisar alterar seu tema. Ele também funciona com o Personalizador, permitindo que você experimente opções de fontes alternativas antes de publicá-las. Fonts Plugin também possui integração com Adobe Fonts, o que é um bônus. Fonts Plugin permite que você use a biblioteca de fontes da Adobe em seu material também.

Crie um site atraente usando fontes personalizadas

A legibilidade e a elegância do seu texto afetam o quanto seus visitantes gostam de navegar em seu site. Qualquer pessoa pode agora escolher entre um grande número de fontes para usar em seu site. Não há razão para você usar qualquer fonte antiga em seu site hoje em dia. Personalizar sua tipografia do WordPress agora está completamente sob seu controle.

Se você achar este blog interessante e útil, assine nosso blog para ler mais blogs como este. Junte-se à nossa comunidade para compartilhar seus pensamentos também.