Como adicionar fontes personalizadas do WordPress: assuma o controle total da tipografia

Você está procurando aprimorar o apelo visual e a experiência do usuário do seu site WordPress? Adicionar fontes personalizadas do WordPress pode mudar o jogo.

Então, estamos apresentando as fontes personalizadas PostX. Com a capacidade de usar uma combinação única de belas fontes, você pode transformar a tipografia e a estética geral do seu site com o PostX.

Isso torna seu conteúdo visualmente mais atraente, melhora a legibilidade, ajuda a estabelecer uma imagem de marca forte e mantém os visitantes envolvidos por mais tempo.

Então, como adicionar uma fonte personalizada ao WordPress?

• Instale PostX.
• Ative o complemento de fonte personalizada.
• Carregue suas fontes personalizadas.
• Use fontes personalizadas em cada bloco PostX das configurações de tipografia.

Neste artigo, explicaremos como adicionar fontes personalizadas a sites WordPress e discutiremos os benefícios que elas podem trazer.

Como encontrar fontes personalizadas para WordPress?

Existem vários mercados de fontes online onde você pode explorar uma vasta coleção de fontes gratuitas e premium. Aqui estão alguns lugares onde você pode encontrar fontes personalizadas para WordPress:

• Fontes do Google
• Adobe Typekit
• fonte esquilo
• MinhasFontes

E vários outros sites que fornecem fontes gratuitas e premium.

Como adicionar fontes personalizadas do WordPress (guia passo a passo)

Você precisa usar um plug-in para fazer upload de fontes personalizadas para o WordPress. E o PostX, o plug-in mais fácil de usar e personalizável, está aqui com seu mais novo complemento, o complemento Custom Fonts. Você pode facilmente carregar fontes personalizadas para o WordPress sem qualquer aborrecimento.

Então, sem mais delongas, vamos aos procedimentos.

Vídeo tutorial

Segue um vídeo tutorial, para que você possa entender as PostX Custom Fonts da melhor forma possível.

Instalar o PostX

Para desbloquear os recursos poderosos do PostX e tirar proveito de seus recursos, você precisa instalar o plug-in.

Para instalar e ativar o plugin PostX Gutenberg Blocks:

1. Vá para Plug-ins → Adicionar novo.
2. Pesquise por "PostX".
3. Clique em Instalar e depois em Ativar.

Agora você está pronto para aprimorar seu site com fontes personalizadas do WordPress.

Ativar complemento de fontes personalizadas

Agora, você precisa ativar o addon Custom Font. A ativação do complemento é obrigatória antes de usar fontes personalizadas em todo o site.

Para ativar o addon Custom Font no PostX:

1. Vá para PostX → Complementos.
2. Encontre o complemento “Custom Font” e ative-o.
3. O complemento agora está ativado e pronto para uso.

Você ativou com sucesso o complemento Custom Font para PostX.

Diretriz de Peso da Fonte [*IMPORTANTE]

Aqui está uma diretriz para escolher o peso de fonte perfeito para suas fontes personalizadas.

O peso da fonte refere-se à espessura dos traços que compõem as letras em uma fonte. É medido em números que variam de 100 a 900, sendo que cada número corresponde a um peso específico. Por exemplo, 100 é o peso de fonte mais leve, enquanto 900 é o mais ousado. O peso da fonte desempenha um papel significativo na determinação do impacto visual do texto.

Portanto, esta regra é a mesma ao carregar variações de fontes personalizadas com PostX. Suponha que você tenha variações finas, normais, médias e em negrito de uma fonte específica. E, por exemplo, vamos dar à fonte um nome como "Example Font".

Então, agora você tem uma fonte chamada “Example Font” com variações finas, normais, médias e negrito.

Ao carregar a fonte, use “Example Font” como nome para todas as variações. Mas cada vez que você tem que mudar o peso.

Por exemplo:

Ao carregar a variação “fina”, selecione o peso como 100.

Para “normal / regular”, selecione o peso como 400.

Para “médio”, selecione o peso como 500.

Para “negrito”, selecione o peso como 700.

Às vezes, haverá outras variações, portanto, use a imagem a seguir como um guia de peso de fonte para a variação que você enviar.

Como fazer upload de fonte personalizada do WordPress?

Antes de usar qualquer uma das fontes personalizadas, você precisa obtê-las, que mencionamos anteriormente. Mas depois de passar pelo processo de download, instalação do PostX e tudo mais, agora você só precisa carregá-lo.

Então, agora vamos mostrar como fazer upload das fontes personalizadas do WordPress.

Siga as etapas abaixo para concluir o processo de upload de fonte personalizada do WordPress facilmente.

Etapa 1: vá para fontes personalizadas

Para carregar uma fonte personalizada, temos que ir para a seção de fontes personalizadas PostX.

No painel do WordPress, localize e selecione a opção de menu “PostX”. Isso mostrará todos os recursos do PostX. Agora selecione a opção de fonte personalizada.

Clique no botão "Adicionar novo" na seção Fontes personalizadas. Esta ação irá direcioná-lo para a página de upload de fonte, onde você pode adicionar uma nova fonte personalizada ao seu site WordPress.

A partir daqui, você pode adicionar novas fontes personalizadas ou personalizar as adicionadas anteriormente.

Etapa 2: vá para a página de upload de fontes

Agora podemos carregar nossas fontes personalizadas desejadas.

Ao carregar uma nova fonte personalizada, forneça um nome para a fonte. Esta é uma etapa crucial para garantir que a fonte seja facilmente identificável e distinguível entre outras fontes em sua lista.

Para carregar a fonte personalizada, clique no botão "Adicionar variação". Esta ação revelará as opções de upload de fonte.

Etapa 3: selecione o tipo de arquivo de fonte

O PostX oferece suporte a vários formatos de fonte personalizados, como WOFF, WOFF2, TTF, SVG e EOT. Escolha o formato de fonte apropriado para você.

Depois de selecionar o formato da fonte, clique em “upload” para navegar e selecionar o arquivo da fonte no seu computador. Faremos o upload da fonte com a biblioteca de mídia do WordPress. Portanto, você não terá problemas com o processo de upload. Este arquivo será então enviado para o seu site WordPress.

Etapa 4: escolha o peso da fonte

Se você tiver várias versões ou variações da mesma fonte, é importante especificar o peso da fonte. O peso da fonte determina a espessura ou ousadia dos caracteres e é crucial para o estilo adequado da fonte.

Selecione o peso de fonte desejado nas opções disponíveis no plug-in PostX.

Uma vez carregado, ele exibirá a visualização da fonte que você carregou, então será mais fácil para você verificar antes de concluir o processo.

Etapa 5: adicionar variação de fonte

Se você tiver variações de fonte adicionais, como fina ou negrito, também poderá carregá-las. Clique no botão “Adicionar variação” novamente para adicionar outra variação da fonte personalizada.

Nomeie a variação da mesma forma que a versão inicial da fonte. Carregue o arquivo de fonte para esta variação e, mais uma vez, selecione o peso da fonte correspondente para a variação específica.

Por exemplo, adicionaremos uma variação regular e em negrito de uma fonte. Assim, ao carregar a variação “regular”, selecionaremos o peso: 400.

Em seguida, clique em Adicionar variação a outra variação. E para a variação “bold” vamos selecionar o peso: 700.

Observe que você pode fazer upload de variações ilimitadas para uma fonte, não se limitando a apenas duas. Mostramos duas opções de variação para tornar o processo mais simples.

Etapa 6: conclua o processo de upload

Depois de carregar todas as variações de fonte desejadas e especificar seus pesos de fonte, clique no botão “Publicar”. Esta ação salvará e publicará a fonte personalizada, tornando-a disponível para uso em seu site WordPress.

Como usar fontes personalizadas do WordPress?

Concluímos o upload da fonte personalizada. E as fontes personalizadas agora estarão disponíveis em todos os blocos PostX para uso que possuem configurações de tipografia. Agora vamos mostrar como usá-lo.

Etapa 1: criar uma nova página

Você precisa criar uma nova página em seu site WordPress primeiro. Você pode fazer isso navegando até a seção Páginas do painel do WordPress e clicando em “Adicionar novo”.

Etapa 2: adicionar blocos PostX

No novo editor de página, adicione Blocos PostX à página. Esses blocos fornecem recursos aprimorados e opções de personalização, incluindo configurações relacionadas à tipografia para fontes personalizadas.

No entanto, para este exemplo, usaremos o bloco Post Grid. Mas você pode usar qualquer bloco PostX para usar fontes personalizadas e configurações de tipografia.

Etapa 3: vá para a configuração de tipografia

Selecione o bloco Post Grid ou qualquer outro bloco PostX que você adicionou à página. Localize primeiro as configurações do título e depois as configurações de tipografia para o bloco selecionado. Isso permitirá que você selecione as fontes personalizadas preferidas. Além disso, essas configurações permitem personalizar o estilo e a aparência da fonte.

Passo 4: Selecionando a Fonte Personalizada

Nas configurações de tipografia, procure a opção de personalizar a família de fontes. Clique no botão “Personalizar” para acessar as opções de personalização da fonte. Um menu suspenso chamado “Família” aparecerá.

Você verá duas partes no menu suspenso Família: fontes personalizadas e fontes do sistema. Todas as fontes personalizadas carregadas serão mostradas na seção de fontes personalizadas. Mas certifique-se de não adicionar um nome para sua fonte ao fazer o upload.

Agora, selecione a fonte personalizada desejada.

Etapa 5: selecione o peso da fonte

Depois de selecionar a fonte personalizada no menu suspenso, você deve escolher o peso da fonte. As opções de peso serão baseadas nas variações que você carregou anteriormente.

Por exemplo, temos as variações “regular” e “negrito” com pesos 400 e 700, respectivamente, selecione o peso adequado para obter o estilo de fonte desejado.

Primeiro, vamos escolher o peso de 400 para um estilo de fonte regular, e aqui está a visualização:

Agora, vamos selecionar o peso 700 para um estilo de fonte em negrito e verificar a visualização:

Como você vê, você tem o mesmo nome de fonte com um peso diferente, apresentando diferentes variações de fonte.

Etapa 6: ajustar as configurações de fonte

Depois de selecionar a fonte personalizada e seu peso, você pode ajustar ainda mais as configurações de fonte de acordo com suas preferências.

As configurações de tipografia podem incluir tamanho da fonte, altura da linha, espaçamento entre letras e mais opções.

Modifique essas configurações para obter o estilo de tipografia desejado para o seu bloco PostX.

Etapa 7: publicar a página

Depois de personalizar as configurações de fonte, revise as alterações feitas. Quando estiver satisfeito com o estilo da fonte e o conteúdo geral da página, clique no botão “Publicar” para tornar sua página ativa em seu site WordPress.

Mas há mais opções de personalização com o PostX. Portanto, se você não estiver satisfeito com as personalizações, vamos prosseguir para outras personalizações.

Como personalizar ainda mais as fontes personalizadas do WordPress?

Portanto, como dissemos, o PostX oferece mais personalizações. Não vamos perder tempo e verificá-los.

Etapa 1: personalização do tamanho da fonte

Nas configurações de tipografia do bloco PostX escolhido, localize a opção de personalização do tamanho da fonte.

Para alterar o tamanho da fonte, você pode selecionar um tamanho de fonte fixo (como 13, 16, 20, 36, 42) ou inserir um tamanho de fonte personalizado usando o campo de entrada fornecido. Isso permite que você diminua ou aumente a fonte conforme desejado.

Etapa 2: personalização da decoração da fonte

Nas configurações de tipografia, encontre as opções de personalização da decoração da fonte.

O PostX oferece a capacidade de alterar as decorações da fonte, como sublinhado (adicionando uma linha sob o texto), overline (adicionando uma linha sobre o texto) e linha (adicionando uma linha no texto).

Vamos ver uma prévia de cada um.

Visualização do Sublinhado:

Visualização Overline:

Linha de visualização:

Escolha a(s) opção(ões) de decoração desejada(s) para sua fonte personalizada.

Etapa 3: personalização do estilo da fonte

Localize as opções de personalização de estilo de fonte nas configurações de tipografia do PostX.

O PostX permite que você altere os estilos de fonte. Atualmente, você pode selecionar opções como itálico (estilo semicursivo) e oblíquo (estilo artificialmente inclinado semelhante ao itálico. Nota: algumas fontes podem não suportar isso).

Por exemplo, encontre uma fonte perfeita para o seu site que não tenha uma variação de itálico. O PostX pode ajudá-lo a obter o estilo itálico, fornecendo opções de estilo de fonte.

Vamos ver a visualização em itálico:

Sempre escolha o estilo de fonte que se adapte às suas preferências.

Etapa 4: personalização da transformação de fonte

O PostX permite que você transforme o texto da fonte em diferentes maiúsculas e minúsculas: AB (todas as maiúsculas), ab (todas as minúsculas) e Ab (título).

Vamos ver a prévia de cada um.

AB (todas as letras maiúsculas):

ab (todas as letras minúsculas):

Ab (caso do título):

Selecione a opção de transformação de fonte desejada para modificar as maiúsculas e minúsculas do texto de acordo.

Etapa 5: personalização da cor da fonte e da cor do foco da fonte

O PostX fornece uma paleta de cores para alterar a cor do texto. Você pode selecionar uma cor da paleta que se adapte ao seu design.

Além disso, suponha que você tenha códigos de cores específicos nos formatos HEX, RGB ou HSL. Nesse caso, você pode inserir esses códigos para alterar a cor do texto de acordo.

Se você deseja alterar a cor do foco do texto da fonte, pode fazer isso com o PostX.

As configurações de cor de foco da fonte são semelhantes à personalização da cor da fonte. Você pode usar a paleta de cores ou inserir códigos HEX, RGB ou HSL para alterar a cor instantânea do texto.

A aplicação dessas configurações de personalização no PostX permite que você personalize suas fontes personalizadas sem complicações adicionais.

Nota adicional

As opções de personalização acima podem variar dependendo de suas fontes específicas. Experimente diferentes configurações e combinações para obter as personalizações desejadas para suas fontes personalizadas.

Lembre-se de publicar ou atualizar suas alterações após personalizar as configurações de fonte para ver a aparência atualizada de suas fontes personalizadas em seus blocos PostX.

Benefícios das fontes personalizadas do WordPress

O uso de fontes personalizadas do WordPress pode oferecer várias vantagens, aprimorando a tipografia e a experiência do usuário do seu site. Aqui estão os principais benefícios da implementação de fontes personalizadas:

Apelo visual aprimorado: as fontes personalizadas permitem que você diferencie a tipografia do seu site, criando um design exclusivo e visualmente atraente que se alinha à identidade da sua marca.

Legibilidade aprimorada: fontes personalizadas cuidadosamente escolhidas podem melhorar a legibilidade, garantindo que os visitantes possam consumir e entender facilmente o conteúdo do seu site.

Consistência da marca: o uso de fontes personalizadas alinhadas com as diretrizes da marca pode reforçar a identidade da marca, criando uma experiência visual coesa e consistente em todo o site.

Experiência de usuário exclusiva: fontes personalizadas contribuem para uma experiência de usuário distinta, diferenciando seu site da concorrência e deixando uma impressão memorável nos visitantes.

Maior envolvimento: a tipografia captura e retém a atenção dos usuários. Fontes personalizadas bem selecionadas podem cativar seu público, aumentando o engajamento e o tempo gasto em seu site.

Ampla seleção de fontes: o WordPress oferece uma vasta biblioteca de fontes personalizadas, dando a você acesso a uma ampla variedade de estilos e opções de fontes para escolher, garantindo que você encontre a combinação perfeita para a estética do seu site.

Fácil implementação: Com a interface amigável do WordPress, a integração de fontes personalizadas em seu site é simples. Você pode instalar e ativar plug-ins de fonte ou usar opções de tema para aplicar fontes personalizadas sem grande conhecimento de codificação sem esforço.

Design responsivo: as fontes personalizadas podem se adaptar a diferentes dispositivos e tamanhos de tela, garantindo que sua tipografia permaneça visualmente atraente e legível em desktops, tablets e dispositivos móveis.

Flexibilidade e controle: ao utilizar fontes personalizadas, você tem controle total sobre a aparência e o posicionamento dos elementos de texto em seu site. Você pode ajustar o tamanho da fonte, espaçamento entre linhas e outras configurações tipográficas para obter a aparência desejada.

Fontes personalizadas em seu site WordPress aprimoram sua estética, legibilidade e experiência geral do usuário. Aproveitando a variedade de fontes disponíveis, você pode criar um site visualmente cativante e com a marca que deixa uma impressão duradoura em seus visitantes.

perguntas frequentes

P: Posso usar qualquer fonte como fonte personalizada no WordPress?

R: Embora o WordPress ofereça uma ampla seleção de fontes personalizadas, você também pode enviar suas próprias fontes em vários formatos como WOFF, WOFF2, TTF, SVG e EOT usando plug-ins como PostX. No entanto, garantir que você tenha direitos de licenciamento para as fontes que você carrega é importante.

P: O uso de fontes personalizadas afetará a velocidade de carregamento do meu site?

R: As fontes personalizadas podem adicionar tempo de carregamento ao seu site, especialmente se você tiver várias fontes personalizadas ou arquivos de fonte grandes. Otimizar seus arquivos de fonte e implementar técnicas de cache é essencial para minimizar qualquer impacto negativo na velocidade de carregamento.

P: As fontes personalizadas funcionam em todos os dispositivos e navegadores?

R: As fontes personalizadas podem ser usadas em diferentes dispositivos e navegadores. No entanto, é recomendável escolher fontes com bom suporte entre navegadores e garantir que sejam responsivas para manter uma experiência visual consistente em vários tamanhos de tela e dispositivos.

P: Há alguma limitação no uso de fontes personalizadas no WordPress?

R: Embora o uso de fontes personalizadas no WordPress ofereça inúmeros benefícios, é importante considerar algumas limitações. Algumas fontes personalizadas podem não oferecer suporte a todos os idiomas ou caracteres, portanto, verifique se as fontes escolhidas são compatíveis com os requisitos de conteúdo do seu site. Além disso, usar muitas fontes personalizadas pode afetar negativamente o desempenho e não ser ideal para a experiência do usuário.

Conclusão

As fontes personalizadas do WordPress oferecem aos proprietários de sites uma ferramenta poderosa para aprimorar a tipografia, o apelo visual e a experiência do usuário de seus sites. Ao selecionar e implementar cuidadosamente fontes personalizadas, você pode criar um design exclusivo e envolvente que se alinhe à identidade da sua marca.

Com a interface amigável de plug-ins como o PostX, adicionar fontes personalizadas ao seu site WordPress é simples e eficiente. Quer você escolha fontes do Google Fonts, mercados de fontes ou bibliotecas de fontes premium, você tem uma ampla gama de opções para encontrar as fontes perfeitas para o seu site.

Aproveite as vantagens das fontes personalizadas do WordPress para elevar a estética, a legibilidade e a experiência geral do usuário do seu site e causar um impacto duradouro em seu público.

Você pode conferir os tutoriais em vídeo do WordPress em nosso canal do YouTube. Além disso, encontre-nos no Facebook e Twitter para atualizações regulares!