Mendownload font Google dan menyiapkan situs offline yang menggunakannya

Saya memiliki template dan memiliki referensi ke font Google seperti ini:

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

Bagaimana saya bisa mendownloadnya dan mengaturnya untuk digunakan di halaman saya yang selalu offline?

Cukup buka Google Fonts - http://www.google.com/fonts/ , tambahkan font yang Anda suka ke koleksi Anda, dan tekan tombol unduh. Dan kemudian gunakan @fontface untuk menghubungkan font ini ke halaman web Anda. Btw, jika Anda membuka tautan yang Anda gunakan, Anda akan melihat contoh penggunaan @fontface

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

Sebagai contoh

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

Ubah saja alamat url ke tautan lokal pada file font yang telah Anda unduh.

Anda bisa melakukannya dengan lebih mudah.

Cukup unduh file, Anda telah menautkan:

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

Beri nama itu opensans.css atau lebih.

Kemudian ubah saja tautan di url () ke jalur Anda ke file font.

Dan kemudian ganti string contoh Anda dengan:

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

Lihat pembantu google webfonts

Ini memungkinkan Anda mengunduh setiap font web Google dan menyarankan kode css untuk penerapannya. Alat ini juga memungkinkan Anda untuk mengunduh semua format sekaligus tanpa kerumitan.

Pernah ingin tahu di mana Google menghosting font web mereka? Layanan ini mungkin berguna jika Anda ingin mengunduh semua file .eot, .woff, .woff2, .svg, .ttf dari varian font langsung dari google (biasanya Agen-Pengguna Anda akan menentukan format terbaik).

Lihat juga halaman Github mereka .

Menemukan cara langkah demi langkah untuk mencapai hal ini (untuk 1 font):
( per 9 Sep 2013 )

1. Pilih font Anda di http://www.google.com/fonts
2. Tambahkan yang diinginkan ke koleksi Anda menggunakan tombol biru "Tambahkan ke koleksi"
3. Klik tombol "Lihat semua gaya" di dekat tombol "Hapus dari koleksi" dan pastikan Anda telah memilih gaya lain yang mungkin juga Anda perlukan seperti 'tebal' ...
4. Klik tombol tab 'Gunakan' di kanan bawah halaman
5. Klik tombol unduh di atas dengan gambar panah bawah
6. Klik pada "file zip" pada pesan popup yang muncul
7. Klik tombol "Tutup" pada popup
8. Gulir halaman secara perlahan hingga Anda melihat 3 tab "Standrd | @import | Javascript"
9. Klik tab "@import"
10. Pilih dan salin url antara 'url('dan')'
11. Salin di address bar di tab baru dan pergi ke sana
12. Lakukan "File> Save page as ..." dan beri nama "nama font yang diinginkan.css" (ganti yang sesuai)
13. Dekompresi file font .zip yang Anda unduh (.ttf harus diekstrak)
14. Buka " http://ttf2woff.com/ " dan konversikan .ttf apa pun yang diekstrak dari zip ke .woff
15. Edit desiredfontname.cssdan ganti url apa pun di dalamnya [antara 'url('dan ')'] dengan file .woff yang dikonversi sesuai yang Anda dapatkan di ttf2woff.com; path yang Anda tulis harus sesuai dengan doc_root server Anda
16. Simpan file dan pindahkan di tempat terakhirnya dan tulis <link/>tag CSS yang sesuai untuk mengimpornya di halaman HTML Anda
17. Mulai sekarang, lihat font ini dengan font-familynamanya di gaya Anda

Itu dia. Karena saya memiliki masalah yang sama dan solusi di atas tidak berhasil untuk saya.

Jawaban lain tidak salah, tapi menurut saya ini cara tercepat.

1. Unduh file zip dari font Google dan unzip.
2. Unggah file font 3 sekaligus ke http://www.fontsquirrel.com/tools/webfont-generator
3. Unduh hasilnya.

Hasil berisi semua format font: woff, svg, ttf, eot .

DAN sebagai bonus tambahan, mereka juga membuat file css untuk Anda!

Jika Anda ingin secara eksplisit mendeklarasikan dependensi paket atau mengotomatiskan unduhan, Anda dapat menambahkan paket node untuk menarik font Google dan ditayangkan secara lokal.

npm - Unduh Font Google s

Proyek tipografi membuat paket NPM untuk tipografi Sumber Terbuka:

Setiap paket dikirimkan dengan semua fons dan css yang diperlukan untuk menghosting sendiri jenis huruf open source.
Semua Google Fonts telah ditambahkan serta daftar kecil font open source lainnya yang terus bertambah.

Cukup cari npm untuk menelusuri font yang tersedia seperti typeface-roboto atau typeface-open-sans dan instal seperti ini:typeface-<typefacename>

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

NPM - Google Font Download- ers

Untuk kasus penggunaan yang lebih umum, ada beberapa paket npm yang akan mengirimkan font dalam dua langkah, pertama dengan mendapatkan paket, dan kemudian dengan mengarahkannya ke nama font dan opsi yang ingin Anda sertakan.

Berikut beberapa opsinya:

• Plugin Google Fonts Webpack
• Google Font Offline
• Google Fonts
• Dapatkan Google Fonts

Bacaan Lebih Lanjut :

• Bagaimana cara menghosting ikon material secara offline?
• Menggunakan ikon Material offline dan font Roboto di aplikasi Electron

3 langkah:

1. Unduh font khusus Anda pada Goole Fonts dan unduh file .css misalnya: Unduh http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 dan simpan sebagai example.css
2. Buka file yang Anda unduh ( example.css ). Sekarang Anda harus mengunduh semua file font-face dan menyimpannya di direktori font .
3. Edit example.css : ganti semua file font-face ke unduhan .css Anda

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

Lihat src: -> url. Unduh http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 dan simpan ke direktori fonta . Setelah itu ubah url ke semua file yang Anda unduh. Sekarang akan terlihat seperti itu

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

** Unduh semua font yang berisi file .css Semoga ini akan membantu Anda

Pada dasarnya Anda memasukkan font ke dalam proyek Anda.

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

Saat menggunakan Google Fonts, alur kerja Anda dibagi menjadi 3 langkah: "Pilih", "Sesuaikan", "Sematkan". Jika Anda melihat lebih dekat, di ujung kanan halaman "Gunakan", ada panah kecil yang memungkinkan Anda untuk mendownload font yang saat ini ada di koleksi Anda.

Setelah itu, dan setelah font diinstal pada sistem Anda, Anda hanya perlu menggunakannya seperti font biasa lainnya menggunakan font-familyarahan CSS.

Saya mengikuti jawaban duydb untuk menghasilkan kode python di bawah ini yang mengotomatiskan proses ini.

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)

Semoga ini membantu dengan beberapa kematian copy-paste.

Anda perlu mengunduh font dan mereferensikannya secara lokal.

Unduh CSSdari tautan yang Anda posting, lalu unduh semua WOFFfile dan (jika perlu) konversikan menjadi TTF.

Kemudian ubah CSSdari link yang Anda posting untuk memasukkan font secara lokal.

Dari

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

Untuk

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

Voila! Mungkin masih ada lagi yang perlu Anda lakukan tetapi hal di atas adalah dasar-dasarnya. Artikel ini menjelaskan sedikit lebih baik.

cukup unduh font dan ekstrak ke dalam folder. lalu tautkan font itu. kode di bawah ini bekerja untuk saya dengan benar.

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