Fazendo download de uma fonte do Google e configurando um site offline que a usa

Eu tenho um modelo e ele tem uma referência a uma fonte do Google como esta:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

Como posso baixá-lo e configurá-lo para uso em minhas páginas que ficam off-line o tempo todo?

Basta acessar Google Fonts - http://www.google.com/fonts/ , adicionar a fonte que você gosta à sua coleção e pressionar o botão de download. Depois, basta usar o @fontface para conectar essa fonte à sua página da web. Aliás, se você abrir o link que está usando, verá um exemplo de como usar @fontface

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Por exemplo

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Basta alterar o endereço da URL para o link local no arquivo de fonte que você baixou.

Você pode fazer isso ainda mais fácil.

Basta baixar o arquivo, você vinculou:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Nomeie como opensans.css ou mais.

Em seguida, basta alterar os links em url () para o seu caminho para os arquivos de fonte.

E substitua sua sequência de exemplo por:

<link href='opensans.css' rel='stylesheet' type='text/css'>

Confira o assistente do google webfonts

Permite baixar todas as fontes da web do Google e sugere código css para a implementação. Essa ferramenta também permite que você baixe todos os formatos de uma só vez sem problemas.

Sempre quis saber onde o Google hospeda suas faculdades? Esse serviço pode ser útil se você deseja fazer o download de todos os arquivos .eot, .woff, .woff2, .svg, .ttf de uma variante de fonte diretamente do google (normalmente o seu User-Agent determinaria o melhor formato).

Veja também a página do Github .

Encontrei uma maneira passo a passo de conseguir isso (para uma fonte):
(a partir de 9 de setembro de 2013 )

1. Escolha sua fonte em http://www.google.com/fonts
2. Adicione o desejado à sua coleção usando o botão azul "Adicionar à coleção"
3. Clique no botão "Ver todos os estilos" ao lado de "Remover da coleção" e verifique se você selecionou outros estilos que também podem ser necessários, como 'negrito' ...
4. Clique no botão "Usar" na parte inferior direita da página
5. Clique no botão de download na parte superior com uma imagem de seta para baixo
6. Clique em "arquivo zip" na mensagem pop-up exibida
7. Clique no botão "Fechar" no pop-up
8. Role lentamente a página até ver as três guias "Standrd | @import | Javascript"
9. Clique na guia "@import"
10. Selecione e copie o URL entre 'url('e')'
11. Copie-o na barra de endereço em uma nova guia e vá para lá
12. Faça "Arquivo> Salvar página como ..." e nomeie-o como "nome da fonte desejado.css" (substitua de acordo)
13. Descompacte o arquivo .zip de fontes baixado (o arquivo .ttf deve ser extraído)
14. Vá para " http://ttf2woff.com/ " e converta qualquer .ttf extraído do zip para .woff
15. Edite desiredfontname.csse substitua qualquer URL dentro [entre 'url('e ')'] pelo arquivo .woff convertido correspondente que você obteve no ttf2woff.com; o caminho que você escreve deve estar de acordo com o servidor doc_root
16. Salve o arquivo e mova-o em seu lugar final e escreva a <link/>tag CSS correspondente para importá-las em sua página HTML
17. A partir de agora, consulte esta fonte pelo font-familynome em seus estilos

É isso aí. Porque eu tive o mesmo problema e a solução no topo não funcionou para mim.

As outras respostas não estão erradas, mas achei o caminho mais rápido.

1. Baixe o arquivo zip das fontes do Google e descompacte-o.
2. Faça o upload dos arquivos de fonte 3 de cada vez para http://www.fontsquirrel.com/tools/webfont-generator
3. Faça o download dos resultados.

Os resultados contêm todos os formatos de fonte: woff, svg, ttf, eot .

E, como um bônus adicional, eles geram o arquivo css para você também!

3 passos:

1. Faça o download da sua fonte personalizada no Goole Fonts e faça o download do arquivo .css ex: faça o download de http://fonts.googleapis.com/css?family=Open+Sans:400italic.600italic.400.600.300 e salve como example.css
2. Abra o arquivo que você baixa ( exemplo.css ). Agora você deve baixar todos os arquivos de fonte e salvá-los no diretório de fontes .
3. Edite example.css : substitua todos os arquivos de fonte para o seu download .css

Ex:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Veja src: -> url. Faça o download de http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 e salve no diretório de fontes . Depois disso, altere o URL para todos os arquivos baixados. Agora vai parecer

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** O download de todas as fontes contém arquivo .css Espero que ajude

Se você deseja declarar explicitamente as dependências do seu pacote ou automatizar o download, pode adicionar um pacote do nó para extrair fontes do Google e servir localmente.

npm - Google Font Download s

O projeto de fontes cria pacotes NPM para fontes abertas:

Cada pacote é enviado com todos os fons e css necessários para auto-hospedar um tipo de fonte de código aberto.
Todas as fontes do Google foram adicionadas, além de uma lista pequena, mas crescente, de outras fontes de código aberto.

Basta procurar no npm para procurar as fontes disponíveis, como typeface-roboto ou typeface-open-sans e instalar assim:typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

npm - Fontes do Google Download- ers

Para o caso de uso mais genérico, existem vários pacotes npm que entregam fontes em duas etapas, primeiro obtendo o pacote e depois apontando-o para o nome da fonte e as opções que você deseja incluir.

Aqui estão algumas das opções:

• Plug-in do Web Fonts do Google Fonts
• Fontes do Google offline
• Fontes do Google
• Obter fontes do Google

Leitura adicional :

• Como hospedar ícones de material offline?
• Usando ícones de materiais offline e a fonte Roboto no aplicativo Electron

Essencialmente, você está incluindo a fonte no seu projeto.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Ao usar o Google Fonts, seu fluxo de trabalho é dividido em 3 etapas: "Selecionar", "Personalizar", "Incorporar". Se você observar atentamente, no lado direito da página "Usar", há uma pequena seta que permite baixar a fonte atualmente em sua coleção.

Depois disso, e depois que a fonte estiver instalada no seu sistema, você precisará usá-la como qualquer outra fonte comum usando a font-familydiretiva CSS.

Eu segui a resposta do duydb para produzir o código python abaixo que automatiza esse processo.

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

Espero que isso ajude com parte da morte de copiar e colar.

Você precisa baixar a fonte e referenciá-la localmente.

Faça o download CSSdo link que você postou, faça o download de todos os WOFFarquivos e (se necessário) os converta em TTF.

Em seguida, altere o CSSlink publicado para incluir as fontes localmente.

De

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

Para

url(/path/to/font/font.woff)

Voila! Pode haver mais que você precisa fazer, mas o acima é o básico. Este artigo explica um pouco melhor.

basta baixar a fonte e extraí-la em uma pasta. depois vincule essa fonte. o código abaixo funcionou corretamente para mim.

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}