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

138

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?

user2147954
źródło

Odpowiedzi:

101

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'>
Dmitriy Butenko
źródło
8
Nadal nie rozumiem
user2147954
22
W przeciwieństwie do czcionek Google, gdy serwer jest przez Google, podejście to opiera się na samym formacie WOFF, a zatem jest zasadniczo bardziej ograniczone. Poza tym Google rozprowadza ich czcionki w formacie TTF, a nie WOFF.
Jukka K. Korpela,
24
Uważaj, fonts.googleapis generuje różne deklaracje @ font-face dla różnych przeglądarek.
Hüseyin Yağlı
7
To NIE jest poprawne, ponieważ Google wysyła plik CSS specyficzny dla przeglądarki z fonts.googleapis.com/… Więc jeśli otworzysz to w Chrome, otrzymasz inny @ font-face, niż otworzysz go w IE lub jakiejkolwiek innej przeglądarce. Na przykład czcionki WOFF2 będą wysyłane tylko do przeglądarek Firefox i Chrome, ponieważ inne przeglądarki ich nie obsługują (jeszcze). caniuse.com/#feat=woff2
Joost van der Laan
4
Zignoruj ​​tę odpowiedź niezależnie od zaakceptowanego statusu. Jest to niepoprawne, jak wskazał tu Joost van der Laan. Zobacz odpowiedź o najwyższym wyniku autorstwa @ marco-kerwitz poniżej, która powinna być oznaczona jako poprawna.
Appurist - Paul W
325

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 .

Marco Kerwitz
źródło
20
Zastanawiam się tylko, dlaczego Google tego nie zrobiło? +1
tftd
3
To działa świetnie, upewnij się, że zadeklarowałeś odpowiedni typ zawartości podczas tworzenia linku z pliku lokalnegoContent-type: text/css; charset: UTF-8
Clain Dsilva
Jeśli używasz webpacka lub innego narzędzia, które pakuje import CSS / SASS, to podejście jest najlepsze. To pytanie opisuje proces bardziej szczegółowo.
Tempo
Bardzo dziękuję za podpowiedź. Uratowałem mój dzień!
evnica
1
one-liner , uruchom w katalogu docelowym:curl -o f.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto?download=zip&subsets=latin,latin-ext&variants=regular,700" && unzip f.zip && rm f.zip
smnbbrv
43

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.

1111161171159459134
źródło
1
Te kroki zadziałały idealnie. Chcę tylko dodać to dla tych, którzy jeszcze nie używają rozszerzeń plików woff, aby mieć pewność i dodać ten typ MIME w pliku web.config.
Kodowanie 101
1
Nie jest potrzebny konwerter. Spójrz na odpowiedź Marco Kerwitza.
Herr_Schwabullek
25

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!

sym3tri
źródło
+1 za odpowiedź, o której nie musiałem myśleć podczas czytania. Byłoby wspaniale znaleźć bezpośredni konwerter czcionek Google bez konieczności ich wcześniejszego przesyłania. Przykładowe narzędzie: podczas zarządzania witryną offline.
Meetai.com
Generowanie różnych formatów czcionek jest bardzo wygodne. Ale każdy, kto go używa, musi mieć świadomość, że wygenerowany CSS nie jest zbyt inteligentny, wygeneruje dwa (lub więcej) style tej samej czcionki jako oddzielne rodziny czcionek, zamiast jednej rodziny czcionek o różnych grubościach. Ale dość łatwo jest to naprawić samodzielnie w css.
Ken Sung
2
Nie jest potrzebny konwerter. Spójrz na odpowiedź Marco Kerwitza
Herr_Schwabullek,
Udało mi się przesłać 10 czcionek za jednym razem, więc wydaje się, że ograniczenie do 3 czcionek zostało usunięte lub zwiększone
Adrian Hedley,
4

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

duydb
źródło
4

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:

Dalsze czytanie :

KyleMit
źródło
3

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');
davidb
źródło
martwy link do artykułu
TecHunter
Pobieranie nie zawiera pliku .eot
exe
2

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.

Pierre-Adrien Buisson
źródło
0

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.

Wytamma Wirth
źródło
-1

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.

Mattios550
źródło
CZYLI to samo, ale inne strony są zniekształcane. : <link href = "./ css / font.woff" rel = 'stylesheet' type = 'text / css'>
user2147954
Czy Twój plik czcionki ma nazwę font.woff? Czy sprawdziłeś, że plik jest załadowany?
Terry,
@Terry Nie jestem pewien, co masz na myśli - to była fikcyjna nazwa pliku.
Mattios550,
-3

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); 
}
Ashish waman
źródło