Pobranie czcionki Google i skonfigurowanie witryny offline, która z niej korzysta

Mam szablon i ma on odniesienie do czcionki Google w następujący sposób:

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

Jak mogę go pobrać i skonfigurować do używania na moich stronach, które są cały czas w trybie offline?

Po prostu przejdź do Google Fonts - http://www.google.com/fonts/ , dodaj preferowaną czcionkę do swojej kolekcji i naciśnij przycisk pobierania. Następnie użyj @fontface, aby połączyć tę czcionkę ze swoją stroną internetową. Przy okazji, jeśli otworzysz link, którego używasz, zobaczysz przykład użycia @fontface

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

Dla przykładu

@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');
}

Po prostu zmień adres URL na lokalny link w pobranym pliku czcionki.

Możesz to zrobić jeszcze łatwiej.

Po prostu pobierz plik, połączyłeś:

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

Nazwij go opensans.css lub tak.

Następnie po prostu zmień linki w url () na ścieżkę do plików czcionek.

A następnie zamień przykładowy ciąg na:

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

Sprawdź Czcionki Webfonts google pomocnika

Pozwala pobrać każdą czcionkę internetową Google i sugeruje kod CSS do implementacji. To narzędzie umożliwia również proste pobieranie wszystkich formatów naraz bez kłopotów.

Czy kiedykolwiek chciałeś wiedzieć, gdzie Google hostuje ich czcionki internetowe? Ta usługa może być przydatna, jeśli chcesz pobrać wszystkie pliki .eot, .woff, .woff2, .svg, .ttf wariantu czcionki bezpośrednio z google (zwykle twój User-Agent określi najlepszy format).

Spójrz także na ich stronę Github .

Znaleźliśmy sposób, aby to osiągnąć krok po kroku (dla 1 czcionki):
( stan na 9 września 2013 r. )

1. Wybierz czcionkę pod adresem http://www.google.com/fonts
2. Dodaj wybrany element do swojej kolekcji, używając niebieskiego przycisku „Dodaj do kolekcji”
3. Kliknij przycisk „Zobacz wszystkie style” obok przycisku „Usuń z kolekcji” i upewnij się, że wybrałeś inne style, których możesz potrzebować, takie jak „pogrubienie” ...
4. Kliknij przycisk zakładki „Użyj” w prawym dolnym rogu strony
5. Kliknij przycisk pobierania u góry ze strzałką w dół
6. Kliknij „plik zip” w wyskakującym okienku, które się pojawi
7. Kliknij przycisk „Zamknij” w wyskakującym okienku
8. Powoli przewijaj stronę, aż zobaczysz 3 zakładki „Standrd | @import | Javascript”
9. Kliknij kartę „@import”
10. Wybierz i skopiuj adres URL między 'url('a')'
11. Skopiuj go na pasku adresu w nowej karcie i przejdź tam
12. Wykonaj „Plik> Zapisz stronę jako ...” i nadaj jej nazwę „pożądana nazwa czcionki.css” (odpowiednio zamień)
13. Rozpakuj pobrany plik .zip czcionek (należy rozpakować .ttf)
14. Przejdź do „ http://ttf2woff.com/ ” i przekonwertuj wszystkie pliki .ttf rozpakowane z zip na .woff
15. Edytuj desiredfontname.cssi zamień dowolny adres URL w nim [między 'url('i ')'] na odpowiedni przekonwertowany plik .woff, który otrzymałeś na ttf2woff.com; ścieżka, którą piszesz, powinna być zgodna z Twoim serwerem doc_root
16. Zapisz plik i przenieś go w ostateczne miejsce i napisz odpowiedni <link/>znacznik CSS, aby zaimportować go na swoją stronę HTML
17. Od teraz używaj font-familynazwy tej czcionki w swoich stylach

Otóż ​​to. Ponieważ miałem ten sam problem i rozwiązanie na górze nie działało dla mnie.

Inne odpowiedzi nie są błędne, ale okazało się, że to najszybszy sposób.

1. Pobierz plik zip z Google Fonts i rozpakuj go.
2. Prześlij pliki czcionek po 3 na raz do http://www.fontsquirrel.com/tools/webfont-generator
3. Pobierz wyniki.

Wyniki zawierają wszystkie formaty czcionek: woff, svg, ttf, eot .

A jako dodatkowy bonus generują również plik css dla Ciebie!

3 kroki:

1. Pobierz swoją niestandardową czcionkę na Goole Fonts i pobierz plik .css, np .: Pobierz http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 i zapisz jako example.css
2. Otwórz pobrany plik ( przykład.css ). Teraz musisz pobrać cały plik font-face i zapisać go w katalogu fonts .
3. Edytuj example.css : zamień cały plik font-face na pobrany plik .css

Dawny:

@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;
}

Spójrz na src: -> url. Pobierz http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 i zapisz w katalogu fonts . Następnie zmień adres URL na cały pobrany plik. Teraz będzie wyglądać

@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;
}

** Pobierz wszystkie czcionki zawierające plik .css Mam nadzieję, że to pomoże

Jeśli chcesz jawnie zadeklarować zależności pakietów lub zautomatyzować pobieranie, możesz dodać pakiet węzłów, aby pobierać czcionki Google i udostępniać je lokalnie.

npm - Google Font Download s

Projekt krojów pisma tworzy pakiety NPM dla krojów pisma Open Source:

Każdy pakiet jest dostarczany ze wszystkimi niezbędnymi fonami i css do samodzielnego hostowania kroju pisma open source.
Wszystkie czcionki Google zostały dodane, a także niewielka, ale stale rosnąca lista innych czcionek typu open source.

Wystarczy poszukać NPM do przeglądania dostępnych czcionek jak krój-ROBOTO lub fontów-Open-SAN i zainstalować tak:typeface-<typefacename>

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

npm - Google Fonts Download- ery

Dla bardziej ogólnego przypadku użycia istnieje kilka pakietów npm, które dostarczą czcionki w dwóch krokach, najpierw poprzez pobranie pakietu, a następnie wskazanie nazwy czcionki i opcji, które chcesz dołączyć.

Oto kilka opcji:

• Wtyczka Google Fonts Webpack
• Google Fonts Offline
• Czcionki Google
• Pobierz czcionki Google

Dalsze czytanie :

• Jak udostępniać ikony materiałów w trybie offline?
• Korzystanie z ikon materiałów offline i czcionki Roboto w aplikacji Electron

Zasadniczo dołączasz czcionkę do swojego projektu.

@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');

W przypadku korzystania z czcionek Google przepływ pracy jest podzielony na 3 etapy: „Wybierz”, „Dostosuj”, „Umieść”. Jeśli przyjrzysz się uważnie, na prawym końcu strony „Użyj” znajduje się mała strzałka, która umożliwia pobranie czcionki aktualnie znajdującej się w Twojej kolekcji.

Po tym, gdy czcionka zostanie zainstalowana w systemie, wystarczy jej użyć jak każdej innej zwykłej czcionki korzystającej z font-familydyrektywy CSS.

Postępowałem zgodnie z odpowiedzią duydba, aby utworzyć poniższy kod w języku Python, który automatyzuje ten proces.

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)

Mam nadzieję, że to pomoże w niektórych przypadkach śmierci typu kopiuj-wklej.

Musisz pobrać czcionkę i odwołać się do niej lokalnie.

Pobierz CSSz opublikowanego łącza, a następnie pobierz wszystkie WOFFpliki i (w razie potrzeby) przekonwertuj je na TTF.

Następnie zmień CSSz opublikowanego łącza, aby uwzględnić czcionki lokalnie.

Z

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

Do

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

Voila! Może być jeszcze coś do zrobienia, ale powyższe to podstawy. Ten artykuł wyjaśnia trochę lepiej.

wystarczy pobrać czcionkę i wypakować ją do folderu. następnie połącz tę czcionkę. poniższy kod działał dla mnie poprawnie.

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