nextjs tailwind googlefonts selfhost starter
1.0.0
Tipografi dapat membuat aplikasi Anda Zing !!!
Menambahkan Google Font memungkinkan Anda menggunakan font khusus di aplikasi Anda. Mereka diiklankan sebagai gratis dan ada lebih dari 900+ keluarga font untuk dipilih. Sejak 2018, Google telah merekomendasikan untuk menjadi tuan rumah sendiri sebagai cara untuk menambahkan font mereka.
Ada sejumlah font aman web , yang gratis dan dibangun ke dalam berbagai platform. Namun, kadang -kadang kita membutuhkan sesuatu yang lebih disesuaikan, untuk melayani tujuan desain kita.
Jadi "Tanpa Lagi-Do-Do" ...
repo ini secara khusus menargetkan tuan rumah mandiri google font, daripada menggunakan tautan ke CDN mereka, dan cara mengintegrasikannya ke dalam aplikasi berikutnya.js yang menggunakan CSS tailwind.
Ada sejumlah pro dan kontra untuk hosting sendiri, yang telah dibahas dalam banyak artikel dan blog, saya tidak akan merinci ini di sini. Saya telah menyediakan beberapa tautan di akhir file readme ini, untuk bacaan lebih lanjut.
Google Font diiklankan sebagai open source dan gratis untuk digunakan ...
Tapi jangan ambil kata -kata saya untuk itu, (saya bukan orang awam dan ini bukan nasihat hukum)
Semua font yang digunakan dalam contoh ini bersumber dari Google Fonts di bawah Sil Open Font License (OFL) v1.1. Saya telah berhati-hati untuk memasukkan lisensi ke dalam folder self-hosting di dalam repo, yang diminta di OFL.
Catatan: Anda harus selalu membaca informasi lisensi font sendiri karena Anda bertanggung jawab untuk mengikutinya. Pada saat ini Google Font menggunakan V1.1, beberapa menggunakan lisensi Apache 2. Font Ubuntu menggunakan lisensi font ubuntu v1.0
Anda harus mencari nasihat hukum sebelum hosting sendiri atau menggunakan font khusus apa pun.
Lihat kode yang demo di sini
Anda bisa mendapatkan google font dalam beberapa cara, (ini bukan daftar exhausitive), menggunakan alat berikut:
Font juga dapat ditemukan di googles github repo.
Setelah, Anda telah mengunduhnya, Anda dapat menambahkannya ke proyek Anda ke tuan rumah mandiri.
Cara termudah untuk meng -host mereka adalah di bawah folder public , di sub folder bernama fonts .
Saya telah menyusun lokasi sumber daya font sebagai berikut, Anda tidak perlu mengikuti ini, ini menunjukkan fleksibilitas dan bahwa semua font dapat diatur daripada hanya ditempatkan di bawah sub folder
fonts.
├── public
| └── fonts
| └── google
│ ├── font(s) by name
│ │ │ ├── .woff / .ttf (etc)
│ │ │ ├── .css
│ │ │ ├── licence.txt
├── styles
| └── global.css (app-base.css)
├── .gitignore
├── jsconfig.json
├── postcss.config.js
├── tailwind.config.js
Font akan menjadi serverd dari lokasi ini ke aplikasi berikutnya.js kami.
Setelah kami mengunduh file font, lisensi, stylesheet dll dan menyusun folder, kami perlu melakukan pemuatan font.
Kita dapat menggunakan @font-face untuk memuat font. Lihat file CSS yang ditempatkan di samping sumber daya font di folder font di atas.
Kami akhirnya dapat mengimpor ini ke file CSS gaya Tailwind. Biasanya ini disebut global.css , saya menggunakan 3 file yang diimpor ke file next.js _app.js.
Misalnya:
@font-face {
font-family : 'Oswald Variable' ; /*Ive added a prefix to let me know its a variable font*/
font-style : normal;
font-weight : 200 700 ;
src : local ( 'Oswald' ) ,
url (/fonts/google/oswald/Oswald-VariableFont_wght.ttf) format ( 'truetype' );
font-display : swap;
} Kami selanjutnya melakukan beberapa optimisasi kecil untuk pemuatan font menggunakan atribut font-display .
Dengan menggunakan @font-face dalam kombinasi dengan atribut font-display kita dapat mencegah fout dan foit.
Ada sejumlah strategi yang tersedia untuk mengimplementasikan ini:
| Strategi | Keterangan |
|---|---|
1. block | Jangan memberikan apapun kepada pengguna sampai font dimuat. |
2. swap | Direkomendasikan untuk Google Fonts. Ini akan bertukar setelah font memuat. |
3. fallback | tidak direkomendasikan. Itu masih menunjukkan teks seperti blok yang tidak terlihat untuk waktu yang singkat, tetapi pada akhirnya akan mundur ke font yang aman. |
4. optional | Pilihan yang baik ketika font tidak penting, lebih fokus pada merek dan konten. Seperti fallback yang terhubung lambat yang bahkan mungkin tidak memuat font. |
Ini adalah aturan baru yang dapat Anda tambahkan ke deklarasi font-face Anda yang memberitahu browser untuk menggunakan sistem fallback aman-font yang telah Anda daftarkan (misalnya sans serif), kemudian bertukar ke font yang diinginkan ketika telah diunduh.
Ini adalah peningkatan kinerja yang baik karena menampilkan konten tanpa menunggu unduhan selesai.
font-display: swap; memang memiliki kelemahan mem -flash teks yang tidak tertutup ini jika font belum dimuat. Tapi kita bisa mengatasinya dengan preload.
Kami dapat memuat font kami di <head> aplikasi halaman kami. Ini sangat berguna untuk potongan -potongan kritis tipografi yang ingin kami tampilkan tanpa berkedip.
TODO ini, kami dapat menambahkan <preload> ke kepala halaman kami.
Di Next.js kami menambahkannya ke dalam _document.js khusus sebagai berikut:
< Head >
< link
rel =" preload "
href =" /fonts/google/grandstander/Grandstander-VariableFont_wght.ttf "
as =" font "
type =" font/ttf "
crossOrigin =" anonymous "
/>
</ Head > Catatan: Hati -hati saat menggunakan preload, karena dapat memiliki efek negatif, jika digunakan secara berlebihan. Jadi kami menggunakannya dengan bijak. Ini cara menetapkan pentingnya sumber daya, kita juga dapat melakukan hal yang sama untuk sumber daya script kita jika perlu.
Selanjutnya kami membuat file Fonts.css di bawah folder publicfonts . Di sinilah kami mengimpor berbagai file CCS untuk sumber daya font google yang dimuat menggunakan @font-face di atas, yaitu
@import './google/oswald/Oswald-Variable.css' ;Ini kemudian diimpor ke file gaya Tailwind di bawah ini.
Selanjutnya kami menambahkan yang berikut ke file app-base.css di bawah folder ./styles .
Kami menggunakan arahan @layer untuk memberi tahu tailwind mana "ember" kami menambahkan gaya font juga.
Arahan lapisan yang valid adalah dasar, komponen, dan utilitas.
Misalnya:
@layer base {
@import "../public/fonts/fonts.css";
}
Kami kemudian mengimpor gaya ke file _app.js :
import '@/styles/app-base.css';
import '@/styles/app-components.css';
import '@/styles/app-utilities.css';
Akhirnya, kami mengatur file tailwind.config.js untuk menambahkan keluarga font ke aplikasi kami. Kami menambahkannya ke tema font dasar atau memperluas tema (atau keduanya).
Misalnya:
const { fontFamily } = require('tailwindcss/defaultTheme');
module.exports = {
fontFamily: {
sans: ['Oswald Variable, Arial', fontFamily.serif],
serif: ['Merriweather Sans, Georgia', fontFamily.serif],
},
extend: {
fontFamily: {
'Grandstander-VariableFont': ['Grandstander Variable'],
},
},
},
;
Itu saja. Kami selesai, lihat kode untuk lebih detail.
Terima kasih sudah membaca. ? ?
Tolong bintilah saya, jika Anda menemukan ini berguna.
Berikut ini, informasi lebih lanjut untuk mereka yang mungkin menganggapnya berguna. ?
Ingat Anda dapat menggunakan Lighthouse untuk menguji kinerja halaman Anda, ini juga akan mencari optimasi font dan skrip dan menyertakan rekomendasi, termasuk masalah fout dan foit.
Setelah dibangun, saya senang mengatakan demo ini mendapat berikut saat berlari secara lokal.
Alasan utama saya memilih untuk menjadi tuan rumah sendiri, adalah sebagai berikut:
| 1. Google merekomendasikannya | Sekarang direkomendasikan oleh Google sendiri. Sejak 2018, Google telah merekomendasikan hosting mandiri, untuk peformansi optimal melalui preloading. Penculik diri sendiri gratis dan dianjurkan, lihat video ini: Google Chrome Developers: Web Performance Made Easy. |
| 2. Lebih baik untuk privasi | Pihak ke -3 CDN dapat menggunakan cookie dan algoritma pelacakan yang tidak perlu Anda ketahui. Ini bisa menjadi masalah di negara-negara di mana Anda memerlukan persetujuan pengguna, (yaitu privasi data dan GDPR, lihat: GDPR-Kepatuhan Google Fonts. |
| 3. Lebih baik untuk keamanan | lebih banyak kontrol di server Anda sendiri). Anda benar -benar menelepon setidaknya 2 domain saat menggunakan CDN. |
| 4. Lebih cepat dan lebih peformant | Google Font menambah sumber daya yang mungkin tidak Anda butuhkan. Anda dapat memilih gaya font, dll dan bundel dan meminimalkan aturan/file CSS terkait font Anda sendiri, memberikan lebih sedikit permintaan HTTP. Anda dapat melakukan ini dengan melayani font dan unicodes spesifik yang Anda butuhkan untuk tipografi situs Anda. Menentukan bagian keluarga font daripada seluruh keluarga. Anda dapat memilih gaya font, dll dan bundel dan meminimalkan aturan/file CSS terkait font Anda sendiri, memberikan lebih sedikit permintaan HTTP. |
| 5. Ketersediaan offline | Untuk aplikasi seluler dan desktop yang diakses secara offline. |
Cobalah ini sendiri.
Saya akan mendorong Anda untuk menguji dengan situs/aplikasi spesifik Anda dan menggunakan alat dev yang dikombinasikan dengan "Disable Cache" dan kemampuan bawaan untuk mengubah kecepatan koneksi.
Saya belum membahas penggunaan npm packages untuk menambahkan font. Ada sejumlah rasa yang tersedia online jika ini preferensi Anda.
Beberapa alternatif adalah mencoba menggunakan fontsource , atau font google berikutnya .
