Como adicionar fontes personalizadas ao WordPress

Se você deseja que seu site realmente se destaque da multidão, o uso de fontes personalizadas o ajudará a conseguir isso. Existem milhares de lindas fontes personalizadas para escolher e, selecionando as corretas para o seu projeto, você poderá criar um site que não seja apenas exclusivo, mas que também reflita seu estilo e marca. Então, como você adiciona fontes personalizadas ao WordPress?

Neste artigo, abordaremos tudo o que você precisa saber sobre como aplicar fontes personalizadas ao seu site. Isso inclui:

• Onde encontrar fontes personalizadas
• Como adicionar Google Fonts ao seu site usando o plugin Easy Google Fonts
• Adicionando o Google Fonts ao seu site manualmente (sem necessidade de plug-in)
• Adicionando Adobe Fonts ao WordPress
• Como adicionar qualquer fonte personalizada ao seu espaço na web

Pronto para começar?

Onde você pode encontrar fontes personalizadas?

Atualmente, muitos temas premium do WordPress são fornecidos com uma infinidade de fontes personalizadas. No entanto, isso geralmente pode aumentar o inchaço do tema e afetar os tempos de carregamento do seu site mais do que você imagina. Você também descobrirá que, na verdade, usa apenas algumas fontes personalizadas no máximo, portanto, a maioria das fontes que seu tema fornece nunca será necessária.

Portanto, recomendamos escolher um tema WordPress leve, ao qual você possa adicionar fontes personalizadas quando necessário. Há vários lugares onde você pode encontrar as fontes personalizadas certas para o seu site. Vamos dar uma olhada…

• Google Fonts – A escolha mais popular, Google Fonts, oferece um diretório gratuito de mais de 900 fontes de designer de código aberto que podem ser usadas em mais de 135 idiomas. Essas fontes podem ser navegadas rapidamente e, em seguida, integradas perfeitamente em qualquer projeto de web design.
• Adobe Fonts (anteriormente conhecido como Typekit) – Embora o Typekit ofereça versões gratuitas e premium de seu serviço, agora renomeado como Adobe Fonts, você precisará se inscrever no pacote pago da Adobe Creative Cloud para acessar este recurso. Existem milhares de fontes para escolher, todas as fontes são licenciadas para uso pessoal e comercial, e você também pode selecionar pacotes de fontes com temas de projetos, que são perfeitos para quem não tem olho para o design.
• Font Squirrel – Na biblioteca Font Squirrel você encontrará uma mistura de fontes gratuitas e premium, estas últimas que podem ser adquiridas em compras pontuais. Novamente, você pode escolher entre milhares de fontes de alta qualidade, a maioria gratuita e licenciada comercialmente.
• Fonts.com – Fornecendo mais de 150.000 produtos de fonte para desktop e web, Fonts.com contém uma coleção impressionante de fontes personalizadas premium. Você também encontrará uma variedade de artigos interessantes no blog Font.com, compartilhando dicas e técnicas tipográficas.
• FontPair – Oferecendo uma experiência um pouco diferente dos outros recursos, o FontPair une fontes do Google Fonts, ajudando você a encontrar as combinações certas de fontes para o seu site.

Então, agora você sabe onde encontrar fontes personalizadas. Vejamos a seguir como adicionar o Google Fonts ao seu site WordPress.

Como adicionar fontes do Google ao WordPress usando o plug-in Easy Google Fonts

Como o Google Fonts é o recurso mais popular para fontes personalizadas, começaremos analisando como adicionar uma fonte dessa biblioteca ao seu site. Existem várias maneiras de fazer isso, mas a opção mais rápida e fácil é usar o plugin do WordPress Easy Google Fonts.

Easy Google Fonts é um plugin WordPress gratuito que permite inserir fontes personalizadas em seu site WordPress, sem precisar tocar em uma linha de código. Integrando-se ao personalizador do WordPress, este plugin permitirá que você insira e use fontes do Google no front-end do seu site em tempo real, sem precisar atualizar a página.

Então vamos agora descobrir como instalar e usar este plugin.

Etapa 1: instale o Easy Google Fonts

Para começar com o Easy Google Fonts, abra o painel do WordPress e selecione Plugins > Adicionar novo no menu.

Em seguida, digite Easy Google Fonts na função de pesquisa e, assim que o plug-in for recuperado, clique em Instalar > Ativar .

Agora você encontrará o Easy Google Fonts em Configurações no menu do WordPress.

Passo 2: Edite fontes no WordPress Customizer

Depois de instalar o Easy Google Fonts, no menu do WordPress, selecione Aparência > Personalizar . Seu site agora será aberto no front-end, onde você encontrará uma seção de tipografia adicionada ao personalizador.

Clique em Tipografia. Você pode então selecionar as diferentes áreas do seu site onde gostaria de aplicar uma fonte personalizada do Google (por exemplo, parágrafo, Cabeçalho 2, Cabeçalho 3, etc).

Na seção que você deseja editar, clique em Editar fonte . Você pode então selecionar a fonte que gostaria de usar – você poderá visualizar a aparência de cada fonte diretamente em seu site.

Você não apenas pode alterar o tipo de fonte, mas também pode alterar a cor, o tamanho, o posicionamento e muito mais. Quando estiver satisfeito com sua nova fonte, clique em Publicar .

Etapa 3: criar controles de fonte personalizados

Os controles padrão fáceis do Google Fonts permitirão que você altere as fontes das seções de parágrafos e cabeçalhos 1-6. No entanto, nem todos os elementos do seu tema são gerenciáveis ​​pelos controles de fonte padrão.

Se você quiser alterar um elemento diferente do seu tema (diferente de um parágrafo ou cabeçalho), precisará criar seus próprios controles de fonte personalizados. Embora o Easy Font Control permita fazer isso facilmente, você ainda precisará de um conhecimento básico dos seletores CSS.

Para adicionar controles de fonte personalizados, selecione Configurações > Google Fonts no painel do WordPress. Em seguida, na guia Editar controles de fonte , dê um nome apropriado ao novo grupo de controle de fonte e selecione Criar controle de fonte . Aqui vamos criar um controle de fonte para blockquotes…

Em Adicionar seletores de CSS , adicione o seletor de CSS para o elemento que você deseja gerenciar. Você pode adicionar mais de um elemento, se desejar. Em seguida, selecione Salvar controle de fonte .

De volta ao Customizer no front-end do seu site, em Typography , você encontrará agora a opção Theme Typography, onde você pode acessar seus novos controles personalizados.

Agora você pode selecionar uma nova fonte personalizada para o elemento personalizado específico e alterar quaisquer outras configurações de Aparência e Posicionamento .

Easy Custom Fonts é uma ótima opção para quem deseja adicionar fontes personalizadas ao WordPress do Google. No entanto, se preferir, você também pode adicionar manualmente o Google Fonts ao seu site usando apenas código, sem plug-in. Vamos descobrir como fazer isso…

Como adicionar manualmente o Google Fonts ao WordPress (sem necessidade de plugin)

Se você preferir adicionar o Google Fonts ao WordPress manualmente, precisará de um conhecimento muito básico de codificação.

Etapa 1: selecione uma fonte do Google

Para começar, abra o Google Fonts e selecione o tipo de fonte personalizado que você gostaria de adicionar ao seu site.

Em seguida, na página da fonte, clique em Selecionar esta fonte . Aqui selecionamos a fonte Indie Flower.

Um pop-up aparecerá agora na sua tela. Dependendo da fonte selecionada, você poderá acessar uma seleção de opções de personalização para pesos e estilos de fonte, bem como visualizar as informações de incorporação.

Etapa 2: incorpore o código da fonte personalizada em seu site WordPress

Em seguida, você precisará copiar o código Embed (veja o pop-up acima) e colá-lo na seção <head> do seu tema WordPress. A maneira mais fácil de fazer isso é instalar o plugin WordPress gratuito Insert Headers and Footers. Usando este plugin, você pode adicionar código rapidamente ao seu site sem precisar editar seus arquivos de tema.

Após a instalação, abra as configurações do plug-in selecionando Configurações > Inserir cabeçalho e rodapés no painel do WordPress. Em seguida, você precisa adicionar seu código de incorporação do Google Fonts na seção Cabeçalho.

Da mesma forma, se preferir, você pode editar o arquivo header.php do seu tema filho.

Etapa 3: aplicar a nova fonte usando CSS

Depois de adicionar o código HTML da sua fonte personalizada ao seu site, agora você pode usar CSS para aplicar sua nova fonte personalizada. No pop-up do Google Fonts, você encontrará as regras CSS específicas para sua nova fonte.

De volta ao Personalizador no lado dinâmico do seu site, selecione CSS adicional. Aqui você pode inserir o código CSS para personalizar as fontes em seu site. Abaixo você pode ver que aplicamos o código CSS Indie Flower às seções de cabeçalho 2 e parágrafo…

O Personalizador mostrará as alterações de fonte em tempo real e, se estiver satisfeito com os resultados, clique em Publicar .

Como adicionar Adobe Fonts ao WordPress

Se você se inscreveu no pacote premium da Creative Cloud da Adobe, poderá adicionar qualquer uma de suas fontes personalizadas ao seu site WordPress. Esse processo é muito semelhante ao de adicionar manualmente o Google Fonts ao seu site. Vamos dar uma olhada rápida.

Etapa 1: escolha uma fonte da Adobe

Antes de mais nada, você precisará navegar pela extensa biblioteca de fontes da Adobe e escolher uma(s) fonte(s) que se ajustem ao seu projeto. Depois de fazer uma seleção, clique no ícone </> para adicionar a fonte a um novo projeto da Web .

Agora você será solicitado a nomear seu projeto da Web, bem como usar as caixas de seleção para selecionar os pesos e estilos de fonte que deseja incluir. Em seguida, selecione Criar projeto .

Etapa 2: incorpore o código da Adobe Font em seu site WordPress

O próximo passo é incorporar o código que a Adobe fornece para a fonte escolhida em seu site WordPress.

Isso segue exatamente o mesmo processo de incorporação do código do Google Fonts. Simplesmente incorpore o código na tag <head> em seu site ou use o plugin WordPress Insert Headers and Footers (como discutido anteriormente).

Etapa 3: aplicar a nova fonte usando CSS

Novamente, como o Google Fonts, agora você pode aplicar sua nova fonte personalizada da Adobe usando regras CSS. No painel da Adobe, a página do projeto da Web listará o nome da família de fontes CSS, bem como o estilo da fonte e o peso numérico, para cada tipo de fonte selecionado.

De volta ao seu site WordPress, essas regras CSS podem ser usadas no Personalizador em CSS Adicional.

Então, agora abordamos como adicionar fontes personalizadas ao WordPress usando o Google Fonts gratuito muito popular, bem como o impressionante recurso premium Adobe Fonts.

No entanto, a última opção que discutiremos permite que você adicione qualquer fonte personalizada ao seu site, enviando-a para o servidor do seu site. Vamos descobrir mais.

Como adicionar uma fonte personalizada ao seu espaço na web

Adicionar uma fonte personalizada ao seu espaço da web é relativamente simples, mas, novamente, você precisará de um conhecimento básico de CSS para aplicar a fonte ao seu site.

Etapa 1: baixar uma fonte personalizada

Como mencionado no início deste artigo, existem vários recursos onde você pode selecionar fontes personalizadas gratuitas ou premium para usar em seu site. Ao escolher uma fonte personalizada para adicionar ao seu servidor, apenas certifique-se de ter o direito de usá-la e de que ela possa ser baixada.

Aqui baixamos a fonte personalizada gratuita Milkshake da Squirrel Fonts.

É importante baixar sua fonte personalizada em um formato webfont. O formato de contêiner de webfont WOFF possui o maior suporte entre navegadores, mas o Google recomenda fornecer vários formatos para fornecer uma experiência consistente aos usuários em todos os dispositivos.

Se você precisar converter sua fonte personalizada em um formato diferente, o Squirrel Font fornece uma ferramenta Webfont Generator gratuita que permitirá que você faça isso.

Etapa 2: faça upload da fonte personalizada para seu servidor

O próximo passo é carregar sua fonte personalizada para o seu servidor. Para fazer isso, abra o Gerenciador de Arquivos no cPanel do seu site.

Em seguida, na pasta de temas ativos, crie uma nova pasta chamada Fonts e carregue sua fonte personalizada aqui.

Se você tiver vários formatos de sua fonte, carregue-os todos na pasta Fontes . Sua fonte personalizada foi adicionada ao seu espaço na web.

Etapa 3: use CSS para aplicar a fonte personalizada ao seu site

Agora você precisa aplicar a fonte personalizada ao seu site. Para começar, você precisa carregar a fonte na folha de estilo do seu tema. Para fazer isso, abra o WordPress Customizer e em CSS Adicional adicione este código:

 @Tipo de letra {
    família de fontes: Milkshake;
    src: url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         format("uau");
}

Importante, certifique-se de alterar o nome da fonte e o URL (copie o URL do arquivo de fonte em seu servidor).

Você pode então usar as regras CSS para atualizar as fontes em seu site. Aqui está um exemplo de como aplicar a fonte personalizada ao cabeçalho 3 e às seções de parágrafo:

Quando estiver satisfeito com a aparência da nova fonte personalizada em seu site, clique em Publicar .

Considerações finais sobre como adicionar fontes personalizadas ao WordPress

Como você pode ver, se você estiver procurando por uma fonte personalizada bonita e atraente, existem vários recursos que permitirão encontrar a fonte perfeita para o seu projeto. Além disso, agora você está armado com o conhecimento de como adicionar fontes personalizadas com sucesso ao WordPress. Então, quais fontes personalizadas você escolherá?

Tem alguma dúvida sobre como adicionar fontes personalizadas ao WordPress? Por favor, pergunte nos comentários abaixo…