Como adicionar Google Font no WordPress (corretamente)

O WordPress indica que todos os scripts e styles sejam adicionados com as funções wp_register_script() e wp_register_style() respectivamente. Elas são responsáveis por pré-registrar seus scripts, e para adicioná-los a fila de scripts carregados, usamos as funções wp_enqueue_script() e wp_enqueue_style() que organizam a fila de scripts e os imprimem no header ou no footer de acordo com os argumentos passados na função.

Fazendo isso com essas funções, e no functions.php, temos um controle maior sobre onde e quando os carregamentos devem acontecer, e assim evitar de misturar isso diretamente no header.php.

Portanto, podemos simplificar e usar diretamente as funções enqueue’s. Vamos então apresentar um exemplo de como adicionar uma Google Font, o código fornecido pelo Google:

Deve ser aplicado com wp_enqueue_style() da seguinte forma:

wp_enqueue_style( 'open-sans', '//fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,700,700italic', array(), null, 'all' );

Para mais detalhes sobre a função wp_enqueue_style() confira a documentação aqui.

Pronto, com isso temos carregado em nosso WordPress a fonte escolhida, nesse exemplo usei a Open Sans. Agora, onde deseja aplicar essa font, coloque em seu CSS o seguinte trecho (também fornecido pelo Google no momento que escolhe a fonte:

font-family: 'Open Sans', sans-serif;
Publicado em Dicas e Truques WordPress por Everaldo Matias. Marque Link Permanente.

Sobre Everaldo Matias

Sou grafiteiro e formado em design gráfico. Trabalho desde 2010 com WordPress e sou sócio fundador da Brasa. Colaboro com a Comunidade Brasileira de WordPress, onde sou moderador do fórum de suporte e participo da organização dos WordCamps de São Paulo. Na Brasa trabalho principalmente com desenvolvimento e implementação de sites em WordPress. Escrevo frequentemente posts sobre o assunto onde abordo tendências, ferramentas e tutoriais.

2 ideias sobre “Como adicionar Google Font no WordPress (corretamente)

  1. Grande Everaldo.

    Estou criando um tema do zero, e seguindo suas dicas, ao fazer um teste vi que a fonte não carrega no firefox. Saberia dizer se tem algum truque para isso?

    • Olá Hleiton, tudo bem?
      Sem olhar o projeto fica difícil encontrar algum motivador dese conflito, mas o que pode estar acontecendo é alguma outra coisa estar bloqueando o carregamento no firefox.
      Será que você não teria mais detalhes do erro que está retornando pra você? Ele mostra alguma coisa (nas ferramentas do desenvolvedor do navegador) que possa indicar o motivo?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *