Como posso usar a fonte Roboto do Google em um site?

164

Quero usar a fonte Roboto do Google no meu site e estou seguindo este tutorial:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

Eu baixei o arquivo que possui uma estrutura de pastas como esta:

insira a descrição da imagem aqui

Agora eu tenho três perguntas:

  1. Eu tenho css no meu media/css/main.cssURL. Então, onde eu preciso colocar essa pasta?
  2. Preciso extrair todos os arquivos eot, svg etc de todas as subpastas e colocar na fontspasta?
  3. Preciso criar o arquivo css fonts.css e incluir no meu arquivo de modelo base?

O exemplo que ele usa isso

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

Como deve ser meu URL, se eu quiser ter a estrutura de diretórios como:

/media/fonts/roboto

html css fonts user26
fonte

Respostas:

258

Você realmente não precisa fazer nada disso.

  • Vá para a página de fontes da web do Google
  • procure Robotona caixa de pesquisa no canto superior direito
  • Selecione as variantes da fonte que você deseja usar
  • clique em 'Selecionar esta fonte' na parte superior e escolha os pesos e conjuntos de caracteres necessários.

A página fornecerá um <link>elemento para incluir em suas páginas e uma lista de font-familyregras de amostra para usar em seu CSS.

O uso das fontes do Google dessa maneira garante disponibilidade e reduz a largura de banda no seu próprio servidor.

Sunil Garg
fonte
Obrigado por isso, foi perfeito. Você sabe qual configuração o Google usa para os itens da lista de reprodução na Google Play Store. Eu quero ter um estilo exatamente assim. Também não encontrei o link ou o snippet de código no link. Eu vejo as fontes lá, mas não há código
user26
3
Legal, eles fornecem uma @import para arquivos MENOS também! No entanto, testando sem conexão com a Internet OU com problemas de conexão com o Google (por exemplo: China) = SEM fontes ... Também notei que não há Roboto Black (Roboto Bk) font-family: eles usam apenas três famílias de fontes (Roboto, Roboto Condensed e Roboto Slab) todas as outras variantes Roboto são feitas através de font-stylee font-weightmudanças de estilo CSS. Então, idealmente, depois de colocar o Google, <link>verifique se as fontes estão realmente lá. Caso contrário, use você mesmo (o carregamento de todos os arquivos de uma família de fontes normalmente não excede 0,5 MB).
Armfoot
7
@ user26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>Isso carrega todos os estilos de apenas uma família de fontes: Roboto. No entanto, se você precisar de uma família de fontes que não esteja no Google Fonts (como Roboto Black ), precisará dos arquivos em suas pastas e copie o código de exemplo que você nos mostrou na sua pergunta para o seu main.css (como este @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.ou como sugeri em minha resposta).
Armfoot
14
-1 para Using Google's fonts this way guaranties availability. Nada "garante a disponibilidade", muito menos as fontes do Google. Por acaso, sou uma das mais de bilhões de pessoas para quem usar a CDN do Google significa que muitos sites não conseguem carregar corretamente, ou de todo. Não estou dizendo a ninguém o que fazer, mas não acho que a CDN do Google seja uma solução perfeita.
Nateowami
1
-1. Como o @Nateowami mencionou, você está confiando nos servidores do Google (que podem estar bloqueados em certos países), é ruim para a privacidade e o desempenho pode ser melhor se você hospedar suas fontes em uma CDN. É mais trabalho, mas esse é o seu trabalho, não é?
Robin Métral
70

Existem duas abordagens que você pode usar para usar fontes da Web licenciadas em suas páginas:

  1. Os serviços de hospedagem de fontes, como Typekit, Fonts.com, Fontdeck, etc., fornecem uma interface fácil para os designers gerenciarem as fontes compradas e gerarem um link para um arquivo CSS ou JavaScript dinâmico que serve a fonte. O Google ainda fornece esse serviço gratuitamente ( veja um exemplo da fonte Roboto solicitada). O Typekit é o único serviço a fornecer dicas adicionais de fontes para garantir que as fontes ocupem os mesmos pixels nos navegadores.

    Carregadores de fontes JS como o usado pelo Google e Typekit (por exemplo, carregador da WebFont) fornecem classes CSS e retornos de chamada para ajudar a gerenciar o FOUT que pode ocorrer ou o tempo limite de resposta ao fazer o download da fonte.

    <head>
  <!-- get the required files from 3rd party sources -->
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <!-- use the font -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>

  2. A abordagem DIY envolve obter uma fonte licenciada para uso na Web e (opcionalmente) usar uma ferramenta como o gerador do FontSquirrel (ou algum software) para otimizar o tamanho do arquivo. Em seguida, uma implementação entre navegadores da @font-facepropriedade CSS padrão é usada para ativar a (s) fonte (s).

    Essa abordagem pode fornecer melhor desempenho de carregamento, pois você tem um controle mais granular sobre os caracteres a serem incluídos e, portanto, o tamanho do arquivo.

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

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

Longa história curta:

O uso de serviços de hospedagem de fontes junto com a declaração @ font-face fornece a melhor saída com relação ao desempenho geral, compatibilidade e disponibilidade.

Fonte: https://www.artzstudio.com/2012/02/web-font-performance-weighting-fonting-fontface-options-and-alternatives/

ATUALIZAR

Roboto: a fonte de assinatura do Google agora é de código aberto

Agora você pode gerar manualmente as fontes Roboto usando instruções que podem ser encontradas aqui .

Ashesh Kumar Singh
fonte
17

Post antigo, eu sei.

Isso também é possível usando CSS @import url :

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
rocksteady
fonte
8
Sua solução é um antipadrão de desempenho. O uso de uma tag de link na sua marcação resulta no download mais rápido do arquivo CSS do Google, em comparação com @import; o navegador apenas descobre a referência de recurso anteriormente em geral e, em particular, devido ao pré-carregador (enquanto analisa o HTML versus primeiro analisa o HTML, descobre seu arquivo CSS, faz o download, analisa e descobre o @import; faça o download da folha de estilo importada).
Radko Dinev
3
Não necessariamente. Usando o Webpack e plugins, tudo isso será incorporado à sua compilação de distribuição.
Spock
5

O srcrefere-se diretamente aos arquivos de fontes, portanto, se você colocar todos eles em /media/fonts/robotoque você deve se referir a eles em sua main.css assim: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

Ele ..sobe uma pasta, o que significa que você está se referindo à mediapasta se o main.css estiver na /media/csspasta.

Você deve usar ../fonts/roboto/em todas as referências de URL no CSS (e verifique se os arquivos estão nessa pasta e não em subdiretórios, como roboto_black_macroman).

Basicamente (respondendo às suas perguntas):

Eu tenho css na minha URL media / css / main.css. Então, onde eu preciso colocar essa pasta

Você pode deixá-lo lá, mas não se esqueça de usar src: url('../fonts/roboto/

Preciso extrair todos os arquivos eot, svg etc de todas as subpastas e colocar na pasta de fontes

Se você deseja consultar esses arquivos diretamente (sem colocar os subdiretórios no seu código CSS), então sim.

Preciso criar o arquivo css fonts.css e incluir no meu arquivo de modelo base

Não necessariamente, você pode apenas incluir esse código no seu main.css. Mas é uma boa prática separar fontes do seu CSS personalizado.

Aqui está um exemplo de um arquivo LESS / CSS de fontes que eu uso:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(Neste exemplo, estou usando apenas o ttf). Depois, uso @import "fonts";no meu arquivo main.less ( menos é um pré-processador CSS, isso facilita um pouco as coisas )

Armfoot
fonte
2

Foi o que fiz para obter os arquivos woff2 que eu queria para implantação estática sem precisar usar uma CDN

TEMPORARIAMENTE adicione o cdn para que o css carregue as fontes roboto em index.html e deixe a página carregar. das ferramentas de desenvolvimento do Google, procure fontes e expanda o nó fonts.googleapis.com e visualize o conteúdo da família css? Roboto: 300,400,500 & display = swap file e copie o conteúdo. Coloque esse conteúdo em um arquivo css no diretório de ativos.

No arquivo css, remova todas as coisas gregas, crílicas e vietnamitas.

Veja as linhas neste arquivo css semelhantes a:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

copie o endereço do link e cole-o no seu navegador, ele fará o download da fonte. Coloque essa fonte na pasta de ativos e renomeie-a aqui, assim como no arquivo css. Faça isso para os outros links, eu tinha 6 arquivos woff2 exclusivos.

Segui os mesmos passos para os ícones de materiais.

Agora volte e comente a linha onde você chama o cdn e use o novo arquivo css que você criou.

Helzgate
fonte
1

Tente isto

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
Desenvolvedor-chefe
fonte
1

Use / fonts / ou / font / antes do nome do tipo de fonte na sua folha de estilo CSS. Eu enfrento esse erro, mas depois disso está funcionando bem.

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
Mohammed Javed
fonte
1

Para o site, você pode usar a fonte 'Roboto' como abaixo:

Se você criou um arquivo css separado, coloque a linha abaixo na parte superior do arquivo css como:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

Ou, se você não quiser criar um arquivo separado, adicione a linha acima entre <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

então:

html, body {
    font-family: 'Roboto', sans-serif;
}
Senhor ninguém
fonte
0

Você leu o How_To_Use_Webfonts.html que está nesse arquivo zip?

Depois de ler isso, parece que cada subpasta de fonte possui um .css já criado, que você pode usar incluindo:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
Barry Colebank Jr
fonte
0

é fácil

cada pasta daqueles que você baixou tem um tipo diferente de fonte roboto, significa que são fontes diferentes

exemplo: "roboto_regular_macroman"

para usar qualquer um deles:

1- extrair a pasta da fonte que você deseja usar

2- faça o upload perto do arquivo css

3- agora inclua-o no arquivo css

exemplo para incluir a fonte chamada "roboto_regular_macroman":

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

preste atenção no caminho dos arquivos, aqui carreguei a pasta chamada "roboto_regular_macroman" na mesma pasta em que o css é

agora você pode simplesmente usar a fonte digitando font-family: 'Roboto';

Omar Moustafa
fonte
0

Na verdade, é bastante simples. Vá para a fonte no site do Google e adicione o link ao cabeçalho de todas as páginas que você deseja incluir.


fonte
0

Passou uma hora, corrigindo os problemas de fonte.

Resposta relacionada - Abaixo está o React.jssite:

  1. Instale o módulo npm:

    npm install --save typeface-roboto-mono

  2. importe no arquivo .js que você deseja usar
    um dos itens abaixo :

    import "typeface-roboto-mono"; // se a importação é suportada
    require('typeface-roboto-mono') // se a importação não é suportada

  3. Para o elemento, você pode usar
    um dos itens abaixo:

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

Espero que ajude.

Manohar Reddy Poreddy
fonte