Como adicionar fontes personalizadas a um site WordPress

Gostaria de aprender como adicionar fontes personalizadas a um site WordPress?

Por que tornar seu blog chato usando fontes padrão? Deixe seu blog falar sobre sua personalidade vibrante e os tópicos que você aborda com uma ampla variedade de fontes personalizadas. As fontes personalizadas são um recurso interessante que faz com que seu blog pareça preferível a outros.

Vamos encarar; todos nós amamos blogs e sites com as fontes certas. Eles não apenas decoram o site, mas também ajudam a atrair o usuário para o seu conteúdo. No entanto, a escolha de fontes padrão do WordPress é limitada e depende do tema que você está usando. A boa notícia é que você pode adicioná-los manualmente ou com WordPress plugins especializado.

E aqui surgem duas questões: onde obter fontes personalizadas para WordPress e como instalar fontes personalizadas no seu site.

Vamos descobrir.

Por que devo usar fontes personalizadas?

Foi-se o tempo em que Times New Roman e Georgia eram considerados os únicos tipos de letra para texto em sites. Nos últimos anos, o espaço da fonte mudou completamente com o advento de fontes como Google Fonts e outros.

Hoje, existem centenas de fontes gratuitas, informações e auxílios de treinamento e recursos de design disponíveis na Internet. Ao contrário do Adobe Illustrator, Photoshop e outros aplicativos clássicos, o WordPress não oferece controle total sobre as fontes padrão. Apenas alguns temas do WordPress optam por oferecer suporte e usar fontes personalizadas.

Portanto, neste artigo, você aprenderá como encontrar fontes personalizadas adequadas e usá-las em seu site WordPress.

A importância de usar fontes personalizadas

Por que alterar fontes, recuo da palavra, espaçamento entre linhas, espaçamento entre letras ou saturação da fonte, você pergunta? No entanto, alguns estudos mostram que tipografia melhora a compreensão da leitura.

Muito depende da construção das fontes. Em um nível consciente e subconsciente – todos avaliam o conteúdo de uma página da web por design.

O design da fonte afeta os leitores, mesmo que eles não prestem atenção a isso. Desistir do design da fonte significa desistir do próprio desenvolvimento! O humor do leitor depende disso. A fonte facilita a leitura ou força os usuários a sair da página.

Todos os navegadores da Web incluem um conjunto de fontes padrão. Isso significa que se a fonte não for especificada no CSS da página, a versão padrão será usada. Você ainda pode usar as fontes padrão, mas elas tornam mais difícil para os usuários. É por isso que é essencial usar uma fonte personalizada. Se o seu tema do WordPress não oferece opções para alterar a fonte, existem muitos sites e ferramentas que podem ajudar.

Alternativas de fontes do Google

Muitos de vocês conhecem o Fontes do Google. Existem muitos outros sites onde você pode encontrar fontes bonitas. Alguns deles são gratuitos para uso pessoal. Se você precisar de uso comercial, precisará de uma licença. O Google Fonts e o Adobe Edge Fonts são gratuitos. É por isso que eles não são tão únicos.

Aqui estão alguns outros recursos para encontrar fontes para uso gratuito e comercial:

1. TemplateMonster — No site da TemplateMonster você encontra tudo o que precisa para web design. Existem também muitas fontes e pacotes de fontes para uso pessoal por um preço pequeno. Além disso, para ajudá-lo a escolher, todas as fontes apresentadas em brochuras ou molduras. Cada fonte também é apresentada com uma licença comercial.
2. MyFonts — MyFonts oferece atualmente a maior seleção de fontes do mundo. No entanto, os preços aqui também estão no segmento superior. Então, se você estiver com um orçamento apertado, isso pode não ser para você.
3. FonteSpring — Fontspring vende fontes inovadoras para uso comercial. Mas em quase todas as famílias, 1-2 fontes gratuitas podem ser usadas para fins pessoais. Além disso, há uma seção separada com fontes gratuitas. A coleção é vibrante. Mas você precisará estudar cuidadosamente as informações de licença para uma fonte específica antes de fazer o download.
4. Cufonfons — É também uma enorme coleção de fontes diferentes. Selecione qualquer um e você verá uma página com informações detalhadas sobre ele. Existem muitas fontes gratuitas e elas são divididas em seções individuais. O sistema de classificação do CufonFonts é bastante flexível e conveniente. Além disso, o suporte a Webfont está incluído.
5. Dafont — Outra coleção acessível de 3 fontes gratuitas. A maioria deles são projetados apenas para uso pessoal. Um recurso legal do DaFont é um sistema de categorias. Você pode selecionar fontes no estilo de quadrinhos, videogames, vintage etc….

A escolha das fontes é muito tentadora porque todas são lindas. Mas você não deve escolher muito. Não use mais de duas fontes em um site rede. Então oaparência do seu site será consistente. Depois de escolher suas fontes, certifique-se de enviar os arquivos para cada estilo que você usará (normal, negrito, itálico, etc.).

Agora que você selecionou a fonte apropriada para o seu site, vamos descobrir como adicioná-la.

Como adicionar fontes personalizadas ao WordPress

Existem várias maneiras de adicionar fontes a um site WordPress:

1. Plugins : neste caso, diferente WordPress plugins são usados ​​para facilitar o processo.
2. manualmente : usando este método, você precisa baixar a fonte do site e modificar o arquivo CSS.
3. Temas: muitos temas populares têm opções internas para personalizar suas fontes (observação – não abordaremos essa opção, pois o processo varia de acordo com o tema que você está usando.

Opção 1 – Alterar fontes do WordPress com plugins

Se não nos importamos com as mudanças globais, podemos instalar WordPress plugins o que mudará as fontes do seu site.

Recursos de plugins de fontes personalizadas

O software de código aberto tem uma vantagem para o interesse da comunidade, e o WordPress também tem essa vantagem. Vários plugins do WordPress permitem que você adicione fontes personalizadas. Como escolher um plugin apropriado quando há tantos? Quais são os recursos dos plugins WordPress de fonte personalizada?

Aqui estão alguns pontos a serem considerados:

• Capacidade de usar uma fonte personalizada
• Capacidade de usar várias fontes
• Cabeçalhos e componentes de destino
• Bônus: a capacidade de alterar as configurações de fonte do editor visual

Isso é tudo. A primeira característica da lista é muito importante. Você ainda pode baixar fontes de sites como DaFont, Font Squirrel, etc., mas precisa ser capaz de carregá-las no WordPress.

Vejamos alguns plugins para WordPress que permitem fazer upload de fontes personalizadas.

1. Melhor Fonte Incrível

Este plugin do WordPress permitirá que seus usuários combinem automaticamente a versão mais recente das fontes Better Font Awesome com o APF, códigos de acesso e muito mais. Além disso, este plugin do WordPress é atualizado automaticamente.

Você encontrará como funcionalidades: atualizações regulares, gerador de shortcodes, compatibilidade com outros plugins WordPress, etc ...

Descarregar | Demo | hospedagem na web

2. Fontes do Google para WordPress

Este plugin do WordPress consiste em fontes especiais 877, que permitem o uso de todas as fontes nos sites do WordPress. Graças à sua visualização em tempo real, ele permite que você veja a aparência do seu site depois que a fonte for aplicada. 

Além disso, você poderá salvá-lo e editá-lo no front-end quando encontrar a combinação que poderá desfrutar.

Suas características incluem: uma visualização em tempo real, um SEO bastante avançado, suporte multilíngue, suporte para mais fontes do Google 870 +, atualizações fáceis e muito mais.

Descarregar | Demo | hospedagem na web

3. Plugin de Fontes

Fonts Plugin é um plugin WordPress gratuito que permite aos usuários acessar as bibliotecas do Google Fonts e Adobe Fonts. Com este plug-in do WordPress, você pode escolher entre mais de 1000 fontes do Google e Adobe, usar várias fontes em seu site e testar diferentes opções com o recurso de visualização em tempo real do plug-in no personalizador do WordPress.

Para mais maneiras de personalizar a tipografia do seu site, como tamanho da fonte, espaçamento entre letras e altura da linha, você pode atualizar para a versão premium, Fontes Plugin Pro.Descarregar | Demo | hospedagem na web

4. Fontes do Google fáceis

O Easy Google Fonts é um dos melhores plugins WordPress para personalizar a tipografia do seu site. Assim como o Fonts Plugin, ele permite que você escolha entre centenas de Google Fonts e visualize-as no Personalizador antes de adicioná-las ao seu site.

Embora forneça acesso a um número menor de Google Fonts, é único, pois permite criar controles e regras de fonte personalizados na área de administração, que aparecerão imediatamente no personalizador do WordPress.

Descarregar | Demo | hospedagem na web

Opção 2 – Instalar manualmente as fontes personalizadas do WordPress

Usando a diretiva @font-face, você pode conectar uma ou mais fontes ao seu site. Mas este método tem seus prós e contras.

benefícios:

• Graças ao CSS, você pode conectar fontes de qualquer formato: ttf, otf, woff, svg.
• Os arquivos de fonte estarão localizados em seu servidor – você não dependerá de serviços de terceiros.

desvantagens :

• Para a conexão de fonte correta para cada estilo, você deve registrar um código separado.
• Sem saber CSS, você pode ficar facilmente confuso.

Mas não é um problema real se você puder basta copiar um código finalizado e onde você precisa especificar seus valores.

Observação : Antes de começar, certifique-se de criar um tema infantil para o seu site. Dessa forma, você pode fazer todas as alterações no seu tema filho, deixando o tema principal para poder atualizá-lo facilmente, se necessário no futuro.

Passo 1: Crie uma pasta “fontes”

No seu tema filho, crie uma nova pasta “fontes” em: wp-content/themes/your-child-theme/fonts

Etapa 2. Faça o upload dos arquivos de fonte baixados para o seu site

Isso pode ser feito através do seu painel de controle de hospedagem ou via FTP.

Adicione todos os arquivos de fonte à pasta de fontes recém-adicionada: wp-content/themes/ No seu tema filho, crie uma nova pasta “fontes” em: wp-content/themes/your-child-theme/fonts que você criou.

Etapa 3. Importar fontes por meio da folha de estilo do tema filho

Abra o arquivo style.css do seu tema filho e adicione o seguinte código no início do arquivo CSS (após o comentário do tema filho):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

onde MinhaWebFont é o nome da fonte e o valor da propriedade src (os dados entre parênteses entre aspas) é sua localização (links relativos). Precisamos especificar cada estilo separadamente.

Como conectamos o estilo normal primeiro, definimos as propriedades font-weight e font-style como normal.

Etapa 4. Ao adicionar itálico, escreva o seguinte:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Quando tudo é igual, somos os únicos a anexar a propriedade de estilo de fonte ao itálico.

Etapa 5. Para adicionar a fonte em negrito, adicione o seguinte código:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Onde definimos a propriedade font-weight como negrito.

Lembre-se de especificar a localização correta dos arquivos de fonte para cada estilo.

Etapa 6. Para conectar itálico em negrito, digite o seguinte:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Bem, é isso. Agora que você conectou quatro estilos de fonte ao seu site.

Mas há uma observação: essa conexão de fonte não será exibida corretamente no Internet Explorer 8. O consolo é que há muito poucas pessoas ainda usando o IE8.

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

• 10 plugins de acordeão do WordPress para um site
• Como adicionar várias colunas no WordPress
• Alguns plugins para integrar serviços do Google em seu blog
• Plugins do WordPress 5 para exibir notificações
• Usando diferentes origens WordPress

Conclusão

Qual é a primeira coisa que os usuários percebem quando visitam seu site? Isso mesmo, seu design! A maior parte do design depende do uso adequado de fontes bonitas. Então, você precisa cuidar do design da fonte do seu site. Adicione código ou use um dos plugins mencionados acima para incorporar um novo estilo de fonte. Como você escolhe é com você.

Certifique-se de não usar mais de duas fontes no mesmo site. Como quanto mais fontes personalizadas você adicionar ao site, mais a velocidade do site diminuirá.

É isso neste artigo que mostra como adicionar fontes personalizadas a um site WordPress. Convidamos você a experimentar. Se você tiver alguma dúvida ou sugestão, informe-nos dentro de Comentários.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

En attendant, compartilhe este artigo em suas diferentes redes sociais.   

...