Como usar fontes baixadas no WordPress sem um plug-in

O Google Fonts é um recurso incrível. Antes de ser tão difundido, criar sites que usavam fontes exclusivas era uma verdadeira dor. Agora, porém, com alguns cliques e um trecho de código, seu site muda de Helvetic-eh para Helvetic-incrível . Mas e se a fonte que você ama não fizer parte da família Google Fonts? Você precisa saber como usar as fontes baixadas porque você descobriu uma fantástica fonte hipster que fala com a alma da sua barba.

Usar uma fonte baixada em seu site não é tão simples quanto clicar-clicar-colar-colar. Não é um processo difícil, veja bem, e vou orientá-lo para que nunca, jamais, tenha um site da Helvetic-eh novamente.

Agora, quero salientar que você pode fazer isso por meio de um plugin. Existem vários disponíveis no repo. Mas por que faríamos isso? Eu sou o tipo de cara que prefere evitar o uso de um plugin quando algumas linhas de código farão a mesma coisa. O excesso de plug-ins causa toneladas de inchaço, solicitações HTTP desnecessárias e torna seu site lento.

Então, vamos importar essas fontes manualmente - como se estivéssemos no final dos anos 90 novamente. Awww, sim.

Escolhendo e baixando uma fonte

Sou um grande fã de resumos de fontes. O Elegant Themes tem uma infinidade de itens que você pode percorrer para ver do que gosta. Então acesse alguns deles e veja do que você gosta.

• Fontes de escrita à mão
• Retro Fonts
• Fontes de luxo
• Fontes cursivas
• Fontes Hipster
• Fontes divertidas

Para mim, vou com a fonte Aventura do round-up Hipster.

A primeira etapa é encontrar o link de download da fonte e salvar o arquivo no computador. Provavelmente será um arquivo .zip contendo vários formatos de arquivo. Os mais comuns que você encontrará são .ttf (fonte TrueType) ou .otf (fonte OpenType).

Fazendo uma Webfont (meio opcional, mas não realmente)

FontSquirrel tem uma ótima ferramenta que você pode usar para garantir que ninguém e nenhum navegador seja incompatível com o esplendor do seu site. Uma vez que a maioria das fontes que você baixa estará disponível apenas em um único formato, a ferramenta FontSquirrel permite que você não fique limitado pelo que o autor da fonte distribuiu. Contanto que você tenha direitos para usar a fonte, você pode ter certeza de que funciona com seu produto / site.

Basta fazer upload da fonte baixada recentemente e escolher suas opções. Pessoalmente, eu uso as opções do Expert , apenas para obter todos os formatos de fonte que posso. Os outros funcionam, mas você não obtém tantos tipos de arquivo, que é o ponto principal da coisa toda.

FontSquirrel também é incrível porque fornece o CSS necessário para importá-los para o seu site. Que tal isso ser amigável? Você apenas copiará e colará (o que trataremos a seguir).

Enviando sua fonte para WordPress

Feito isso, você precisará enviar a fonte ao seu provedor de hospedagem. Sempre faço isso via FTP (eu uso o FileZilla, mas você pode usar o cliente que quiser).

Se você não sabe as informações de FTP do seu host, vá para o seu cPanel e procure em Arquivos -> Contas FTP .

Você verá todas as contas de FTP para o host lá e também deverá ver um link Configurar Cliente de FTP ao lado de cada uma.

Quando você entra lá, o cPanel dá a você informações do servidor ou um arquivo FileZilla (e outros) que você pode importar para obter seu conjunto de credenciais. Prefiro manual, pessoalmente, mas você faz o que gosta. Mesmo se você usar o arquivo, precisará da senha para fazer o login, então ambos os métodos são seguros e protegidos.

Agora que você está conectado ao seu host via FTP, navegue até a pasta / wp-content do seu site. Como esse é o conteúdo do seu site WordPress, por que você não o colocaria lá? Sinta-se à vontade para colocá-lo em qualquer lugar, mesmo em / wp-content / uploads . Você faz você.

FTP é muito fácil de fazer upload de seu arquivo. Basta encontrar o arquivo de fonte que você baixou e arrastá-lo para o painel inferior direito do FileZilla. Isso iniciará o upload. Não demorará mais de um segundo ou mais para você vê-lo no diretório.

Se você usou a ferramenta FontSquirrel que discutimos acima, você também fará isso para todos os arquivos de fonte baixados deles. Basta arrastá-los e soltá-los onde quiser armazená-los.

Usando sua fonte com CSS

Sua fonte agora foi carregada e aninhada com segurança em seu cobertor de conteúdo wp aconchegante e confortável. É hora de adicionar a importação CSS necessária ao seu tema.

Vá para o diretório do seu tema filho (você está usando um tema filho, certo?) Em seu cliente FTP e encontre o arquivo style.css , clique com o botão direito nele e selecione Exibir / Editar para abri-lo em seu editor de texto padrão.

Se você não tem um tema infantil, use o Orbisius Child Theme Creator para fazê-lo mega-ultra rápido. Você pode excluir o plugin posteriormente. Eu amo essa coisa

@Tipo de letra

O código que usamos vem diretamente do FontSquirrel (você pode escrever o seu próprio ou copiar / colar o exemplo abaixo), e tudo o que alterei foi o caminho de upload da URL para incluir / wp-content . Todo o resto é fornecido pelo gerador de webfont.

Tudo o que o script de @ font-face faz é dizer às folhas de estilo do seu site, “ei, cara, estou colocando esta nova fonte aqui se você quiser usá-la algum dia”. Sabe, mais ou menos como você faz quando traz cupcakes para casa e conta para as pessoas com quem vive.

Sem @ font-face , se você tentar chamar font-family: 'aventurabold'; por CSS, seu site não será capaz de encontrá-lo porque nunca foi informado onde você o guarda.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Salve o arquivo e, como você o abriu para edição através do FileZilla, aparecerá uma caixa de diálogo perguntando se deseja substituir o do servidor. Sua resposta é, obviamente, sim.

Agora tudo o que você precisa fazer é acessar seu custom.css (ou se você usar Divi, Divi -> Opções de tema -> CSS personalizado no painel de navegação do painel do WP).

Basta adicionar o estilo CSS como faria com qualquer outra fonte. Simplesmente substituí as fontes 'Roboto' e 'Exo' do Google que estava usando por 'aventurabold' e tudo estava pronto (graças à importação de @ font-face acima).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

Os frutos do nosso trabalho

Aqui está o que parecia antes:

E aqui está o que aconteceu depois que adicionei o Aventura ao CSS:

Viva! Funciona! Bom trabalho! Vá conosco!

Parece bom, Friendo

Como o capitão Malcolm Reynolds disse uma vez, "Fizemos o impossível e isso nos torna poderosos". Bem, ok, então carregar uma fonte e importá-la via CSS pode não significar ter feito o impossível , mas você certamente fez algo que muitos usuários do WordPress não ousariam pensar em fazer: adicionar funcionalidade central sem um plugin.

E isso, meus amigos, realmente os torna poderosos.

Então, qual é a sua fonte favorita para usar na web que não seja uma fonte do Google? Diga-me nos comentários!

Imagem em miniatura do artigo por 32 Pixels / shutterstock.com