Incluindo fontes personalizadas em plugins do WordPress

Quanto mais você trabalha no desenvolvimento web, mais provável é que você veja pessoas pedindo para incorporar fontes personalizadas em seus projetos.

Às vezes isso é fácil. Por exemplo, se você trabalha com algo como Google Web Font, pode copiar facilmente o código necessário para colar em sua folha de estilo.

Muitas vezes, o código se parece com isso :

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

E então você pode usá-lo em sua folha de estilo assim :

font-family: 'Roboto', sans-serif;

Mas e se alguém fornecer a você um conjunto de fontes que deseja usar em seu projeto que estejam em formato de arquivo e que não estejam hospedados em algum tipo de rede de entrega de conteúdo?

Fontes personalizadas em plugins do WordPress

Primeiro, vale a pena notar que, para usar determinadas fontes em seus projetos, elas precisam estar sob uma licença específica. Este não é o post que discutirá os vários tipos de licenciamento, mas certifique-se de ter permissão para a fonte.

Em segundo lugar, observe que existem diferentes formatos de fontes. No exemplo abaixo, você verá que estou usando o formato OpenType. A versão TL;DR disso é a seguinte:

O formato OpenType é um superconjunto dos formatos de fonte TrueType e Adobe® PostScript® Type 1 existentes. Ele permite portabilidade aprimorada de documentos entre plataformas, suporte linguístico avançado, recursos tipográficos poderosos e requisitos simplificados de gerenciamento de fontes.

Se você estiver interessado, você pode ler mais aqui.

Terceiro, quando se trata de trabalhar com essas fontes, folhas de estilo e incorporá-las no contexto de um plug-in do WordPress, acho importante – como qualquer outra coisa – manter as coisas organizadas.

Organizando fontes dentro de um plugin

Dentro do diretório assets, normalmente tenho um diretório css e js. Às vezes, isso também inclui imagens e, neste exemplo, também inclui fontes.

Uma vez que as fontes são colocadas no diretório apropriado, é muito fácil incluí-las em sua folha de estilo. Primeiro, você os define assim :

@font-face {
    font-family: GothamLight;
    src: url("../fonts/Gotham-Light.otf") format("opentype");
}

@font-face {
    font-family: ThirstyScriptMedium;
    src: url("../fonts/ThirstyScriptMedium.otf") format("opentype");
}

E então você pode usá-los (junto com um fallback adequado) assim :

#search_keywords {
    background: #ffffff;
    color: #151335;
    font-family: 'GothamLight', sans-serif;
}

Para ser completo, vale a pena notar que você simplesmente conecta as folhas de estilo como faria com qualquer outro em um plugin:

<?php

add_action('wp_enqueue_scripts', 'acme_enqueue_styles');
/**
 * Registers the stylesheet for the Acme Plugin Styles.
 */
function acme_enqueue_styles()
{
    wp_enqueue_style(
        'acme-visuals',
        plugin_dir_url(dirname(__FILE__)).'assets/css/public.css',
        [],
        rand(),
        'screen'
    );
}

Isso é tudo.

Uma postagem simples

Claro, tudo isso é fácil de acompanhar, mas os principais pontos que valem a pena notar são:

• não use fontes ilegais,
• organizar seus bens,
• defina-os e, em seguida, use-os junto com um fallback adequado.

E é isso.