Como usar @font-face no blog via Google Drive

Tutorial HTML, CSS e Javascript

Atenção: Este tutorial não funcionará mais a partir de 31 de agosto de 2016 em virtude da desativação do sistema de hospedagem de sites no Google Drive :( Saiba mais sobre isso aqui.

Utilizar tipografia em um site se tornou praticamente uma regra para reforçar a identidade visual. Há alguns anos chegou o Cufon e foi um estouro! Entretanto, por ser um script muito pesado e transformando cada linha de fonte em imagem, ele acabava pesando demais no carregamento do blog. E logo em seguida veio o recurso do Google Fonts para nos salvar com uma série de fontes gratuitas para utilizarmos em nossos sites e blogs, e tudo carregando de forma rápida! Apesar deste último ser uma ótima ferramenta, ainda há fontes que gostaríamos de usar que ainda não estão presentes na biblioteca do Google. E para fazer isso utilizamos um método do CSS chamado @font-face.

Normalmente ele é muito usado no WordPress pois o certo de utilizar o @font-face é hospedando as fontes dentro da pastinha de nosso tema (ou seja, no mesmo servidor), e por isso é super comum vermos blogs em wordpress utilizando uma fonte mais "personalizada" no layout. Entretanto, para Blogger e Tumblr, como ambos não há como ter um gerenciador de arquivos (e o Upload Static File do Tumblr não permite utilização de fontes mais) o @font-face é — ou melhor, era depois de você ler este tutorial, hehe — muito difícil de ser usado pois não é qualquer servidor que permite que você hospede as fontes e as utilize como link externo no CSS. Isso acontece porque vários servidores possui diversos recursos de sergurança contra utilização indevida de arquivos que não seja no próprio servidor, e acaba que as extensões de fontes que utilizamos no font-face (.TTF, .EOT, .WOFF e .WOFF2) são bloqueadas para uso externo. Foi quando testei no lindo Google Drive e deu super certo! Veja o exemplo abaixo.

 

Exemplo de fonte hospedada no Google Drive!

 

Funciona no mesmo no blogger? *-*

Claro! Eu fiz um blogger de teste para testar e deu certo! Clique aqui e veja.

Por que dá certo no Google Drive, Ana?

Lembra que contei que nos servidor há diversos recursos de segurança para evitar o compartilhamento de arquivos fora do próprio servidor? O Google Drive é um servidor completamente ao contrário dos que são utilizados para sites. Ele é, em sua essência, um servidor para ser compartilhado. Não é à toa que podemos dar diversas permissões para os arquivos e pastas, bem como podemos acrescentar os e-mails de quem pode ter acesso, assim como podemos dar total acesso a toda web (que é o caso da pastinha onde hospedamos as fontes e o CSS do font-face). É por isso que podemos utilizar os recursos dele para hospedar itens fora de nossos blogs.

Então o Drive tem suporte ao HTML e CSS? Posso criar um site nele?

Sim, ele roda HTML normalmente! Mas ele só é habilitado para leitura de HTML puro, CSS e javascript. Ou seja, ele tem leitura apenas das linguagens de marcação e estilização. Ele não lê nenhum tipo de código dinâmico de postagem, como o PHP do wordpress, o XML do blogger ou as tags de posts do Tumblr. Portanto, ele NÃO serve para hospedar sites, mas sim para uso de arquivos mais pontuais — a não ser que o site seja feito em HTML purão, o que é bem chato e sem facilidade de gestão de conteúdo, pois o Drive não tem editor de HTML e CSS ou Javascript para serem editados lá no gerenciador de arquivos. O arquivo sempre precisa ser "reupado" e excluir a versão antiga (ou então atualizar o arquivo com o Drive sincronizado com o seu computador).


Para utilizar corretamente o @font-face você precisa ter várias extensões de fontes para ser lidas em vários navegadores.

  • Mozilla Firefox, Google Chrome, Safari e Opera: .TTF (True Type Font)
  • Internet Explorer: .EOT (Embed Open Type)

Há outras extensões que também são usadas caso alguma acima não seja lida por algum motivo pelo navegador, como a extensão .SVG, .WOFF e .WOFF2, e utilizando o Webfont Generator do site Font Squirrel nós conseguimos gerar todas estas extensões de fontes e aplica-las no CSS. Vamos ver como faz?

1) Download da fonte

Faça o download da fonte desejada e descompacte a pasta da fonte. Eu utilizei a Channel como exemplo.

 

Channel{

 

2) Upload da fonte no gerador webkit

Verifique quantas variações de fonte possui a fonte que você baixou. Por exemplo, a Chanel veio com 4 variações e por isso farei upload destes 4 arquivos para ter o pacote completo dela em meu CSS. Acesse o Webfont Generator do site Font Squirrel e faça o upload das fontes.

Fonte-face - Upload das variações de fonte

Não esqueça de sempre marcar a opção "Yes, the fonts I'm uploading are legally eligible for web embedding". Isso significa que você está alegando que as fontes que você está utilizando são legalmente usadas para a web.

3) Organizando os arquivos

Quando você fazer o download da pasta e terminar de descompactar notará uma bagunça danada, haha. Veja abaixo o tanto de arquivo que veio através daquelas simples 4 variações de fontes de fizemos o upload.

Para não deixar seus arquivos soltos lá no servidor, você organizará eles em uma pasta chamada fontes, da qual vc colocará todos os arquivos e fará o seguinte:

  1. excluirá a pasta specimen_files (esta pasta é apenas de apresentação da fonte);
  2. excluirá os arquivos generator_config.txt e todos os .html demo da pasta;
  3. e renomeará o arquivo stylesheet.css para fontface.css.

O final ficará mais ou menos desta forma a organização:

tutorial-fontface4

Com os arquivos organizados desta forma em uma única pastinha você somente irá fazer o upload tudo de uma vez e depois só importar a url do fontface.css (pois o CSS já estará com o caminho da pasta automaticamente).

4) Upload da fonte no Google Drive

Normalmente você já tem uma conta no Google Drive se você possui um email Gmail, mas se não, basta fazer sua conta e, depois de logar, você já terá acesso a interface que te dá acesso aos arquivos.

tutorial-fontface-google-drive

Crie uma pastinha com o nome fontface (ou qualquer outro nome que você ache ache melhor para se organizar) e lá você faz o upload de todas as variações das fontes, extensões, bem como o arquivo .css que você está usando o @font-face.

tutorial-fontface-google-drive2

5) Atribuindo permissões à pasta

Por padrão, todos os arquivos do Drive são privados e vistos somente por você. É importante atribuir a permissão livre para toda a web nas pastas com os arquivos que você usará no blog. Sem a permissão pública suas fontes jamais poderão ser interpretadas no layout.

Primeiramente deixe selecionado a sua pasta e clique no ícone de compartilhamento que fica no canto superior direito da página. Em seguida, abrirá a janela de permissões e você clicará em Advanced. Logo depois você trocará a permissão Private para On – Public on the web, com o acesso apenas para visualização. Veja abaixo o passo a passo.

tutorial-fontface-google-drive3

Botão de compartilhamento

tutorial-fontface-google-drive6

Clicar em Advanced

tutorial-fontface-google-drive4

Clicar em Change

tutorial-fontface-google-drive5

Modo público para web com acesso de visualização, apenas (jamais edição!)

6) Pegando o link público do CSS

Agora que sua pasta está pública, você precisará pegar o link do seu arquivo fontface.css. Volte às opções de compartilhamento da pasta e pega a ID da mesma.

tutorial-fontface-google-drive7

A ID é o código que virá depois de folderview?id= e antes de &usp=sharing. Copie esta ID e cole na frente da URL http://googledrive.com/host. Esta URL + ID da pasta + fonface.css vão gerar a URL direta do seu CSS.

Ficou confuso? Veja como ficou com a minha pasta compartilhada:

  1. Minha URL de compartilhamento:
    https://drive.google.com/folderview?id=0B8BcPDHD2O_WfnJHMno3RlM5Q1RhSllaalpheGN2OWdQd2MwaG4tcTAyZl9UanRMcFpNbHc&usp=sharing
  2. Minha ID (através da url acima, em negrito):
    0B8BcPDHD2O_WfnJHMno3RlM5Q1RhSllaalpheGN2OWdQd2MwaG4tcTAyZl9UanRMcFpNbHc
  3. Como coloquei para gerar o link:
    http://googledrive.com/host/0B8BcPDHD2O_WfnJHMno3RlM5Q1RhSllaalpheGN2OWdQd2MwaG4tcTAyZl9UanRMcFpNbHc/fontface.css
  4. Minha URL gerada pelo Google Drive:
    http://154d1481189e2143a46dbb14624ec6fc31dd08a0.googledrive.com/host/0B8BcPDHD2O_WfnJHMno3RlM5Q1RhSllaalpheGN2OWdQd2MwaG4tcTAyZl9UanRMcFpNbHc/fontface.css

A url que você deverá usar será a que o drive for gerar no item 4 acima.

7) Importando CSS

Agora que já gerou o link público, você chamará o fontface.css em seu blog através do seguinte código. Coloque-o dentro da tag <head>.

<link rel="stylesheet" href="//154d1481189e2143a46dbb14624ec6fc31dd08a0.googledrive.com/host/0B8BcPDHD2O_WfnJHMno3RlM5Q1RhSllaalpheGN2OWdQd2MwaG4tcTAyZl9UanRMcFpNbHc/fontface.css" type="text/css" media="screen" />

Outra forma de importar o CSS

Você também pode optar por utilizar o método @import do CSS ao invés de importar pela tag <link> acima. Vá no local onde está a sua folha de estilo do layout e na primeira linha coloque:

@import url(//154d1481189e2143a46dbb14624ec6fc31dd08a0.googledrive.com/host/0B8BcPDHD2O_WfnJHMno3RlM5Q1RhSllaalpheGN2OWdQd2MwaG4tcTAyZl9UanRMcFpNbHc/fontface.css);

Lembrando que as URLs acima estão com o meu caminho de exemplo deste tutorial. Você deverá trocar para a URL que o Drive for gerar para você.

Por que o caminho da url está sem o "http", Ana?

Isso acontece porque o protocolo do Google Drive é https, um protocolo usado em sites que exigem uma seguranca mais avançada (como por exemplo: lojas virtuais, sites com áreas retritas e sites de compartilhamento seguro como Dropbox, Copy e o próprio Drive), enquanto nossos blogs e a maioria dos sites e portais normalmente utilizam o protocolo comum http. Por ter essa diferença de protocolo, o arquivo importado do Drive tem grandes chances de não ser lido. Através da retirada da especificação de protocolo este conflito é evitado e ele será lido normalmente.

8) Aplicando fonte

Agora que suas fontes e CSS estão devidamente importadas, em seu computador em um programa de edição de texto (como o Bloco de notas do Windows, Dreamweaver, Notepad ++, Sublime Text etc) você abrirá o seu arquivo fontface.css e pegará o nome da variação da fonte que desejar usar. O exemplo abaixo é uma parte do @font-face do arquivo da fonte Chanel que fiz upload para este tutorial

tutorial-fontface7

Para aplicar esta minha fonte em um título de cabeçalho <h1>, por exemplo, é só aplicar o nome da fonte em font-family em seu CSS.

/*titulo*/
h1 {font-family: 'channel_left-slantedregular', sans-serif;}

Sobre as fontes pagas

O único problema do @font-face é que ele não dá proteção alguma para as fontes que você comprou pois ele precisa ter o link direto da fonte no CSS. Eu infelizmente sofri isso da pior maneira, mas infelizmente não podemos fazer nada a respeito, a não ser procurar utilizar fontes gratuitas o máximo possível.


Você pode utilizar o fontface para qualquer item em seu CSS para o layout do seu blog. Eu só ainda recomendo que utilize o Google Fonts para os textos densos como posts, páginas e coluna lateral do blog porque as fontes do Google são muito mais leves e, quanto mais font-faces usamos, mais pesado fica o carregamento do blog. O correto é usar com moderação. ::cool::

Espero que este tutorial te ajude bastante! Alguma dúvida? Pode perguntar! ^^

Veja também...

Além da Henna: Como ter reflexos dourados com Cassia Obovata
As ilustrações de Pauline (a.k.a. Punziella)
Dica de série: Anne with an E, da Netflix

24 Comentário(s)

(24 pelo blog e pelo facebook)