Mendownload font Google dan menyiapkan situs offline yang menggunakannya

141

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?

css  fonts  offline  google-fonts 
— pengguna2147954
sumber

Jawaban:

101

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'>
— Dmitriy Butenko
sumber
9
Saya masih tidak mengerti
— user2147954
23
Tidak seperti font Google ketika server oleh Google, pendekatan ini bergantung pada format WOFF saja dan dengan demikian pada dasarnya lebih terbatas. Selain itu, Google mendistribusikan font mereka dalam format TTF, bukan WOFF.
— Jukka K. Korpela
26
Hati-hati, fonts.googleapis menghasilkan deklarasi @ font-face yang berbeda untuk browser yang berbeda.
— Hüseyin Yağlı
8
Ini TIDAK benar karena Google mengirimkan file CSS khusus browser dari fonts.googleapis.com/… Jadi jika Anda membuka ini dengan Chrome, Anda akan mendapatkan @ font-face yang berbeda dari membukanya dengan IE atau browser lain. Font WOFF2 misalnya hanya akan dikirim ke Firefox dan Chrome karena browser lain belum mendukungnya. caniuse.com/#feat=woff2
— Joost van der Laan
5
Abaikan jawaban ini terlepas dari status diterima. Itu tidak benar seperti yang ditunjukkan Joost van der Laan di sini. Lihat jawaban skor tinggi oleh @ marco-kerwitz di bawah ini yang harus ditandai sebagai jawaban yang benar.
— Appurist - Paul W
332

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 .

— Marco Kerwitz
sumber
21
Saya hanya bertanya-tanya mengapa Google tidak melakukan ini sejak awal? +1
— tftd
3
Ini berfungsi dengan baik, Pastikan Anda menyatakan jenis konten masing-masing saat menautkan dari file lokalContent-type: text/css; charset: UTF-8
— Clain Dsilva
Jika Anda menggunakan webpack atau alat lain yang mengemas impor CSS / SASS maka pendekatan ini adalah yang terbaik. Pertanyaan ini menjelaskan prosesnya dengan lebih detail.
— Laju
Terima kasih banyak atas petunjuknya. Menyelamatkan hariku!
— evnica
1
one-liner , jalankan di direktori target: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
44

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.

— 1111161171159459134
sumber
1
Langkah-langkah ini bekerja dengan sempurna. Saya hanya ingin menambahkan itu untuk mereka yang belum menggunakan ekstensi file woff untuk memastikan dan menambahkan mimetype itu di web.config.
— Coding101
1
Tidak perlu konverter. Lihat jawaban Marco Kerwitz.
— Herr_Schwabullek
25

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!

— sym3tri
sumber
+1 untuk jawaban yang tidak perlu saya pikirkan saat membacanya. Akan luar biasa menemukan konverter font google langsung tanpa harus mengunggahnya sebelumnya. Contoh utilitas: saat melakukan pengelolaan situs offline.
— Meetai.com
Ini sangat nyaman untuk memiliki berbagai format font yang dibuat untuk Anda. Tetapi siapa pun yang menggunakannya harus menyadari bahwa css yang dihasilkan tidak terlalu pintar, ia akan menghasilkan dua (atau lebih) gaya font yang sama sebagai keluarga font terpisah, bukan satu keluarga font dengan bobot font berbeda. Tapi cukup mudah untuk memperbaikinya sendiri di css.
— Ken Sung
2
Tidak perlu konverter. Lihatlah jawaban Marco Kerwitz
— Herr_Schwabullek
Saya dapat mengunggah 10 font sekaligus sehingga sepertinya batasan 3 font telah dihapus atau ditingkatkan
— Adrian Hedley
5

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:

Bacaan Lebih Lanjut :

— KyleMit
sumber
4

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

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

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

— duydb.dll
sumber
3

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');
— davidb
sumber
tautan mati ke artikel
— TecHunter
Unduhan tidak menyertakan file .eot
— frustrated-dev
2

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.

— Pierre-Adrien Buisson
sumber
0

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.

— Wytamma Wirth
sumber
-1

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.

— Mattios550
sumber
MELAKUKAN hal yang sama tetapi halaman lain mengalami distorsi. : <link href = "./ css / font.woff" rel = 'stylesheet' type = 'text / css'>
— user2147954
Apakah file font Anda disebut font.woff? Apakah Anda sudah memeriksa bahwa file telah dimuat?
— Terry
@ Terry Saya tidak yakin apa yang Anda maksud - itu adalah nama fiksi untuk file tersebut.
— Mattios550
-3

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); 
}
— Ashish waman
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.