Ir para o conteúdo principal

Como adicionar fontes personalizadas sobre WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Gostaria de adicionar fontes personalizadas ao WordPress?

Acredite em mim, a polícia também um papel muito importante no seu blog e você ganhará muito adicionando uma fonte adaptada não apenas ao contexto do seu blog, mas também ao seu tema WordPress.

Neste tutorial, mostrarei como adicionar fontes personalizadas ao seu blog do WordPress usando Google Fonts, Typekit e CSS3.

O uso de fontes personalizadas em temas do WordPress tornou-se comum. Na verdade, existem vários temas WordPress que oferecem várias fontes para escolher. No entanto, carregar todas essas fontes ao mesmo tempo pode diminuir significativamente o carregamento de uma página.

E se o seu blog é lento, eu sugiro que você Algumas soluções para problemas de desempenho no WordPress

Essa é uma das razões pelas quais faremos isso corretamente, carregando apenas a fonte personalizada que queremos usar no blog.

Mas acima de tudo, é importante saber como pesquisar fontes consultando 7 WordPress plugins para ter em mãos a tipografia do seu blog

Como encontrar fontes e como usar WordPress

As fontes não são tão extensíveis quanto antes. Existem, no entanto, várias fontes onde fontes como " Google Fonts "" Typekit "" FontSquirrel "E" Fonts.com ".

Como adicionar um Google Fonts Font WordPress

O Google Fonts é uma biblioteca muito grande de fontes gratuitas que você pode usar em vários projetos.
Tudo que você precisa fazer é acessar « Google Fonts E selecione a fonte de sua escolha. Então clique em " selecione esta fonte Uma guia aparece no canto inferior direito da tela.

Clique nesta aba que se expande como na imagem acima. Você será capaz de personalizar o estilo da fonte para incluir clicando Personaliza. Você só precisa selecionar o estilo que deseja ver no seu blog.

Você deve então descer até a seção " Embutir ". Você precisará copiar o código localizado no " PADRÃO ". Este é o código que você pode adicionar no cabeçalho Do seu tema filho.

É tudo o que há para adicionar uma nova fonte do Google Font ao seu blog WordPress.

Como adicionar uma fonte usando Typekit

Typekit é outro serviço gratuito e premium que oferece fontes que você pode usar também em seus diferentes projetos. Eles oferecem assinaturas premium e assinaturas gratuitas.

Tudo o que você precisa fazer é ter uma conta Typekit e criar uma nova. estojo ".

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Você precisará selecionar a fonte da biblioteca Typekit e adicioná-la ao seu projeto. Depois disso, pegue o código do seu kit e adicione-o no seu painel.

Para adicioná-lo ao seu painel, basta instalar e ativar o plugin " Fontes Typekit para WordPress ".

Após a ativação, tudo o que você precisa fazer é acessar a seção " Configurações> Fontes do Typekit E cole o código do seu kit no " regras CSS personalizado ".

Typekit colar-a-kit

A fonte pode ser usada da mesma maneira, ou seja, especificando o nome da família para elementos específicos ou para todo o documento.

Como adicionar uma fonte usando o CSS3 (@ font-face)

A maneira mais direta de incorporar uma fonte em seu blog é adicioná-la usando faces de fontes por meio do CSS3. Este método permite que você adicione qualquer tipo de fonte de sua escolha ao seu blog.

A primeira coisa a fazer é baixar a fonte de sua escolha no formato da Web. Se você não tiver essa fonte no formato da Web, poderá convertê-la para " FontSquirrel Generator Webfont ".

Depois de ter os arquivos no formato " teia Você terá que enviá-los diretamente para o seu servidor. Eu recomendo fortemente adicioná-lo à pasta " fontes Do seu tema filho usando um cliente FTP (FileZilla é a minha recomendação).

Se você quiser ir mais longe neste procedimento, veja nosso tutorial sobre Como usar o FTP no Windows 10

Vamos voltar ao nosso objetivo.

Uma vez feito, você pode integrar a fonte desta maneira:

integração em Police

Para usá-lo em qualquer lugar, você simplesmente precisará definir o nome da fonte como você especificou no " font-face »Anterior (vista valor do atributo font-family ).

Use o código-font-face

Isso é tudo o que havia para saber sobre o uso do código CSS3. No entanto, devo dizer que o método com o recurso "font-face" é mais adequado para desenvolvedores.

Outras soluções e ferramentas também são usadas e aconselhadas para gerenciar ou manipular as fontes em seu site. Abaixo, ofereceremos plugins 3 WordPress que ajudarão você a adicionar facilmente fontes personalizadas ao WordPress.

1. Construtor Divi

O Divi Builder é um construtor de páginas de alta qualidade, altamente apreciado pelo Elegant Themes. Embora seja geralmente usado como parte do tema DivX do WordPress, o Divi Builder também é um plug-in autônomo que você pode usar em outros temas do WordPress.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Ao contrário dos dois construtores anteriores, o Divi Builder permite que você edite seu conteúdo usando uma interface visual no front end, bem como uma interface no back-end, embora a maioria dos usuários prefira a primeira interface. .

Basicamente, em vez de barras laterais, tudo está em botões pop-up e flutuantes. Ele oferece acesso a modelos pré-definidos 316 espalhados pelos diferentes pacotes de apresentação do 40, bem como a capacidade de salvar seus próprios designs como modelos.

Um dos traços de Divi sempre foi o controle dos estilos que ele lhe dá. Em três guias diferentes, você pode definir várias configurações, incluindo controles responsivos, espaçamento personalizável e muito mais.

Você pode até adicionar CSS personalizado, porque o editor CSS integra a validação básica e o preenchimento automático. Uma das críticas do Divi Builder sempre foi que ele é baseado em códigos de acesso. O que significa que se você desativá-lo um dia, ele deixará um monte de códigos de acesso em seu conteúdo. Embora isso seja um pouco deprimente, é um problema menor agora que existem plugins como o Shortcode Cleaner.

Download | Demonstração | Web Hosting

2. Construtor Divi

O Divi Builder é um construtor de páginas de alta qualidade, altamente apreciado pelo Elegant Themes. Embora seja geralmente usado como parte do tema DivX do WordPress, o Divi Builder também é um plug-in autônomo que você pode usar em outros temas do WordPress.

Ao contrário dos dois construtores anteriores, o Divi Builder permite que você edite seu conteúdo usando uma interface visual no front end, bem como uma interface no back-end, embora a maioria dos usuários prefira a primeira interface. .

Basicamente, em vez de barras laterais, tudo está em botões pop-up e flutuantes. Ele oferece acesso a modelos pré-definidos 316 espalhados pelos diferentes pacotes de apresentação do 40, bem como a capacidade de salvar seus próprios designs como modelos.

Um dos traços de Divi sempre foi o controle dos estilos que ele lhe dá. Em três guias diferentes, você pode definir várias configurações, incluindo controles responsivos, espaçamento personalizável e muito mais.

Você pode até adicionar CSS personalizado, porque o editor CSS integra a validação básica e o preenchimento automático. Uma das críticas do Divi Builder sempre foi que ele é baseado em códigos de acesso. O que significa que se você desativá-lo um dia, ele deixará um monte de códigos de acesso em seu conteúdo. Embora isso seja um pouco deprimente, é um problema menor agora que existem plugins como o Shortcode Cleaner.

Download | Demonstração | Web Hosting

3. Construtor de Páginas do WPBakery

O WPBakery Page Builder, anteriormente conhecido como Visual Composer, é outro construtor de páginas premium e extremamente popular. Grande parte dessa popularidade vem do fato de que o WPBakery Page Builder vem com quase 99% de temas WordPress do ThemeForest. Mas o fato é que ele é usado em um grande número de sites.


Tal como o Divi Builder, o WPBakery Page Builder permite editar e editar visualmente no backend. Comparado a algo como Elementor ou Divi Builder, as opções de estilo do WPBakery Page Builder são um pouco limitadas. Você tem um bom controle sobre as linhas, mas as opções de estilo para itens individuais são um pouco mais limitadas.

Se você quiser usar seu próprio CSS, poderá adicionar uma classe CSS ou ID personalizada a elementos individuais ou adicionar estilos reais ao nível da página.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Não tenho certeza se o WPBakery Page Builder possui recursos exclusivos que são particularmente dignos de nota. Mas o que ele tem é uma enorme comunidade de extensões. Como o Divi Builder, o WPBakery Page Builder deixa para trás uma infinidade de códigos de acesso em seu conteúdo, se você desativá-lo. Descubra o tutorial

Download | Demonstração |Web Hosting

Outros recursos recomendados

Vá mais longe no uso de fontes personalizadas no WordPress, consultando também os links ou recursos recomendados abaixo.

Conclusão

É isso! É tudo para este tutorial dedicado à melhor maneira de adicionar fontes personalizadas ao WordPress. Se você tiver sugestões ou comentários, eles serão bem-vindos.

Sinta-se à vontade para compartilhar a dica com seus amigos e nós convidamos você a visitar nosso recursos se você é um blogueiro iniciante.

...

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
9 ações
ação6
chilrear
Enregistrer3
Whatsapp