Como utilizar qualquer fonte em sua página com Cufon

utilizar-qualquer-fonte-pagina-cufon

O Cufon é uma API que tem como função substituir fontes em javascript, o que é uma mão na roda para resolver o problema de fontes utilizadas em seu site, uma vez que bastam dois arquivos e pequenas configurações para deixá-lo redondo.

De maneira rápida e robusta, o Cufon uma solução sem o uso de plugins, possibilitando ainda a liberdade de definir diferentes estilos para o texto substituído, através de CSS.

Vejam na prática como funciona em nosso site. O menu lateral foi feito utilizando Cufon.

COMO UTILIZAR?

Primeiramente, é necessário baixarmos o cufon-yui.js, que é quem faz toda a mágica. Basta fazer o download o arquivo no site do projeto ( Opção “Download” do Menu), colocar o arquivo sem seu site e declará-lo:

Em seguida, é hora e utilizarmos o gerador, também no site, para que a fonte desejada seja convertida. O gerador criará um arquivo de fonte SVG e salvá-lo em um arquivo JS. Deveremos selecionar a fonte a ser utilizada, selecionar os caracteres a serem usados, recomendável selecionar a opção “All”(Todos), ler os “Terms” e selecionar “I acknowledge and accept these terms” e, por fim, no final da página clicar em “Let’s do this”. Será gerado um arquivo “.js”, faça o download dele.

Nota: A fonte a ser convertida não pode estar na pasta “Fonts”. Copie a fonte para outro local e selecione de lá.

Com o download feito, esse arquivo precisa ser incluído em outro script após o Cufon:

Agora é o momento de substituir o texto desejado. Iremos utilizar a seguinte função:

Com esta função, o Cufon se encarregará de substituir toda tag h1 de seu site e converter para a fonte declarada.

Podemos trabalhar melhor estas substituições, especificando pontos específicos a serem substituídos. Podemos utilizar para isso Id’s e Classes do Css por exemplo:

Dessa maneira, a substituição deixa de ser em todo o documento, e passa para os campos desejados.

Além disso o Cufon possibilita a substituição de mais de uma fonte, como no exemplo:

Sempre lembrando que é necessário declarar todos os arquivos js de fontes que serão utilizadas no seu site.

Qualquer dúvida, pode consultar a rica documentação do Cufon em http://wiki.github.com/sorccu/cufon/, ou deixe seu comentário no post.

Até a próxima!

49 Comentários
  • Douglas Castanheira

    5 de agosto de 2010, 15:23

    Qual a diferença para o uso de @font-face?

  • Hugo Magalhães

    5 de agosto de 2010, 15:34


    Douglas Castanheira:

    Qual a diferença para o uso de @font-face?

    Douglas,

    O cufon, apesar de ser mais pesado, tem mais compatibilidade com todos os browsers. Porém, se você vai desenvolver sem restrição de usar CSS3 e para browsers mais novos, utilize o @font-face que é mais leve e gasta menos recurso.

    Outra vantagem do cufon é que ele apresenta o efeito de anti-alias no texto. 😉

    Abraços!

  • Leidiane Oliveira

    10 de agosto de 2010, 16:59

    “Outra vantagem do cufon é que ele apresenta o efeito de anti-alias no texto. 😉 ”

    Vantagem que joga o font-face pra escanteio.
    Inpossivel usar uma fonte serrilhada num layout :/

  • Hugo Magalhães

    23 de agosto de 2010, 16:40


    Leidiane Oliveira:

    “Outra vantagem do cufon é que ele apresenta o efeito de anti-alias no texto. ;)

    Vantagem que joga o font-face pra escanteio.
    Inpossivel usar uma fonte serrilhada num layout :/

    Leidiane, concordo com você. O efeito de anti-alias do cufon é realmente fantástico. Mas acredito que dependendo do contexto (caso você realmente não precise de um texto que parece uma imagem editada, como nos títulos de notícias em grandes portais) o anti-alias não faria tanta diferença. O importante é pesar o que realmente atenderá melhor a necessidade do site onde a técnica será usada! 😉

    Grande abraço.

  • Gustavo

    24 de agosto de 2010, 14:28

    não consegui usar o line-height!

    o engraçado é que funciono só no ie6 e ie7

    mas no firefox, chrome, opera e safari não.

    se alguem me ajudar eu fico muito agradecido
    =]

  • Rodrigo

    13 de setembro de 2010, 10:57

    Bom dia! É importante mencionar que este método não é vantajoso quando da utilização de fontes populares reconhecida por diversos navegadores e presentes em todos os s.o (tahoma, verdana e etc)

  • Guilherme

    16 de setembro de 2010, 12:55

    Gostaria de saber se eu tenho que pagar para usar as fontes como Myriad_Pro por ex? e como funciona o esquema de licença de fontes.

    vlw galera…otimo tuto!!

  • Brício Fernandes

    17 de setembro de 2010, 09:45


    Rodrigo:

    Bom dia! É importante mencionar que este método não é vantajoso quando da utilização de fontes populares reconhecida por diversos navegadores e presentes em todos os s.o (tahoma, verdana e etc)

    Rodrigo, acho que esta sua dica não faz muito sentido, pois o cúfon tem um objetivo claro, que é poder utilizar fontes ‘não populares’ para rodar nas máquinas. Então a pessoa não precisará usar esse recurso com fontes padrões, a não ser que ela goste de perder tempo com coisas simples como essa.

    Vlew!

  • Victor mangia

    10 de novembro de 2010, 14:25

    use o cabeçalho


    Gustavo:

    não consegui usar o line-height!
    o engraçado é que funciono só no ie6 e ie7
    mas no firefox, chrome, opera e safari não.
    se alguem me ajudar eu fico muito agradecido
    =]

  • Vinicius

    14 de dezembro de 2010, 10:24

    E em questão dos acentos ? é a font que estou utilizando ou ainda não suporta ?

    • Hugo Magalhães

      14 de dezembro de 2010, 10:28

      Vinicius,

      Para os acentos, você precisa utilizar uma fonte que tenha a acentuação, e quando for gerar a fonte no cufon, marcar a opção de “Basic Latin punctuation”! 😉

      Abraços,

  • André Rossi

    13 de janeiro de 2011, 08:10

    Bom dia!
    Estou com problemas quando faço a substituição de classes CSS no IE Cufon.replace(‘.cufon-titulo’); por exemplo. Se eu substituir por qualquer outra coisa (H1, Div) funciona perfeitamente. No FF funciona de qualquer forma.
    Tem alguma coisa diferente para o IE que eu tenha que fazer pra funcionar a alteração de classes css?
    Obrigado

  • Jocimar

    17 de janeiro de 2011, 17:57

    Parece interessante, mas existe o problema dos buscadores não reconhecerem as palavras como texto, prejudicando o SEO. O mecanismo de renderização é escrito em Javascript, e motores de busca não lêem o Javascript.

  • Luís Henrique

    23 de janeiro de 2011, 03:53


    Hugo Magalhães:


    Douglas Castanheira:

    Qual a diferença para o uso de @font-face?

    Douglas,
    O cufon, apesar de ser mais pesado, tem mais compatibilidade com todos os browsers. Porém, se você vai desenvolver sem restrição de usar CSS3 e para browsers mais novos, utilize o @font-face que é mais leve e gasta menos recurso.
    Outra vantagem do cufon é que ele apresenta o efeito de anti-alias no texto.
    Abraços!

    Não sei não, mas uso o @font-face e funciona em todos os browsers a partir do IE-7. No IE-6 não testo, pois ainda não fiz um projeto que levasse em consideração, por questões conhecidas. E também não tive problemas com letras serrilhadas. Talvez ainda não tenha usado uma font que tende a ter esse efeito. Não conhecia esse cufón e continuo não vendo, até agora, um bom motivo para usar. Mas a post está bacana.

  • André Bertotti

    1 de março de 2011, 14:27

    Grato pela dica e
    Parabéns pelo site

    Coridalmente,

  • Luizz

    15 de março de 2011, 15:45

    O cufón seria SVG ‘vetor’, da uma difierença enorme.

  • Lia

    8 de abril de 2011, 19:00

    Resolveu meu problema, obrigada!
    Por favor, nunca tire essa página do ar =D

  • Guilherme Ventura

    15 de abril de 2011, 15:49

    Vinicius, no caso apenas o Basic Latin punctuation não resolverá seu problema, você além desta opção deverá selecionar a opção “Latin-1 Suplement” .

    att

  • Fernanda

    19 de abril de 2011, 14:42

    Uso o Joomla, e esse tutorial funcionou perfeitamente.

    O único problema é que o texto deixa de ser selecionável, fica como se fosse imagem!
    Alguém sabe o por quê, e como se resolve isso?

  • Scott

    6 de maio de 2011, 11:09

    Masterwork!!! Salvou minha vida ^^

  • Maysa

    9 de maio de 2011, 23:18

    Você é um anjo 🙂

    Muito obrigada!

    Maysa

  • Jean

    15 de maio de 2011, 15:09

    Fiquei curioso pra saber como funcionava esse cufon…
    Fonte serrilhada para título é #foda mesmo!

  • Evandro

    16 de junho de 2011, 10:00

    Implemento a fonte, mas nao funciona os paragrafos???

  • Sergio Sena

    27 de julho de 2011, 05:28

    Ainda bem que a Microsoft começou a desenvolver seu IE mais amigável para CSS. Quando todos os browsers usarem um só padrão CSS esses probleminhas com fontes serão resolvidos. Mas enquanto essa era não chega, VIVA O CUFÓN! Rsrsrsrs

    abraços.

  • André Darugna

    8 de agosto de 2011, 16:47

    Excelente! Muito útil, utilizei e deu tudo certo 🙂
    Obrigado!

  • Filipe

    4 de outubro de 2011, 01:13

    Pessoal acho bacana utilizar Cufon, porém acho que Font-face é bem mais leve, e SIIIM funciona no IE6 e IE7, basta apenas ter uma font no formato .eot . Existe um site que acho que iria economizar um P tempo para todos!
    http://www.fontsquirrel.com/fontface/generator
    Ele gera um arquivo para vc utilizarem em todos os browsers (Opera, FF, Chrome, Safari e IE).
    ps.: IE não é browser, é uma falha da humanidade…. kkkk

  • Jean

    11 de outubro de 2011, 11:24

    Muitíííííííííííííííííííííííííssimo obrigado!

  • Jean

    11 de outubro de 2011, 11:27

    Só tem um porém, line-height não pega… E parece q outras propriedades também não.

  • Edwin

    14 de dezembro de 2011, 11:29

    Acredito que em questões de vantagem e desvantagem, o Font-face é mais relevante devido seu funcionamento independente de JavaScript e por ser mais leve, porém só é relevante quando a fonte não necessita do Anti Alias, caso contrário o script do Cufon parece bastante útil.

    Obrigado pela dica.

  • micael

    21 de dezembro de 2011, 00:35

    mano como sao gerados aqueles links (.js) não entendi

  • Hugo Magalhães

    21 de dezembro de 2011, 00:41

    Utilize o padding! 😉


    Jean:

    Só tem um porém, line-height não pega… E parece q outras propriedades também não.

  • Hugo Magalhães

    21 de dezembro de 2011, 00:41

    Micael, acesse o site http://cufon.shoqolate.com/generate/ e faça o upload das fontes que você deseja gerar nos campos. 😉


    micael:

    mano como sao gerados aqueles links (.js) não entendi

  • Magnos Gasparini

    4 de fevereiro de 2012, 20:05

    Olá.

    Não entendo muito de programação. Segui o tutorial e fui feliz. Porém, gostaria de aumentar o tamanho da fonte que que foi gerada do Cufon. Queria que ela aumentasse quase o dobro. Como faço?

    Abraço,
    Magnos

  • Leonardo Xavier

    9 de fevereiro de 2012, 10:00

    Parabéns pelo post. Continue criando bons post’s a internet está precisando. Abraços.

  • joao

    13 de março de 2012, 17:28

    Cara, estou utilizando este cufon pela primeira vez e estou tendo problemas com encoding pois não aparece as letras com acentos, como possa ajustar isso ? já converti uma nova fonte, porém o erro permanece, poderia me ajudar ?

    • Hugo Magalhães

      13 de março de 2012, 17:34

      Olá, João!!! Na página de geração de fontes Cufon, existe a opção “Basic Latin”. Marque a opção para que o cufon gerado tenha os símbolos latinos. Lembrando que sua fonte também precisa ter os caracteres! 😉 Abraço!

  • William

    18 de abril de 2012, 17:46

    Boa tarde, eu gostaria de saber se através do Cufon eu poderia customizar um texto dentro de um value, como é usado nos botões “OK” e “Cancelar”. Obrigado

  • Nohai

    2 de dezembro de 2012, 20:46

    Isso também serve para Asp.Net?

  • Felipe Andrés Alves

    25 de dezembro de 2012, 23:19

    Man, queria saber como que usa isso no wordpress.. Pode dar um helps ae?

  • Nelson Ribeiro

    29 de janeiro de 2013, 12:44

    Pequeno problema; special characters. Abaixei código de uma fonte chamada Vegur. Ou o código não está completo, ou tem problemas com special characters. Usando UTF-8

  • Eduardo Silveira

    5 de fevereiro de 2013, 16:00

    Rapaziada, estava com o mesmo problema de font sem acento, fiz o seguinte, entrei no site indicado no post, fiz a conversão conforme está descrito, então fui na pasta js do tema, como o cufon já era usado pelo tema, substituí o nome arquivo que o site gerou pelo arquivo de fonte publicado, no meu caso o arquivo se chamava Museo_Slab_500_400.font, o site havia gerado um arquivo js com o nome da font que escolhi, quando substituí o nome do arquivo convertido(times…js) pelo arquivo que era usado pelo cufon, o blog assumiu a fonte que eu queria e fim de chateação…

  • Jonathan Baiak

    11 de março de 2013, 20:45

    Ajudou bastante. obrigado por compartilhar

  • Pedro Pazitto

    25 de abril de 2014, 23:00

    Resolveu meu problema com os acentos, valeu!

  • bruno

    12 de março de 2015, 17:58

    Pena que não funciona mais…

  • Alison Silva

    28 de outubro de 2015, 15:25

    Pelo que entendi funciona tipo o Webfonts, haveria alguma vantagem em relação ao webfonts ?

Abir conversa
Precisa de ajuda?
Olá!
Como podemos te ajudar?