Men-download Google font dan mengatur situs secara offline yang menggunakan itu

Check out google webfonts helper

Hal ini memungkinkan anda men-download setiap web font Google dan menunjukkan kode css untuk implementasi. Alat ini juga memungkinkan anda untuk hanya men-download semua format sekaligus tanpa kerumitan.

Pernah ingin tahu di mana Google host mereka webfonts? Layanan ini mungkin berguna jika anda ingin download semua .eot, .woff, .woff2, .svg, .file ttf font variant langsung dari google (biasanya User-Agent yang akan menentukan format terbaik).

Juga lihatlah mereka halaman Github.

Hanya pergi ke Google Fonts - http://www.google.com/fonts/ , tambahkan font yang anda suka untuk koleksi anda, dan tekan tombol download. Dan kemudian hanya menggunakan fontface untuk menghubungkan jenis huruf ini ke halaman web anda. Btw, jika anda membuka link yang anda gunakan, anda'll melihat contoh menggunakan fontface

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

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

Hanya mengubah alamat url untuk link lokal pada file font, anda've-download.

Anda dapat melakukannya lebih mudah.

Hanya men-download file, anda've terkait:

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

Nama itu opensans.css atau lebih.

Kemudian hanya mengubah link url() untuk jalan anda ke file font.

Dan kemudian mengganti contoh string dengan:

Menemukan langkah-demi-langkah cara untuk mencapai hal ini (untuk 1 jenis huruf):
(sebagai Sep-9 2013)

1. Memilih font di http://www.google.com/fonts
2. Tambahkan salah satu yang diinginkan untuk koleksi anda menggunakan "Menambah koleksi" tombol biru
3. Klik "Lihat semua gaya" tombol di dekat "Hapus dari koleksi" tombol dan pastikan bahwa anda telah memilih gaya lain anda juga mungkin perlu seperti 'bold'...
4. Klik 'Menggunakan' tab tombol di kanan bawah halaman
5. Klik tombol download di atas dengan panah bawah gambar
6. Klik pada "file zip" pada pesan popup yang muncul
7. Klik "Tutup" tombol pada popup
8. Perlahan-lahan scroll halaman sampai anda melihat 3 tab "Standrd|@import|Javascript"
9. Klik "@import" tab
10. Pilih dan copy url antara 'url(' dan')'
11. Salin itu pada address bar di tab baru dan pergi ke sana
12. Melakukan "File > Save page as..." dan nama itu "desiredfontname.css" (ganti sesuai)
13. Dekompresi font .zip file yang anda download (.ttf harus diekstrak)
14. Pergi ke "http://ttf2woff.com/" dan mengkonversi .ttf yang diekstrak dari zip ke .woff
15. Edit desiredfontname.css dan mengganti url di dalamnya [antara 'url(' dan')'] sesuai dengan bertobat .woff file yang anda punya di ttf2woff.com; jalan yang anda tulis harus sesuai dengan server anda doc_root
16. Simpan file dan memindahkannya pada tempat akhir dan menulis yang sesuai <link/> CSS tag untuk impor ini di halaman HTML anda
17. Dari sekarang, mengacu pada jenis huruf ini oleh font-family nama dalam gaya anda

Yang's ini. Karena aku punya masalah yang sama dan solusi di atas tidak bekerja untuk saya.

Dengan jawaban yang lain tidak salah, tapi aku menemukan ini untuk menjadi yang tercepat.

1. Download file zip dari Google font dan unzip.
2. Meng-Upload file font 3 pada suatu waktu untuk http://www.fontsquirrel.com/tools/webfont-generator
3. Download hasil.

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

DAN sebagai bonus tambahan mereka menghasilkan file css untuk anda juga!

Lihatlah ini berguna artikel untuk menjelaskan bagaimana cara menggunakan Google font offline

Pada dasarnya anda adalah termasuk jenis huruf 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');

3 langkah:

1. Download font kustom anda pada Goole Font dan down load .file css ex: Download http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 dan simpan sebagai contoh.css
2. Buka file yang anda download (contoh.css). Sekarang anda harus men-download semua font-face file dan menyimpannya pada font direktori.
3. Edit contoh.css: mengganti semua font-face file untuk anda .css download

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

Melihat src: -> url. Download http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 dan simpan ke font direktori. Setelah itu mengubah url untuk semua file yang didownload. Sekarang akan terlihat seperti

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

** Download semua font yang mengandung .file css Berharap ini akan membantu u

Ketika menggunakan Google Font, alur kerja anda dibagi dalam 3 langkah : "Pilih", "Menyesuaikan", "Cantumkan". Jika anda melihat dekat, di ujung kanan "Gunakan" di halaman, ada panah kecil yang memungkinkan anda untuk men-download font yang saat ini dalam koleksi anda.

Setelah itu, dan sekali font yang diinstal pada sistem anda, anda hanya perlu menggunakannya seperti biasa lainnya jenis huruf menggunakan font-family CSS direktif.

Jika anda'd seperti untuk secara eksplisit menyatakan paket dependensi atau mengotomatisasi download, anda dapat menambahkan node paket menarik di google font dan sajikan secara lokal.

npm - Google Download Fonts

The tipografi proyek menciptakan NPM packages untuk tipografi Open Source :

masing-Masing paket kapal dengan semua yang diperlukan fons dan css untuk self-host open source huruf. Font Google telah menambahkan serta daftar kecil namun tumbuh dari open source lainnya font.

Hanya pencarian npm untuk huruf-<typefacename> untuk mencari font yang tersedia seperti huruf-roboto atau huruf-open sans dan menginstal seperti ini:

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

npm - Google Font Download-ers

Untuk lebih generik menggunakan kasus, ada beberapa npm packages yang akan memberikan font dalam dua langkah, pertama dengan mendapatkan paket, dan kemudian dengan menunjuk ke nama font dan pilihan anda'd ingin memiliki.

Berikut adalah beberapa pilihan:

• Font Google Webpack Plugin
• Font Google Offline
• Google Font
• Google Font

Bacaan Lebih Lanjut:

• Bagaimana untuk meng-host material ikon offline?
• Menggunakan Bahan offline ikon dan font Roboto di Elektron app

Aku mengikuti duydb's jawaban untuk menghasilkan kode python di bawah ini yang mengotomatisasi 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 bisa membantu dengan beberapa copy-paste kematian.

Anda perlu untuk men-download font dan referensi lokal.

Download CSS dari link anda diposting, kemudian download semua WOFF file (jika diperlukan) mengkonversi mereka untuk TTF.

Kemudian mengubah CSS dari link anda diposting untuk memasukkan font lokal.

Dari

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

Untuk

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

Voila! Mungkin ada beberapa lagi yang perlu anda lakukan tapi di atas adalah dasar-dasar. Artikel ini menjelaskan sedikit lebih baik.

hanya men-download huruf dan ekstrak di folder. maka link yang huruf. kode di bawah ini bekerja untuk saya dengan benar.

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