Beranda>Sumber daya pembuatan situs web>Pengunduhan font
Unduh

Proyek Typefaces sekarang sudah usang.

@DecliningLotus membuat fontsource yang menyediakan fungsionalitas yang sama seperti tipografi tetapi dengan rilis otomatis & dukungan yang lebih kaya untuk mengimpor bobot, gaya, atau subset bahasa tertentu.

Untuk mulai menggunakan FontSource, ganti dalam paket Anda.json Setiap contoh "Typeface- " dengan "@fontsource/ ".

Kemudian ubah impor dari misalnya "impor 'typeface-roboto'" menjadi "impor '@fontsource/roboto/latin.css'".

Paket jenis huruf akan terus bekerja tanpa batas waktu sehingga tidak diperlukan perubahan langsung.

Tipografi

Paket NPM untuk tipografi open source-membuatnya lebih mudah untuk menjadi tuan rumah webfont sendiri.

https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/

Mengapa

  • Pemeriksaan diri sendiri secara signifikan lebih cepat . Memuat jenis huruf dari Google Fonts atau layanan font yang di -host lainnya menambahkan permintaan jaringan tambahan (pemblokiran) . Dalam pengujian saya, saya telah menemukan mengganti font google dengan font yang diselenggarakan sendiri dapat meningkatkan speedIndex situs sebesar ~ 300 miletik di desktop dan 1+ detik pada 3G. Ini masalah besar.
  • Font Anda memuat offline . Sangat menjengkelkan untuk mulai mengerjakan proyek web di kereta atau pesawat dan melihat antarmuka Anda kacau karena Anda tidak dapat mengakses Google Fonts. Saya ingat pernah berada dalam situasi ini dan melakukan segala yang mungkin untuk menghindari memuat ulang proyek karena saya tahu saya akan kehilangan font dan dipaksa untuk berhenti bekerja.
  • Melampaui Google Fonts . Beberapa tipografi favorit saya tidak ada di google font seperti Clear Sans, Cooper Hewitt, dan Aleo.
  • Semua dependensi Web (Situs | App) harus dikelola melalui NPM jika memungkinkan. Itu cara modern.

Apa

Setiap paket jenis huruf dikirimkan dengan semua file font yang diperlukan dan CSS untuk menjadi tuan rumah sendiri jenis huruf open source.

Semua font Google telah ditambahkan serta daftar kecil tapi terus bertambah dari font open source lainnya. Buka masalah jika Anda ingin font ditambahkan!

Bagaimana

Tidak bisa lebih mudah. Beginilah cara Anda menambahkan sans terbuka. 

 npm install --save typeface-open-sans

Kemudian di file entri aplikasi atau situs Anda. 

 require ( "typeface-open-sans" )

Dan itu saja! Anda sekarang menuam sendiri sans terbuka!

Butuh <5 menit untuk menukar google font.

Typeface mengasumsikan Anda menggunakan Webpack dengan pengaturan Loader untuk memuat file CSS dan font (Anda dapat menggunakan jenis huruf dengan pengaturan lain tetapi Webpack membuat segalanya benar -benar sederhana). Dengan asumsi konfigurasi webpack Anda diatur dengan benar Anda maka hanya perlu memerlukan jenis huruf di file entri untuk proyek Anda.

Banyak alat yang dibangun dengan Webpack seperti Gatsby dan Create React App sudah diatur untuk bekerja dengan tipografi. Gatsby secara default juga menanamkan CSS Anda di <head> Anda untuk pemuatan yang lebih cepat.

Jika Anda tidak menggunakan Webpack atau alat yang setara yang memungkinkan Anda memerlukan CSS, maka Anda harus mengintegrasikan secara manual index.css dan file font dari paket ke dalam sistem build Anda.

Alternatif tanpa Webpack

  • Untuk pengguna Ember, ada addon https://github.com/jeffjewiss/ember-typeface

Menambahkan font lainnya

Cara termudah untuk mengetahui apakah jenis huruf favorit Anda didukung adalah dengan mencari di NPM atau di direktori paket dalam repo ini.

Saya ingin melihat setiap font open source di NPM! Buka masalah jika jenis huruf favorit Anda hilang. Saya telah secara terprogram menerbitkan semua font dari Google Fonts dan saya berencana melakukan hal yang sama dengan font yang di -host di fontsquirrel melalui API mereka.

Ide Lain Untuk Menjelajahi

  • Tambahkan versi subset dari setiap font.
  • Awalnya saya baru saja menambahkan dukungan untuk font versi Latin. Ingin sekali mendengar ide untuk mendukung bahasa lain. Mungkin file CSS tambahan require('open-sans/greek.css') ?
  • Kapal Fallback CSS Helters - Mencari CSS fallback Anda tidak terlalu mudah. Mungkin ada cara untuk mengotomatisasi ini. Misalnya jika Anda menggunakan Typeface X di fontsize y dengan Fallback Font Z, berikut adalah fungsi untuk menghasilkan CSS Fallback.
  • Jelajahi optimasi yang lebih futher untuk memuat font. https://www.zachleat.com/web/compehensive-webfonts/ memiliki daftar panjang. Sebagian besar membutuhkan skrip per proyek yang menyakitkan. Bagaimana jika strategi terbaik dapat diotomatisasi?
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua