Incorporar a fonte Ubuntu em qualquer página da web

Respostas:

25

Existem 2 métodos com os quais você pode incorporar a fonte Ubuntu no seu site - usando o Diretório de fontes do Google (preferencial) ou a @font-facedeclaração CSS e convertendo suas fontes manualmente.

Usando o Google Webfonts

Agora você pode usar a fonte Ubuntu como fonte da web do Google. Isso tornará o processo muito mais simples. A maior parte do conteúdo desta parte da resposta vem da resposta de sladen .

Por que usar a API da fonte do Google é o método preferido?

O uso da API do Google Font é uma excelente sugestão, pois permite que as páginas da web funcionem automaticamente em todos os navegadores modernos sem precisar se preocupar com os detalhes. O uso da API da fonte significa que os visitantes sempre verão a versão mais recente do tipo de letra automaticamente.

Como posso usar a API de fontes do Google?

Desde 21 de dezembro de 2010, a família de fontes Ubuntu agora está incluída e implantável a partir da API de fontes do Google, visite:

Você pode ler a postagem da fonte da web do Google sobre as notícias e depois:

  1. Abra o Diretório de fontes do Google: página " Ubuntu - Use this font "

  2. Marque a combinação de pesos e estilos em Regular, Itálico, Negrito e Negrito-Itálico que você precisa para sua página da web.

    texto alternativo

  3. Se o padrão estiver incorreto, selecione a combinação de idioma / script que você precisa: um site russo com exemplos em inglês pode usar "cirílico, latim".

    texto alternativo

  4. Adicione a <link>tag especificada entre <head> ... </head>na sua página ou modelos HTML e adicione o código CSS apropriado entre as <style> ... </style>tags na sua <head>.

    Por exemplo, se você estivesse criando o site híbrido russo / inglês e desejasse usar a fonte como padrão para todo o texto, poderia adicionar o seguinte código entre suas <head>tags:

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
    body {
        font-family : 'Ubuntu', sans-serif;
    }
</style>

Notas :

"Latim" é o script em que o inglês e muitas outras línguas européias e africanas são escritos.

"Sub-definição" otimiza os arquivos de fonte enviando apenas caracteres para determinados idiomas; as fontes têm cerca de 44 kB cada. A figura de 168 kB mostrada no momento é para todos os mais de 1.200 glifos como um único download de fonte da Web - e a maioria não é necessária para um único site.

Os arquivos de fonte Ubuntu são convertidos automaticamente no formato correto para diferentes navegadores; dependendo da marca e versão do formato exigido é WOFF, EOT, SVGouTTF . A combinação certa de CSS é específica para cada solicitação de página e resolve magicamente esse problema difícil.

Usando @ font-face

Você pode incorporar as fontes do Ubuntu convertendo-as em fontes WOFF . Você pode incorporá-los usando a declaração CSS @ font-face. As fontes (arquivos .ttf) podem ser encontradas em /usr/share/fonts/truetype/ubuntu-font-family.

Por exemplo, para usar a fonte Ubuntu Regular, convertida em um arquivo WOFF, Ubuntu-R.woff, use este código CSS:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

Da mesma forma para o Ubuntu Bold:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu Italic:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu Negrito Itálico:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

Isso é suportado por todos os navegadores recentes .

Considerações

Lembre-se de que alguns usuários configuram seus navegadores para usar um conjunto específico de fontes e podem ficar irritados se fontes personalizadas forem usadas. Leia também a Licença de fonte do Ubuntu para obter os termos exatos de como a fonte pode ser distribuída.

— dv3500ea
fonte
@ DKuntz2 - isso é realmente melhor; Agora mudei minha resposta.
— precisa saber é o seguinte
Não entendi a necessidade de copiar a resposta de sladen. Por que não apenas editá-lo?
— papukaija
Respondi a essa pergunta muito tempo antes do sladen, descrevendo o método @ font-face. Isso foi antes da fonte ser adicionada à API de fontes do Google (que é um método melhor). Eu adicionei apenas uma pequena nota para o início da minha resposta e Sladen respondeu muito mais abrangente e ter uma resposta melhor para a utilização do método de google.
— dv3500ea
11
No entanto, neste momento, minha resposta foi aceita e altamente votada, e o resultado foi que as pessoas podem pensar que deveriam usar o método @ font-face, que é menos preferível. Sladen contactou-me via e-mail sobre isso e eu concordou em mudar a minha resposta, dando atribuição conforme exigido pela licença Creative Commons deste site.
— dv3500ea
10

O uso da API do Google Font é uma excelente sugestão, pois permite que as páginas da web funcionem automaticamente em todos os navegadores modernos sem precisar se preocupar com os detalhes. O uso da API da fonte significa que os visitantes sempre verão a versão mais recente do tipo de letra automaticamente.

Desde 21 de dezembro de 2010, a família de fontes Ubuntu agora está incluída e implantável a partir da API de fontes do Google, visite:

Você pode ler a postagem da fonte da web do Google sobre as notícias e depois:

  1. Abra o Diretório de fontes do Google: página " Ubuntu - Use this font "
  2. Marque a combinação de pesos e estilos em Regular, Itálico, Negrito e Negrito-Itálico que você precisa para sua página da web.
  3. Se o padrão estiver incorreto, selecione a combinação de idioma / script que você precisa: um site russo com exemplos em inglês pode usar "cirílico, latim".
  4. Copie e cole as duas linhas de CSS nas seções <head> ... </head>e <style>...</style>da sua página ou modelos HTML.

Notas:

"Latim" é o script em que o inglês e muitas outras línguas européias e africanas são escritos.

"Sub-definição" otimiza os arquivos de fonte enviando apenas caracteres para determinados idiomas; as fontes têm cerca de 44 kB cada. A figura de 168 kB mostrada no momento é para todos os mais de 1.200 glifos como um único download de fonte da Web - e a maioria não é necessária para um único site.

Os arquivos de fonte Ubuntu são convertidos automaticamente no formato correto para diferentes navegadores; dependendo da marca e versão do formato exigido é WOFF, EOT, SVGouTTF . A combinação certa de CSS é específica para cada solicitação de página e resolve magicamente esse problema difícil.

— sladen
fonte
8

A renderização de fontes no servidor (talvez a melhor "renderização dinâmica de fontes") é uma questão interessante há bastante tempo.

Tecnicamente, parece lógico que, para uma máquina exibir uma fonte específica, ela já esteja instalada localmente.

Por outro lado, o web design perde muito ao ter que se ater às 'fontes da web' básicas / conhecidas.

O CSS2.1 fez algumas melhorias usando a declaração de regra @ font-face .
Ainda não se tornou um padrão, mas, eventualmente, com CSS3.

Além disso, existem alguns métodos alternativos, como:

Espero que os links fornecidos lhe dê uma idéia melhor do que pode ser feito ;-)

— Pavlos G.
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.