Como adicionar fontes personalizadas ao seu 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. Fontes personalizadas são um bom recurso que permite 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 plugins especializados.

E aqui surgem duas perguntas – onde obter fontes personalizadas para WordPress e como instalar fontes personalizadas em seu site WordPress.

Vamos descobrir.

 Por que devo usar fontes personalizadas?

Já se foram os dias em que Times New Roman e Georgia eram considerados as únicas fontes para textos em sites. Nos últimos anos, o espaço da fonte mudou completamente com o advento de fontes como Google Fonts e outras.

Hoje, existem centenas de fontes gratuitas, informações e auxílios de treinamento e recursos projetados para 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 por padrão. Apenas alguns temas optam por oferecer suporte e usar fontes personalizadas.

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

A importância de usar fontes personalizadas

Por que alterar fontes, recuo entre palavras, espaçamento entre linhas, espaçamento entre letras ou saturação de fonte, você pergunta? Seja como for, alguns estudos comprovam que a 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 . Abandonar o design da fonte significa abandonar o próprio desenvolvimento! O humor do leitor depende disso. A fonte facilita a leitura ou força os usuários a deixar a 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ê sempre pode usar as fontes padrão, mas elas complicam o trabalho dos usuários. É por isso que é essencial usar uma fonte personalizada. Se o seu tema não oferece opções para alterar a fonte, muitos sites e ferramentas podem ajudar.

Alternativas de fontes do Google

Muitos de vocês conhecem as fontes gratuitas do Google . Existem muitos outros sites onde você pode encontrar fontes bonitas. Alguns deles são gratuitos para uso pessoal. Se você precisa para uso comercial, então você precisa 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. E isso não nos convém.

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

1. TemplateMonster — No site do mercado TemplateMonster, você encontrará tudo para Web Design que você precisa. Existem também muitas fontes e pacotes de fontes para uso pessoal por um preço pequeno. Além disso, eles são apresentados em UM kit de desenvolvimento web . A coleção é enorme e criativa. Para ajudá-lo a escolher, todas as fontes apresentadas em brochuras ou molduras. Cada fonte é apresentada com uma licença comercial também.
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ê tem um orçamento apertado, pode não ser para você.
3. FontSpring — Fontspring vende fontes sofisticadas para uso comercial. Mas em quase todas as famílias 1-2 fontes gratuitas que podem ser usadas para fins pessoais. Além disso, há uma seção separada com fontes gratuitas. A coleção é vibrante. Mas você terá que estudar cuidadosamente as informações de licença para uma fonte específica antes de fazer o download.
4. Cufonfonts — É também uma extensa 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.500 fontes gratuitas. A maioria deles são projetados apenas para uso pessoal. Um bom recurso do DaFont é um sistema de categorias. Você pode selecionar fontes no estilo de quadrinhos, videogames, vintage ou estilizadas como caracteres japoneses.

A escolha das fontes é muito tentadora porque todas são lindas. Mas você não deve escolher muito. Use no máximo duas fontes no site . Então a aparência do seu site será consistente. Depois de escolher suas fontes, certifique-se de baixar os arquivos para cada estilo que você usará (normal, negrito, itálico, etc).

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

Como adicionar fontes personalizadas ao WordPress

Existem algumas maneiras de adicionar fontes a um site WordPress:

1. Plugins : neste caso, diferentes plugins do WordPress são usados para facilitar o processo.
2. Manualmente : usando este método, você precisa de um upload de fonte baixado para o site e editar o arquivo CSS.
3. Temas : muitos temas populares incluem 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, mas temas premium de qualidade, como o tema Total WordPress , oferecerão documentos on-line que você pode seguir facilmente – como este guia para adicionar fontes personalizadas ao Total )

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

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

Características dos 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 adicionar fontes personalizadas. Como escolher um plugin adequado com tantos? Quais são os recursos dos plugins de fontes personalizadas?

Aqui estão alguns pontos a serem levados em consideração:

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

Isso é tudo. O primeiro recurso da lista é muito importante. Você sempre 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.

Carregador de fontes personalizadas

INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO

Este plugin permite baixar fontes do Google e aplicá-las a vários elementos do seu blog. Por exemplo, para os títulos ou corpo do artigo ou página.

Use qualquer fonte

INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO

Este é um plugin do WordPress que oferece uma interface conveniente para baixar fontes e usá-las diretamente através do editor visual. O editor visual do WordPress pode alterar automaticamente a fonte de qualquer texto. Este plugin oferece vários recursos, o que torna o processo de adição de fontes personalizadas muito mais gerenciável.

WP Google Fonts

INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO

O WP Google Fonts permite que você use o catálogo de fontes do Google. Um dos benefícios surpreendentes deste plugin é a adição de cerca de 1000 fontes do Google. Embora você possa enfileirar as fontes do Google manualmente , é muito mais fácil usar um plug-in para a maioria dos usuários.

Como instalar fontes com um plugin?

Vamos pegar, por exemplo, WP Google Fonts. Basta instalar este plugin do repositório oficial do WordPress e abrir a seção Google Fonts.

Você verá um painel de controle de fontes do Google aqui. Escolha as fontes e altere várias configurações, como o estilo da fonte, os elementos aos quais ela é aplicada, etc.

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

Por meio da diretiva @font-face, você pode conectar uma ou várias fontes ao seu site. Mas este método tem seus prós e contras.

Prós :

• Através do 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.

Contras :

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

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

Nota : Antes de começar, certifique-se de criar um tema filho para o seu site. Dessa forma, você pode fazer todas as edições no seu tema filho, deixando seu tema principal intacto para que você possa atualizá-lo facilmente conforme necessário no futuro.

Passo 1: Crie uma pasta “fontes”

Dentro do 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 painel de controle da sua hospedagem ou via FTP.

Adicione todos os arquivos de fonte à pasta de fontes recém-adicionada: 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 ao início do arquivo CSS (após o comentário do tema filho):

@Tipo de letra{

família de fontes: ‘MyWebFont’;

src: url(‘fontes/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’);

peso da fonte: normal;

estilo de fonte: normal;

}

Onde MyWebFon t é o nome da fonte e o valor da propriedade src (os dados entre colchetes entre aspas) é sua localização (links relativos). Precisamos especificar cada estilo separadamente.

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

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

@Tipo de letra{

família de fontes: ‘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’);

peso da fonte: normal;

estilo de fonte: itálico;

}

Onde tudo é igual, apenas anexamos a propriedade font-style ao itálico.

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

@Tipo de letra{

família de fontes: ‘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’);

intensidade da fonte: Negrito;

estilo de fonte: normal;

}

Onde definimos a propriedade font-weight como negrito.

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

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

@Tipo de letra{

família de fontes: ‘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’);

intensidade da fonte: Negrito;

estilo de fonte: itálico;

}

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

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

Finalizando fontes personalizadas para WordPress

Qual é a primeira coisa que os usuários percebem quando visitam seu site? Certo, seu design! A maior parte do design depende do uso adequado de fontes bonitas. Então você tem que 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. Qual caminho você escolhe é com você.

Verifique se você não está usando mais de duas fontes no mesmo site. Uma vez que quanto mais fontes personalizadas você adicionar ao site, mais lenta será a velocidade do site.

Isso é tudo, sinta-se à vontade para comentar. 

Também ficaremos felizes em saber qual opção você escolhe para adicionar uma fonte personalizada ao seu site e onde você encontra sua fonte.