Quando se trata de hospedagem e uso de fontes no seu site WordPress, há muitas opções diferentes. Você pode hospedá-las localmente, você pode usar as fontes do Google (a maioria dos temas atualmente tem as fontes do Google integradas), ou utilizar outro serviço de terceiros como o Adobe Fonts. Hoje queremos mergulhar em algumas das razões pelas quais hospedar fontes locais no WordPress pode ser vantajoso. Você não só pode ter uma seleção maior de HTML fontes, mas às vezes há benefícios de desempenho para isso também. Confira nosso tutorial detalhado abaixo sobre como hospedar suas fontes premium localmente, bem como qualquer família de fontes do Google.
- O que são fontes da Web?
- Acolhendo Fontes Locais vs 3ª Parte
- Como Hospedar Fontes Locais no WordPress
O que são Fontes da Web?
Quando você navega para o site WordPress de alguém, você vê dois tipos de fontes básicas, fontes seguras da web ou fontes da web. Ou também podem estar a usar uma mistura de ambos.
Leitura sugerida: Como mudar a fonte no WordPress.
- Fontes seguras para a Web são fontes pré-instaladas em um dispositivo ou sistema operacional. Alguns exemplos de fontes seguras na web incluem Arial, Times New Roman e Courier New, bem como famílias de fontes genéricas como serif, sans-serif (ver fontes modernas) e monospace. Estas são fontes que você tem visto por muitos anos. Veja uma lista completa de fontes seguras na web.
- As fontes Web são fontes que não estão pré-instaladas num dispositivo e devem ser descarregadas pelo browser do utilizador antes de serem apresentadas. Alguns exemplos de fontes web incluem a fonte Open Sans e Roboto do Google, bem como a popular fonte Proxima Nova da Adobe Fonts.
Google Fonts é um diretório de fontes de código aberto que se tornou amplamente utilizado nos últimos dois anos. De acordo com o BuiltWith, mais de 45% dos 10.000 maiores sites estão a utilizar as fontes do Google nos seus sites. E se olharmos para a análise do Google Fonts, podemos ver que eles já tiveram mais de 17 quadriliões de visualizações. Isso é muito! Open Sans e Roboto são as suas duas famílias de fontes mais utilizadas, com Roboto a registar um crescimento de 77% no último ano. Nós temos um post sobre as melhores fontes do Google, não deixe de dar uma olhada: 15 Melhores Fontes Google pelos Números.
Acolhendo Fontes Locais vs 3ª Parte
Antes de mergulharmos no tutorial, é importante entender algumas das vantagens e desvantagens entre hospedar fontes locais e simplesmente usar um serviço de terceiros. Hospedar fontes localmente significa que você realmente tem os arquivos de fontes no seu próprio servidor (e ou copiados para o seu CDN que você também usa para todos os seus outros ativos). Enquanto que se você usar uma terceira parte, como Google Fonts ou Adobe Fonts, você está simplesmente incluindo as fontes através de um link para um ativo externo.
Vantagens das Fontes Locais
1. Seleção mais Ampla de Fontes
Uma grande vantagem de usar fontes locais é que você tem uma seleção muito mais ampla de fontes! Embora serviços de terceiros como o Google Fonts e Adobe Fonts tenham grandes bibliotecas, eles não se comparam a lojas de fontes premium nas quais você pode comprar qualquer fonte premium da web que quiser e hospedá-la no seu site. Na verdade, estaremos usando uma fonte premium em nosso tutorial abaixo da qual você não pode obter de nenhum serviço de terceiros.
2. Poderia Integrar Melhor
Devido à maior seleção de fontes, hospedá-las localmente pode permitir que você escolha uma fonte que se integre melhor com sua marca para manter a consistência em todo o site. Tudo isto depende das suas necessidades e preferências em termos de design.
3. Não é Necessário Contar com os Serviços de Terceiros
Quando você hospeda fontes localmente, você não precisa confiar em serviços de terceiros ou em seus servidores. Serviços como o Adobe Fonts (anteriormente Typekit) são conhecidos por serem descidos, o que, por sua vez, faz você parecer mal. Ter menos dependências no seu site WordPress é sempre melhor.
When https://t.co/Kde0okKlP0 is down the web stops working #customfontssuck #3rdpartyjs
— Mark ⛔️🐝 (@markhealey) November 17, 2015
4. Controle Total Sobre o Caching
Ao utilizar fontes locais você tem controle total sobre o cache dos seus arquivos de fontes. Se você estiver usando as fontes do Google ou outro serviço de terceiros, você pode ver erros ou avisos de que os recursos estão faltando um validador de cache ou que eles exigem cabeçalhos expirados. Estes são fixados no nível do servidor, e quando estão em um servidor de terceiros você não tem controle sobre a sua fixação.
5. Menos Pedidos Podem Igualar Tempos de Carga Mais Rápidos
Devido ao fato de as fontes web terem de ser descarregadas de terceiros, isto pode, por sua vez, ter um impacto na velocidade de carga do seu site. Nunca se sabe a rapidez com que os seus servidores estão a funcionar no momento dado. No entanto, você tem mais controle sobre isso com seu host WordPress, ou deveria! Adobe Fonts, por exemplo, adiciona 2 solicitações HTTP externas e também codifica todos os formatos de fonte na base64. Se você não está familiarizado com fontes que você não precisa mais servir todos os formatos de fonte, você só precisa de WOFF e WOFF2 (se você está indo para compressão extra).
Com o Google Fonts você também tem um pedido DNS extra para procurar fonts.googleapis.com para pegar o arquivo CSS. Você então tem pedidos adicionais ao fonts.gstatic.com para baixar os arquivos de fontes. Quando você hospeda localmente todas as solicitações são do mesmo domínio, e muito provavelmente você não precisará de outro arquivo CSS, pois ele estará dentro do arquivo CSS do seu tema do WordPress.
6. Conexão Única HTTP/2
Se você ainda não leu sobre as vantagens do HTTP/2, nós lhe pedimos que o faça. Ao hospedar suas fontes localmente, ou em seu CDN, você pode aproveitar uma única conexão HTTP/2 para um melhor paralelismo e multiplexação.
Desvantagens das Fontes Locais
Agora que superamos a vantagem das fontes locais, há também algumas desvantagens a serem observadas.
1. A Fonte do Google já pode ser Armazenada em Cache
O Google Fonts usa o seu próprio CDN, que é rápido, afinal de contas é o Google. Devido ao facto de tantos sites já utilizarem o Google Fonts, pode muito bem ser que o utilizador já tenha a fonte no cache do seu navegador. Se você usar uma fonte mais exclusiva e premium, ela pode aumentar o tempo de download. Por exemplo, se alguém visitar um site que utiliza a fonte Roboto do Google Fonts, ela será transferida para o seu cache. Se depois visitarem o seu website, que também usa Roboto, a fonte não precisará de ser descarregada novamente. Mas se você estiver usando uma fonte premium recém-lançada como Proxima Soft, muito provavelmente terá que fazer o download, o que pode possivelmente aumentar o tempo de carga.
A chave aqui é que se você vai usar uma fonte premium que não é muito usada, você provavelmente deve contar com o navegador dessa pessoa precisando baixá-la quando ela acessar seu site pela primeira vez. Nota: Se você usar uma fonte popular do Google e hospedá-la localmente, como o Roboto, isso não se aplica, pois o navegador é inteligente o suficiente para detectá-la no cache (seja ele carregando do Google ou localmente do seu site).
2. Mais Complexo
Nós percebemos que nem todos lá fora são gurus WordPress. Hospedar fontes locais definitivamente requer um pouco mais de configuração. Por exemplo, um tema do WordPress pode chamar o Google Fonts automaticamente em seu tema e se você hospedar fontes localmente você precisará descobrir uma maneira de desativá-las de serem chamadas em seu site. Isto pode implicar chegar ao seu desenvolvedor do tema para uma linha rápida de código. Isto pode parecer complicado, mas tentaremos explicá-lo da forma mais fácil possível no tutorial abaixo.
3. Mais Cuidados com a Escolha da Fonte
Quando você hospeda fontes locais, você tem que escolher quais tipos de fontes você quer suportar. Se você escolher apenas os formatos mais novos, como apenas WOFF2, você pode estar deixando de fora os navegadores mais antigos, que por sua vez, por padrão, seriam fontes antigas seguras para a web. Por exemplo, de acordo com o CanIUse, IE11, Safari e algumas versões do Android Browser podem ter problemas apenas com o uso de fontes web WOFF2. Portanto, você provavelmente vai querer usar WOFF + WOFF 2 para estar seguro em toda a linha. WOFF 2 oferece métodos de compressão muito mais elevados, é por isso que você gostaria de usar ambos.
Ao usar um serviço de terceiros, é quase impossível estragar tudo, pois eles são responsáveis por uma ampla gama de suporte de browser fora da caixa. Portanto, ao hospedar localmente, você tem que ter mais cuidado com a seleção do tipo de fonte.
4. Não o Faça sem o CDN
Muitos sites hoje estão usando um CDN como o Cloudflare ou KeyCDN para acelerar a entrega de seus ativos. Isto é importante, pois reduz a latência e os tempos de pesquisa DNS em toda a linha. Se você usa fontes locais, e não usa um CDN, você pode, na verdade, diminuir a velocidade do seu site em vez de usar um serviço como o Google Fonts ou o Adobe Fonts. A razão é que todos esses serviços utilizam um CDN para entregar as suas fontes. Por isso, recomendamos vivamente, a menos que só tenha tráfego para uma pequena área geográfica, utilize sempre um CDN se estiver a alojar as suas próprias fontes. E, claro, certifique-se de estar usando um provedor CDN que suporte HTTP/2.
Kinsta CDN suporta HTTP/2 e a largura de banda gratuita está incluída para todos os clientes. 🚀
Como Hospedar Fontes Locais no WordPress
Agora é a hora da parte divertida! Hospedando suas fontes locais no WordPress. Nós passamos por duas opções diferentes abaixo, uma é com uma fonte premium que compramos, e a segunda é realmente pegar uma fonte do Google e hospedá-la localmente. Neste tutorial, estamos usando uma nova instalação do WordPress com o tema Twenty Seventeen instalado.
1. Como Acolher Fontes Premium Localmente
Para hospedar uma fonte premium localmente, escolhemos ir com Fontspring e a nova fonte Proxima Soft, lançada em janeiro de 2017. Proxima Nova Soft, criado por Mark Simonson, é uma versão mais recente da fonte original Proxima Nova. Escolhemos a Fontspring porque não requerem scripts de rastreamento de terceiros, e a fonte é uma compra única que pode ser usada em um número ilimitado de sites. Tenha muito cuidado ao comprar fontes, pois muitas delas requerem scripts de rastreamento de terceiros, o que em algum grau derrota o propósito de hospedá-las localmente.
Compramos as fontes Proxima Soft Regular e Proxima Soft Bold. Geralmente um tipo de letra normal e negrito é suficiente para a maioria dos sites. Dependendo do seu site, você também pode querer obter uma versão em itálico e semibold. Nota: Nós não temos nenhum afiliado com Fontspring, nós simplesmente pensamos que eles fazem direito de compra e licenciamento de fontes premium!
Passo 1
Depois de comprar suas fontes, você receberá um e-mail com um link para os arquivos de fontes.
Passo 2
Cada versão de fonte, como bold e regular, terá seus próprios tipos de fonte, como WOFF2, WOFF, TTF, etc. Neste exemplo, vamos utilizar apenas as versões WOFF e WOFF2 do bold e bold regular, o que garante um suporte moderno e bem arredondado ao navegador.
Passo 3
Nós pegamos os arquivos de fontes e os carregamos via FTP em nosso site WordPress para uma pasta que criamos chamada “fontes”. Neste exemplo, estamos a utilizar um CDN para todos os nossos ativos, juntamente com o plugin CDN Enabler gratuito da equipa da KeyCDN. Este plugin copia automaticamente as fontes que acabámos de carregar para o nosso CDN. Mesmo que digamos que os hospede localmente, um CDN ainda está referenciando seus bens locais. A parte importante é que você está servindo todos os seus bens a partir do mesmo local, não referenciando múltiplos domínios (hosts).
Passo 4
Você terá a necessidade de referenciar suas novas fontes em CSS no seu site WordPress. Muitos temas têm um painel CSS personalizado hoje em dia, ou você pode usar um plugin gratuito como o Simple Custom CSS e JS. Vamos inserir o seguinte código, referenciando a nossa URL CDN.
@font-face {
font-family: 'proxima_softregular';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_softbold';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}Você também precisará atualizar seus estilos para apontar para a nova família de fontes. Aqui está um exemplo do código que usamos no tema dos Vinte e Dezassete.
body {font-family: 'proxima_softregular', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}Aqui está uma captura de tela do plugin Simple Custom CSS e JS.
Passo 5
Se o seu tema WordPress já tem o Google Fonts integrado nele, você vai querer garantir que você as desabilite. Caso contrário, poderá estar a carregar tanto as suas fontes locais como as fontes do Google. Como estamos usando o tema Twenteen neste tutorial, utilizamos o plugin gratuito Disable Google Fonts. Isto só funciona para os temas padrão no WordPress. Para a maioria dos temas, você provavelmente precisará chegar até o desenvolvedor e eles podem fornecer rapidamente uma função para desativar as fontes do Google. Ou verifique a documentação deles, normalmente este é um ajuste muito rápido. Alguns temas podem até ter a opção de ligá-los ou desligá-los no back-end.
E é isso! Aqui está um screenshot com o nosso novo carregamento de fonte Proxima Soft para a nossa fonte corporal e cabeçalhos sobre o tema Vinte e Dezassete.
E aqui está uma captura de tela dos nossos pedidos HTTP. Como pode ver, temos apenas 2 pedidos para as fontes WOFF2, em vez dos 4 pedidos do Google que mostrámos anteriormente. Também temos as fontes WOFF no site, mas como o Chrome suporta WOFF2, estas são puxadas em seu lugar. Se tivéssemos ido ao site com o IE 11, por exemplo, as fontes WOFF teriam sido carregadas em seu lugar.
2. Como Hospedar Fontes do Google Localmente
A segunda maneira de hospedar fontes localmente é realmente usar uma fonte que você já gosta no Google Fonts e simplesmente movê-la para o seu servidor ou CDN. O Open Sans é conhecido por ser muito leve e super rápido. Por isso, vamos usar isso no nosso exemplo.
Passo 1
A melhor maneira de pegar o Google Fonts é usar a ferramenta gratuita google-webfonts-helper, que estamos usando para este tutorial. Você também pode querer dar uma olhada no projeto Font Face Observer. A primeira coisa que você precisa fazer é pesquisar a fonte Google Font que você quer e selecionar os estilos. Escolhemos novamente os estilos de fonte regulares e ousados (700).
Passo 2
Então você precisará escolher que suporte de navegador você quer. Os browsers modernos darão as fontes WOFF e WOFF2, que é o que nós queremos. O melhor suporte dá WOFF, WOFF2, EOT, TTF, e SVG. Como pode ver, dá-lhe o código que pode copiar para a sua área de transferência, bem como o zip de download que contém as fontes.
O resto das instruções são então muito semelhantes às nossas fontes premium exemplo acima.
Passo 3
Nós pegamos os arquivos de fontes e os carregamos via FTP em nosso site WordPress para uma pasta que criamos chamada “fontes”. Neste exemplo, estamos a utilizar um CDN para todos os nossos ativos, juntamente com o plugin CDN Enabler gratuito da equipa da KeyCDN. Este plugin copia automaticamente as fontes que acabámos de carregar para o nosso CDN. Mesmo que digamos que os hospede localmente, um CDN ainda está referenciando seus bens locais. A parte importante é que você está servindo todos os seus bens a partir do mesmo local, não referenciando múltiplos domínios (hosts).
Passo 4
Você terá a necessidade de referenciar suas novas fontes em CSS no seu site WordPress. Muitos temas têm um painel CSS personalizado hoje em dia, ou você pode usar um plugin gratuito como o Simple Custom CSS e JS. Vamos inserir o seguinte código, referenciando a nossa URL CDN.
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}Você também precisará atualizar seus estilos para apontar para a nova família de fontes. Aqui está um exemplo do código que usamos no tema dos Vinte e Dezassete.
body {font-family: 'Open Sans', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}Aqui está uma captura de tela do plugin Simple Custom CSS e JS.
Passo 5
Se o seu tema WordPress já tem o Google Fonts integrado nele, você vai querer garantir que você as desabilite. Isto pode parecer um pouco irónico, uma vez que estamos a usar fontes do Google. Mas a razão pela qual você precisa fazer isso é para desativar os pedidos externos. Como estamos usando o tema Twenteen neste tutorial, utilizamos o plugin gratuito Disable Google Fonts. Isto só funciona para os temas padrão no WordPress. Para a maioria dos temas, você provavelmente precisará chegar até o desenvolvedor e eles podem fornecer rapidamente uma função para desativar as fontes do Google. Ou verifique a documentação deles, normalmente este é um ajuste muito rápido. Alguns temas podem até ter a opção de ligá-los ou desligá-los no back-end.
E é isso! Aqui está uma imagem da nossa nova fonte Google Open Sans para o carregamento da nossa fonte corporal e cabeçalhos sobre o tema Vinte e Dezassete.
E aqui está uma captura de ecrã dos nossos pedidos. Como pode ver, temos apenas 2 pedidos para as fontes WOFF2, em vez dos 4 pedidos do Google que mostrámos anteriormente. Também temos as fontes WOFF no site, mas como o Chrome suporta WOFF2, estas são puxadas em seu lugar. Se tivéssemos ido ao site com o IE 11, por exemplo, as fontes WOFF teriam sido carregadas em seu lugar.
Resumo
E é isso! Agora você sabe como hospedar fontes locais de uma loja de fontes premium ou mover fontes do Google para o seu próprio servidor e ou CDN. Então agora você pode ir dar uma olhada em todas as lindas fontes lá fora, sem se preocupar tanto sobre como elas afetam o desempenho. Eles podem simplesmente dar ao seu site WordPress o facelift que ele precisa (não deixe de ler o nosso guia detalhado sobre fontes WordPress)! E se você está curioso porque não estamos usando fontes locais, isso é porque estamos trabalhando em um novo design de website, então podemos estar num futuro próximo. Outra grande alternativa a ser estudada são as fontes do sistema.
Adoraríamos saber qual é o seu esquema. Você está usando um serviço de terceiros para carregar suas fontes da web e já tentou hospedar locais?
Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.
Deixe um comentário