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!