Existem 2 métodos com os quais você pode incorporar a fonte do Ubuntu em seu site - usando o diretório de fontes do Google (de preferência) ou usando a declaração @font-face CSS e convertendo suas fontes manualmente.
Usando o Google Webfonts
Agora você pode usar a fonte do Ubuntu como uma fonte da Web do Google. Isso tornará o processo muito mais simples. A maior parte do conteúdo desta parte da resposta vem de resposta de sladen .
Por que o uso da API de fontes do Google é o método preferido?
O uso da API de fontes do Google é uma excelente sugestão, pois permite que os webfonts funcionem automaticamente em todos os navegadores modernos, sem precisar se preocupar com os detalhes. Usar a API da fonte significa que os visitantes sempre verão a versão mais recente da fonte automaticamente.
Como posso usar a API de fontes do Google?
Desde 21 de dezembro de 2010, a Família de fontes do Ubuntu agora está incluída e pode ser implantada a partir da API de fontes do Google, visite:
Você pode ler a postagem do Google Web Font sobre as notícias e, em seguida:
- Abra o Diretório de fontes do Google: " Ubuntu - Use esta fonte "página
-
Marque a combinação de pesos e estilos de Regular, Italic, Bold e Bold-Italic que você precisa para sua página da Web.
-
Se o padrão estiver incorreto, selecione a combinação idioma / script que você precisa: um site russo com exemplos em inglês pode usar "Cirílico, latim".
-
Adicione a tag
<link>fornecida entre<head> ... </head>em sua página HTML ou modelos e adicione o código CSS apropriado entre<style> ... </style>tags em<head>.Por exemplo, se você estivesse criando o site híbrido russo / inglês e quisesse usar a fonte como padrão para todo o texto, poderia adicionar o seguinte código entre as tags
<head>:<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 :
"Latin" é o script em que o inglês e muitos outros idiomas europeus e africanos estão escritos.
"Subconjunto" otimiza os arquivos de fonte apenas enviando caracteres para determinados idiomas, as fontes são de aproximadamente 44 kB cada. A figura de 168 kB mostrada no momento é para todos os 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 fontes do Ubuntu são convertidos automaticamente no formato correto para diferentes navegadores; dependendo da marca e da versão, o formato necessário é WOFF , EOT , SVG ou TTF . 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 para Fontes WOFF . Você pode então 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');
}
Similarmente 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 Bold Italic:
@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 incomodados se as fontes personalizadas forem usadas. Além disso, leia a Licença de Fontes do Ubuntu para termos exatos sobre como a fonte pode ser distribuída .