Google Web Fonts no Magento

Nesse post vamos aprender duas coisas distintas. Uma é como inserir folhas de estilos (css) externos ao site usando o backend. E outra é como alterar a fonte das páginas, utilizando o Google Web Fonts.

Até algum tempo atrás, sempre que os webdesigners queriam alterar o estilo de fonte das páginas eram usados imagens, principalmente em títulos e no nome do site.

O problema em utilizar imagens, é que o texto não é indexado pelos mecanismos de busca, qualquer alteração depende de uma edição no photoshop, além de deixar a página mais pesada ao carregar imagens de texto.

Alguns sites passaram a fazer essa modificação pelo CSS, mas era preciso enviar o arquivo da font (ttf, otf, eot) para o servidor, e mesmo assim nem todos os navegadores conseguiam interpretar a fonte.

Conhecendo o GWF

O CSS3 promete resolver esse problema. Mas enquanto isso não se torna uma realidade, a google lançou um projeto chamado Google Web Fonts (GWF). Um site onde você escolhe o tipo de fonte que deseja utilizar, e ele gera um css pra inserir no seu site, simples assim.

O site conta com mais de 600 tipos de fontes, todas open-source e liberadas para uso. Possui diversas opções de configurações e filtros de pesquisa. Particularmente, falando como desenvolvedor, eu achei muito legal.

Escolhendo uma fonte pro site

Vamos alterar algumas fontes da sua loja? Entre no site www.google.com/fonts e escolha a fonte mais legal que encontrar.

Depois que fizer sua escolha, basta clicar no botão “Quick Use“. E uma nova tela será apresentada, exibindo dados de performance/impacto, opções de importação para sua página, e por fim, um exemplo de como aplicar os estilos no seu código.

Neste exemplo vamos manter a simplicidade e optar pelo modelo “Standard“.

Adicionando CSS externo no Magento

Agora vem a parte mais difícil deste post, e que gera a maior dúvida nos desenvolvedores Magento. Abra seu backend e acesse:

Sistema > Configuração > Geral > Visual [ Cabeçalho HTML ]

E no campo “Outros Scripts” você cola o código fornecido pelo google.

Basta salvar e ir para a última etapa.

Aplicando o efeito nas páginas

Agora basta abrir sua folha de estilos, o padrão do Magento é o styles.css que fica em:

skin > frontend > default > default > css > styles.css

Dica! Se você estiver usando um template customizado, altere o diretório default/default pelo nome do seu template/tema.

Aqui neste exemplo eu vou alterar o título dos produtos na página de visualização do produto. Então basta eu adicionar o elemento font-family à classe que eu desejo alterar:

.product-view .product-shop .product-name h1 { font-family: 'Herr Von Muellerhoff', cursive; }

Salvar o arquivo e atualizar a página. Lembrando que você deve atualizar o cache do Magento e do navegador.

Espero que você faça bom uso dessa dica. Evite utilizar uma diversidade enorme de estilos na mesma página, procure manter algo em torno de 3 (três) fontes diferentes (para títulos, textos, e destaques).

Sucesso!