Como adicionar uma fonte não padrão a um site?

519

Existe uma maneira de adicionar uma fonte personalizada em um site sem usar imagens, Flash ou outros gráficos?

Por exemplo, eu estava trabalhando em um site de casamento e encontrei muitas fontes legais para esse assunto. Mas não consigo encontrar o caminho certo para adicionar essa fonte no servidor. E como faço para incluir essa fonte com CSS no HTML? Isso é possível sem gráficos?

html css fonts font-face vaske
fonte
18
Desde que essa pergunta foi feita, @font-facetornou-se muito mais abrangente e é recomendada para uso geral. Você só precisa estar ciente de que o IE requer fontes em um formato diferente de outros navegadores. Veja stackoverflow.com/questions/2219916/is-font-face-usable-now
David Johnstone
10
Verifique se você tem o direito de distribuir a fonte!
Viet
2
Visite typekit.com ou para o fontsquirrel.com
bjudson
1
relacionada stackoverflow.com/questions/8050640/...
Adrien Seja
3
www.fontsquirrel.com parece ótimo para gerar os arquivos de fonte necessários e criar uma boa sintaxe @fontface à prova de balas (o mesmo que o recomendado fontspring.com/blog/fixing-ie9-font-face-problems )
Adrien Seja

Respostas:

500

Isso pode ser feito via CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

É suportado para todos os navegadores regulares se você usar fontes TrueType (TTF) ou formato de fonte aberta da Web (WOFF).

indecente
fonte
13
O Internet Explorer e o Firefox NÃO são baseados no Webkit, portanto, na minha opinião, é uma solução inútil.
Casper
58
Não é inútil, pois é padrão: quanto mais você o implementa, mais provavelmente será implementado pelos navegadores. Isso não significa que você não deve encontrar outra maneira de compensar, mas usar isso como complemento me parece bom.
e-satis
8
O Firefox 3.1 suporta @ font-face, no entanto.
26220 Ms2ger
2
@brendanjerwin: versão atualizada do seu link - brendanjerwin.com/development/web/2009/03/03/…
Matt Ball
60
Ei pessoal, adivinhem? Agora é quase 2016! Agora é amplamente suportado! Yay! Ainda bem que encontrei esta resposta tão tarde. Haha
jessica
121

Você pode adicionar algumas fontes pelo Google Web Fonts .

Tecnicamente, as fontes estão hospedadas no Google e você as vincula no cabeçalho HTML. Em seguida, você pode usá-los livremente em CSS com @font-face( leia sobre isso ).

Por exemplo:

Na <head>seção:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Então em CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

A solução parece bastante confiável (até a Smashing Magazine a usa para o título de um artigo ). No entanto, não existem muitas fontes disponíveis até o momento no Diretório de fontes do Google .

Michał Pękała
fonte
1
Em julho de 2014, o google expandiu as fontes e incluiu as fontes do Google Noto que suportam a maioria dos idiomas google.com/get/noto/# . Abobe tem apoiado esta iniciativa de fonte aberta apoiar todas as línguas blog.typekit.com/2014/07/15/introducing-source-han-sans
vsingh
parece (fontes da web do Google) não suporta versões .eot e .woff e .svg de fontes. apenas suporta a versão .ttf das fontes!
Mahdi Jazini 04/04/19
77

O caminho a seguir é usar a declaração CSS @ font-face, que permite aos autores especificar fontes on-line para exibir texto em suas páginas da web. Ao permitir que os autores forneçam suas próprias fontes, o @ font-face elimina a necessidade de depender do número limitado de fontes que os usuários instalaram em seus computadores.

Veja a tabela a seguir:

insira a descrição da imagem aqui

Como você pode ver, existem vários formatos que você precisa conhecer principalmente devido à compatibilidade entre navegadores. O cenário em dispositivos móveis não é muito diferente.

Soluções:

1 - Compatibilidade total com o navegador

Este é o método com o suporte mais profundo possível no momento:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - A maioria do navegador

No entanto, as coisas estão mudando bastante para WOFF , então você provavelmente pode se safar:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Apenas os navegadores mais recentes

Ou mesmo apenas WOFF.
Você o usa assim:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Referências e leituras adicionais:

Isso é principalmente o que você precisa saber sobre a implementação desse recurso. Se você quiser pesquisar mais sobre o assunto, incentivarei a dar uma olhada nos seguintes recursos. A maior parte do que eu coloquei aqui é extraída do seguinte

Javier Cadiz
fonte
2
A ferramenta extremamente útil Font Squirrel pode gerar o CSS necessário para suporte completo ao navegador. Ele ainda permite que você faça o upload da fonte como qualquer um desses formatos, converta-a para todos os outros formatos e faça o download de todos eles. É um salva-vidas quando se trata de fontes personalizadas.
Jacob Stamm
O que svgFontNamesignifica? Devo alterá-lo para o nome da família da minha fonte ou deixá-lo como está?
precisa
17

Se por fonte não padrão, você quer dizer fonte personalizada de um formato padrão, veja como eu faço isso e funciona para todos os navegadores que verifiquei até agora:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

então você precisará apenas das fontes ttf e eot. Algumas ferramentas disponíveis online podem fazer a conversão.

Mas se você deseja anexar fonte em um formato não padrão (bitmaps etc.), não posso ajudá-lo.

BiAiB
fonte
1
Exemplo de ferramenta on-line: kirsle.net/wizards/ttf2eot.cgi Exemplo de ferramenta off-line: code.google.com/p/ttf2eot/wiki/Demo - também deve ser possível usar fontes WOFF .
Wilf 22/02
11

Descobri que a maneira mais fácil de ter fontes não padrão em um site é usar sIFR

Envolve o uso de um objeto Flash que contém a fonte, mas é degradado de maneira adequada para texto / fonte padrão se o Flash não estiver instalado.

O estilo é definido no seu CSS e o JavaScript configura a substituição do Flash para o seu texto.

Editar: (eu ainda recomendo o uso de imagens para fontes não padrão, pois o sIFR acrescenta tempo ao projeto e pode exigir manutenção).

Matt
fonte
24
Que ideia terrível! Tenho o flash no meu navegador, mas também o flashblock. Nesse site, meu navegador exibe uma página desfigurada horrível. O Flash deve permanecer algo que você usa para grandes animações ou filmes. Muito flash é muito chato e visualmente, meu ...
e-satis
2
@ e-satis: como assim? Pessoalmente, nunca noto a diferença entre uma página que usa sIFR e outra que não usa, além das diferenças sutis de renderização de texto. Eu acho que é uma ótima idéia, honestamente, embora @font-faceseja muito melhor quando suportada.
precisa saber é o seguinte
"Editar: (eu ainda recomendo o uso de imagens para fontes não-padrão, pois o sIFR acrescenta tempo ao projeto e pode exigir manutenção)." muito bem dito. sIFR é uma técnica muito legal, mas parece exigir muito para obter a aparência exata que você deseja. Se você tiver tempo para aprender e dominar essa técnica, eu recomendo. Mas se você está procurando uma técnica font-substituição rápida e fácil que eu usaria substituição de imagem ou mesmo o @ propriedade font-face css
Derek Adair
10

Typeface.js e Cufon são outras duas opções interessantes. Eles são componentes JavaScript que processam dados de fonte especiais no formato JSON (que você pode converter dos formatos TrueType ou OpenType em seus sites) por meio do novo elemento <canvas> em todos os navegadores mais novos, exceto no Internet Explorer e via VML no Internet Explorer.

O principal problema de ambos (a partir de agora) é que a seleção de texto não funciona ou, pelo menos, funciona apenas de maneira desajeitada.

Ainda assim, é muito bom para manchetes. Texto do corpo ... não sei.

E é surpreendentemente rápido.

Thomas
fonte
Outra opção interessante é typekit.com Conceito similar.
Zack
8

Ou você pode tentar sIFR . Eu sei que ele usa Flash, mas apenas se disponível. Se o Flash não estiver disponível, ele exibirá o texto original na fonte original (CSS).

Casper
fonte
4

A técnica recomendada pelo W3C para isso é chamada de "incorporação" e é bem descrita pelos três artigos aqui: Incorporação de fontes . Em minhas experiências limitadas, achei esse processo propenso a erros e tive sucesso limitado em fazê-lo funcionar em um ambiente com vários navegadores.

Steve Moyer
fonte
4

O Safari e o Internet Explorer suportam a regra CSS @ font-face, no entanto, eles suportam dois tipos de fonte incorporados diferentes. O Firefox planeja oferecer suporte ao mesmo tipo da Apple em breve. O SVG pode incorporar fontes, mas ainda não é amplamente suportado (sem um plug-in).

Acho que a solução mais portátil que já vi é usar uma função JavaScript para substituir cabeçalhos etc. por uma imagem gerada e armazenada em cache no servidor com sua fonte de escolha - dessa forma, você simplesmente atualiza o texto e não precisa coisas no Photoshop.

zobier
fonte
Isso não precisa ser feito com JavaScript. Eu sei que muitas pessoas gostam de usar JavaScript para muitas coisas hoje em dia, mas uma técnica CSS padrão pode ser mais apropriada aqui. Consulte sitepoint.com/article/header-images-css-xhtml
hangy
Sinto muito se há confusão, a técnica não se refere ao método de substituição de imagem que, como você diz, pode ser CSS. Trata-se de gerar gráficos que representam uma determinada string em uma fonte / estilo específico, dinamicamente, no servidor - evitando a necessidade de criá-los manualmente.
zobier
4

Se você usa o ASP.NET, é realmente fácil gerar fontes baseadas em imagem sem precisar instalar (como adicionar à base de fontes instalada) fontes no servidor usando:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

e depois desenhar com essa fonte em um Graphics.

mattlant
fonte
1
bem, sim ... E você pode esquecer de copiar e colar. E zoom também, em navegadores antigos. Eu nem falo sobre problemas de largura de banda!
e-satis
2
Sim, ok, e a pergunta especifica que ele será usado para texto de conteúdo? Não, não era, era uma pergunta geral e essa era uma resposta geral. Pequenos trechos de texto, cabeçalhos etc. não ocupam muita largura de banda. Sheesh, controle!
mattlant 22/09/08
3

Parece que só funciona no Internet Explorer, mas uma rápida pesquisa no Google por "fontes incorporadas html" gera http://www.spoono.com/html/tutorials/tutorial.php?id=19

Se você quiser se manter independente da plataforma (e deve!), Terá que usar imagens ou apenas usar uma fonte padrão.

James Muscat
fonte
3

Pesquisei um pouco e descobri o Dynamic Text Replacement (publicado em 15/06/2004).

Essa técnica usa imagens, mas parece ser "mãos livres". Você escreve seu texto e permite que alguns scripts automatizados encontrem e substituam automaticamente na página para você em tempo real.

Tem algumas limitações, mas é provavelmente uma das escolhas mais fáceis (e mais compatíveis com o navegador) do que todas as outras que já vi.

Kent Fredric
fonte
3

Também é possível usar fontes WOFF - exemplo aqui

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
Wilf
fonte
3

Simplesmente forneça o link para uma fonte real como essa e você estará pronto

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
Abhijeet Kumar
fonte
Uma boa alternativa simples. E você tem certeza de ter os direitos para usá-lo. Veja developers.google.com/fonts/docs/getting_started
Tim Erickson
2

Caminho JavaScript do Typeface.js:

Com o typeface.js, você pode incorporar fontes personalizadas em suas páginas da web para não precisar renderizar texto em imagens

Em vez de criar imagens ou usar o flash apenas para mostrar o texto gráfico do seu site na fonte desejada, você pode usar o typeface.js e escrever em HTML e CSS simples, como se seus visitantes tivessem a fonte instalada localmente.

http://typeface.neocracy.org/

bakkal
fonte
2

Se você tiver um arquivo da sua fonte, precisará adicionar mais formatos dessa fonte para outros navegadores.

Para esse propósito, eu uso um gerador de fontes como o Fontsquirrel, que fornece todos os formatos de fonte e seu CSS @ font-face, você só precisará arrastar e soltar no seu arquivo CSS.

saadeez
fonte