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 abordados por uma ampla variedade de fontes personalizadas. Fontes personalizadas são um recurso interessante que permite que seu blog pareça preferível a outros.


Vamos encarar; todos gostamos de 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 das 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 no seu site WordPress.

Vamos descobrir.

 Por que devo usar fontes personalizadas?

Os dias se passaram quando Times New Roman e Georgia eram consideradas as únicas fontes de textos em sites. Nos últimos anos, o espaço da fonte mudou completamente com o advento de fontes como o Google Fonts e outros.

Hoje, existem centenas de fontes gratuitas, informações e material didático e recursos projetados para o 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, recuar entre palavras, espaçamento entre linhas, espaçamento entre letras ou saturação de fonte, você pergunta? Seja como for, alguns estudos provam 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 nele. 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

Onde encontrar fontes personalizadas

Muitos de vocês conhecem fontes gratuitas do Google. Existem muitos outros sites onde você pode encontrar fontes bonitas. Alguns deles são gratuitos para uso pessoal. Se você precisar para uso comercial, precisará de uma licença. As fontes do Google e as fontes do Adobe Edge são gratuitas. É 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 da TemplateMonster, você encontrará 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, eles são apresentados no ONE kit de desenvolvimento da web. A coleção é enorme e criativa. Para ajudá-lo a escolher, todas as fontes apresentadas em folhetos ou molduras. Cada fonte também recebe uma licença comercial.
  2. MyFonts – Atualmente, o MyFonts oferece a maior seleção de fontes do mundo. No entanto, os preços aqui também estão no segmento mais alto. 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, há 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 é vibran. Mas você terá que estudar cuidadosamente as informações da licença de 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. Existem muitas fontes gratuitas e elas são divididas em seções individuais. O sistema de classificação no CufonFonts é bastante flexível e conveniente. Além disso, o suporte Webfont está incluído.
  5. Dafont – Outra coleção acessível de 3.500 fontes grátis. A maioria deles é projetada apenas para uso pessoal. Um recurso interessante O DaFont é um sistema de categorias. Você pode selecionar fontes no estilo de quadrinhos, videogames, vintage ou estilizados como caracteres japoneses.

A escolha das fontes é muito tentadora, porque todas são lindas. Mas você não deve escolher muito. Usar não mais que duas fontes no site. Em seguida, a aparência do site será consistente. Depois de escolher suas fontes, faça o download dos 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 esse método, você precisa fazer o upload da fonte baixada para o site e editar o arquivo CSS.
  3. Temas: muitos temas populares incluem opções integradas para personalizar suas fontes (observe – não abordaremos essa opção, pois o processo varia com base no tema que você está usando, mas temas premium de qualidade como o tema Total WordPress oferecerão online documentos que você pode seguir com facilidade – como este guia para adicionar fontes personalizadas ao Total)

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

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

Características dos plug-ins 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 personalizados?

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 fazer o upload para o WordPress.

Vamos ver alguns plug-ins para WordPress que permitem o upload de fontes personalizadas.

Carregador de fontes personalizado

Carregador de fontes personalizado

Este plugin permite que você baixe fontes do Google e as aplique a vários elementos do seu blog. Por exemplo, para os títulos ou o corpo do artigo ou da página.

Use Qualquer Fonte

Use Qualquer Fonte

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 plug-in oferece vários recursos, o que torna o processo de adicionar fontes personalizadas muito mais gerenciáveis.

WP Fontes do Google

WP Fontes do Google

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 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 considerar, por exemplo, o WP Google Fonts. Basta instalar este plugin no repositório oficial do WordPress e abrir a seção Fontes do Google.

WP Fontes do Google

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

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

Através da diretiva @ font-face, você pode conectar uma ou várias fontes ao seu site. Mas esse 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 no seu servidor – você não dependerá de serviços de terceiros.

Contras:

  • Para a conexão correta da fonte para cada estilo, é necessário registrar um código separado.
  • Sem conhecer CSS, você pode se confundir facilmente.

Mas não é um problema real se você puder basta 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.

Etapa 1: Crie uma pasta “fontes”

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

Etapa 2. Carregue os arquivos de fonte baixados no 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 / seu-filho-tema / fontes você criou.

Etapa 3. Importar fontes através da folha de estilo do tema filho

Abra o arquivo style.css do 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') formato ('incorporado-opentype'),
formato url ('fonts / WebFont.woff') ('woff'),
formato url ('fonts / WebFont.ttf') ('truetype'),
formato url ('fonts / WebFont.svg # svgwebfont') ('svg');
peso da fonte: normal;
estilo de fonte: normal;
}

Onde MyWebFont é 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.

Desde que conectamos o estilo normal pela primeira vez, definimos as propriedades de peso e estilo da fonte como normais.

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

@Tipo de letra{
família de fontes: 'MyWebFont';
src: url ('fontes / WebFont-Italic.eot');
formato src: url ('fonts / WebFont-Italic.eot? #iefix') ('incorporado-opentype'),
formato url ('fonts / WebFont-Italic.woff') ('woff'),
formato url ('fonts / WebFont-Italic.ttf') ('truetype'),
formato url ('fonts / WebFont-Italic.svg # svgwebfont') ('svg');
peso da fonte: normal;
estilo da fonte: itálico;
}

Onde tudo é o mesmo, apenas anexamos a propriedade de estilo de fonte em 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 ('fontes / WebFont-Bold.eot');
formato src: url ('fonts / WebFont-Bold.eot? #iefix') ('incorporado-opentype'),
formato url ('fonts / WebFont-Bold.woff') ('woff'),
formato url ('fonts / WebFont-Bold.ttf') ('truetype'),
formato url ('fonts / WebFont-Bold.svg # svgwebfont') ('svg');
intensidade da fonte: Negrito;
estilo de fonte: normal;
}

Onde definimos a propriedade font-weight para negrito.

Lembre-se de indicar o local correto 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 ('fontes / WebFont-Italic-Bold.eot');
formato src: url ('fonts / WebFont-Italic-Bold.eot? #iefix') ('incorporado-opentype'),
formato url ('fonts / WebFont-Italic-Bold.woff') ('woff'),
formato url ('fonts / WebFont-Italic-Bold.ttf') ('truetype'),
formato url ('fonts / WebFont-Italic-Bold.svg # svgwebfont') ('svg');
intensidade da fonte: Negrito;
estilo da 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 existem muito poucas pessoas ainda usando o IE8.

Agrupando 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 plug-ins mencionados acima para incorporar um novo estilo de fonte. O caminho que você escolher depende de você.

Verifique se você não está usando mais de duas fontes no mesmo site. Como as fontes mais personalizadas adicionadas ao site, menor a velocidade do site se torna.

É tudo, fique à 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 a fonte.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me