Ngobrolin Font
Ringkasan Episode
Bantu KoreksiFont dipilih sebagai topik justru karena jarang dibahas orang, padahal separuh isi web adalah teks. Ia bisa membuat halaman terlihat bagus atau jelek, tapi juga bisa membengkakkan ukuran halaman, memblokir rendering, bahkan membuat seluruh teks tidak muncul sama sekali kalau font-display disetel keliru dan file-nya gagal diunduh. Episodenya dibuka dengan meluruskan istilah: typeface adalah kelompok gayanya, font file adalah berkas untuk tiap variasi, dan yang kita tulis di CSS sebagai font-family sebenarnya merujuk typeface. Saran teknis pertamanya tegas: jangan impor font lewat @import di CSS, karena browser harus mengunduh HTML, lalu CSS, lalu mem-parsing, lalu baru tahu ada impor lain, lalu baru memanggil file font — rantai panjang yang seluruhnya memblokir render. Meng-host font sendiri lebih baik karena kita bisa melakukan preload dan menghemat satu langkah DNS resolve. Dibahas juga bahwa font-display swap menyelesaikan masalah teks tak tampil, tapi memunculkan masalah baru berupa pergeseran layout ketika font asli akhirnya menggantikan fallback-nya. Solusi untuk masalah baru itu bagian paling praktis: setel font fallback dengan size-adjust dan ascent-override agar jumlah barisnya sama persis, dan pakai Fontaine kalau tidak mau menghitung sendiri. Ivan menceritakan hasil menggabungkan itu dengan CSS kritis yang di-inline dan sisanya ditunda — LCP-nya turun dari sekitar 2,3 detik ke sekitar 1,5 detik, hanya dari urusan font. Ditutup dengan variable font, unicode-range untuk memangkas karakter yang tidak dipakai, dan alasan mengapa memuat font ikon demi tiga ikon itu pemborosan.
Poin-poin Utama
- •Jangan impor font lewat @import di CSS: browser harus mengunduh HTML, lalu CSS, mem-parsing, baru tahu ada impor lain, baru memanggil file font — rantai panjang yang memblokir render
- •Meng-host font sendiri lebih baik karena kita bisa melakukan preload dan memangkas satu langkah DNS resolve ke origin lain
- •font-display swap menyelesaikan teks yang tidak muncul, tapi menimbulkan pergeseran layout — perbaiki dengan size-adjust dan ascent-override pada fallback-nya, atau pakai Fontaine agar dihitungkan otomatis
- •Menggabungkan CSS kritis yang di-inline dengan font yang ditunda menurunkan LCP dari sekitar 2,3 detik ke sekitar 1,5 detik — hanya dari urusan font
- •Muat hanya varian yang benar-benar dipakai: kalau panduan desain memakai satu typeface khusus untuk header dengan bobot tebal saja, tidak perlu ikut mengunduh versi normalnya
- •unicode-range memangkas karakter yang tidak pernah dipakai, dan untuk teks yang tidak pernah berubah seperti nama situs, font bisa dimuat khusus untuk teks itu saja
- •Memuat font ikon demi tiga ikon itu pemborosan puluhan sampai ratusan kilobyte — SVG inline lebih tepat, dan pustaka ikonnya sendiri kini sudah bergeser ke SVG
Halo, selamat malam.
Halo, selamat malam.
Dan hari ini kita adalah akunnya ngobrol sama kita bertiga.
Trio GDE Web Indonesia.
Ada Eita dan juga ada Ivan.
Halo.
Gimana kabarnya semuanya?
Baik.
Wah, ini sudah ada.
Mas, Andi, apasihnya rutin acara favorit, asik.
Wah, udah ada yang nonton acara favorit, luar biasa.
Sudah punya pengikut seti, pengikut penenger.
Penonton.
Penonton.
Oke, oke.
Malam hari ini kita punya topik yang cukup mental sebenarnya ya.
Kita ngobrol-ngobrol kayaknya topik following ini apa ya?
Ivan adalah salah satu asik, selain image dan juga JavaScript tentunya,
yang bisa membuat web itu tampilannya bagus banget, biasa aja, terjelek banget.
Selain tampilan juga performa, ngaruhnya banyak ini.
Betul.
Coba bayangkan kalau kita pakai Comic Sans.
Kalau kita tilik secara web ya, kalau ngomong web,
yang komponen utama web itu kalau nggak text, image kan?
Image.
Iya, betul.
Dan, berarti text itu 50% yang membangun web itu kan, yang kita baca itu, text ya kan?
Salah satunya text, itu 50%nya gitu.
Jadi, kita selalu bahas JavaScript, kita bahas CSS, kita bahas fancy stuff,
island architecture, tetapi kali ini, yuk kita bahas satu yang jarang dibahas orang gitu.
Lihat transkrip lengkap (1641 segmen lagi)
Fonts, typography.
Font ini bisa bikin web kita ukurannya membengkap gara-gara kita nggak care gitu ya.
Cuek aja gitu ya, yang penting bagus tampilan.
Tapi bisa juga, ya sebaliknya gitu, kita bisa optimize dengan
membuat tidak mengorbankan tampilan di web kita, performanya juga tetap bagus.
Jadi, win-win, win-win solution ya.
Bisa juga membuat situs kita kalau dia melanggar privacy,
contohnya menggunakan fonts yang dari the party, ya kan?
Bisa melanggar GDPR juga, ya kan?
Kalau nggak, nggak.
Atau malah file fontnya diblokir, jadi nggak muncul.
Textnya nggak bisa dibaca kalau kita salah pakai property font display, ya kan?
Terus fontnya di origin yang diblokir di negara tertentu, misalnya nggak boleh akses domain tertentu.
Nah, terus bisa nggak muncul sama sekali tuh textnya sehalaman, pusing-pusing nggak.
Wih, ada Mas Danang.
Mas Danang nonton.
Hadir.
Kita jadi ngeri.
Harus hati-hati deh, ngomong ya.
Emang biasanya gimana?
Kita mah aman kalau ada bintang tamu baru nih.
Kayak tahun, gara-gara episode Kenaten jadi dipancang.
Dipancang.
Ini juga ada siapa nih?
Gimana ini spelling-nya?
T-H-U-E-J-K-S-I.
Ada Ilham juga.
Halo semuanya, selamat datang.
Oke, Ivan, gimana? Apa yang mau kita bahas pertama nih tentang font?
Oh, itu dulu istilah.
Ada typeface, ada font family, ada font.
Itu dulu.
Typeface dulu lah.
Typeface itu kan kelompok style yang menampilkan huruf.
Jadi kayak misalnya gampangnya typeface itu Helvetica, Arial.
Comic Sans typeface kesukaan kita semua.
Jadi itu bukan nama font tapi nama typeface.
Maksud Sans dan Sans Serif itu typeface?
Itu bukan typeface kan?
Bukan, itu style.
Oh, style.
Ada serif, sans serif, ada display, ada handwriting, ada print.
Mono space ya?
Iya, mono space.
Nah, masing-masing browser, masing-masing OS itu punya typeface bawaan sendiri
yang dipakai kalau misalnya fallbacknya kita pakai sans atau sans serif.
Nah, itu tergantung ke masing-masing.
Jadi kalau kita di Android atau di Mac itu bisa lain-lain.
Typeface, Helvetica itu misalnya Helvetica lah, contohnya atau Comic Sans MS.
Itu kan ada macam-macam, ada yang bold.
Kadang bold juga ada macam-macam kan, ada yang heavy, font weight-nya 900.
Kalau di CSS font weight.
Ada yang tebal banget, ada yang tebal aja, ada yang heavy, black, bold.
Ada yang narrow, kalau narrow beda lagi.
Beda lagi gitu.
Pusing gitu.
Ada yang italic, ada yang miring, ada yang lempeng.
Nah, itu variasi font-nya.
Masing-masing kan ada file-nya tuh kalau jaman masih pakai file.ttf ya.
Nah, ini entar bahas format file juga nggak sih?
Ya boleh, boleh kita bahas ttf, wof, ttf, wof, wof2, ada banyak kan.
OTF, Open Typeface.
Nah, jadi dari satu typeface, dia bisa punya banyak file.
Nah, itu disebut font-file.
Jadi font itu satu typeface bisa punya banyak font-file.
Cuma kalau di CSS kita pakenya apa, property-nya font-family ya.
Kita menyebut typeface itu font-family.
Itu istilah aja.
Terus selanjut, selanjut apa tuh?
Walaupun ada apa ya, ada shortcut-nya kan font.2 sebenarnya bisa kan.
Oh iya, karena ribet ya buat override-nya.
Panjang.
Nah, cara nampilin font gimana kalau di CSS?
Pakai font-family, tapi kan sebelumnya kita harus import dulu kan.
Nah, cara import font itu ada 2 kan ya.
Satu, bisa import via CSS langsung, tapi via URL.
Atau importnya via... yang saya maksud import itu link ya, link URL.
Contohnya kayak Google Fonts, Adobe Fonts, ya kan.
Biasanya dari HTML atau dari CSS dengan @import gitu ya URL-nya.
Sebisa mungkin tips, jangan import dari CSS.
Jangan, karena itu lambat performanya.
Jadi kalau kita import dari CSS yang terjadi saat page load,
dia harus download, si browser harus download dulu file CSS-nya.
Baru dia parsing CSS-nya, baru dia tahu tuh import file CSS.
Kan sebenarnya import CSS dari Google Font itu kan sebenarnya yang diimport CSS kan.
Baru di dalam CSS-nya itu mendefinisikan font file-nya, URL font file.
Jadinya berapa kali loncatan tuh.
Pertama, download HTML-nya kita.
Kedua, download dulu CSS-nya, parsing CSS-nya.
Import CSS dari external, baru manggil font.
Banyak banget, itu sudah render blocking.
Biasanya kalau pakai Lighthouse, sekarang dikasih warning ya, avoid chaining, blablabla.
Ada chaining-nya lah.
Chaining CSS gitu ya.
Nggak tahu lah bahasa internalnya apa.
Itu kan URL, kalau lokal gimana?
Kalau lokal maksudnya font-nya lokal atau?
Font lokal, ya font lokal.
Jadi pakai Arial atau gimana?
Bukan, misalkan kita di server sendiri lah.
Oh, self-hosted, maksudnya.
Maksudnya di folder yang berbeda, misalkan /assets/fonts gitu.
Public /myfonts juga.
Tapi itu kan ini ya, itu langsung file font-nya kan yang kita import.
Kita tetap harus manggil.
Tetap harus pakai.
Tapi import-nya kan ke relative path.
Dan kita self-hosted.
Tetapi di ininya kita, di HTML header-nya kita,
sudah preload duluan font-nya kalau bisa.
Biasanya kalau sudah pakai bundler canggih-canggih kayak Next atau apa,
biasanya dia sudah tambahkan itu, preload font-nya itu.
Sudah otomatis.
Jadi salah satu kelebihan dari kita load font di HTML adalah kita bisa preload.
Ya, karena kita sudah tahu url ke file .tf atau .wav-nya itu kan kita sudah punya.
Jadi kita preload dulu semua.
Jadi waktu CSS-nya didownload, saat definisi typography-nya kita, saat definisi fonts,
file font-nya sudah didownload, definisinya sudah tinggal download, ya tinggal render, jadi cepat.
Jadi kita bypass semua step-step yang chaining tadi itu.
Jadi lebih baik hosted sendiri.
Loh, Mas Tiza-nya hilang, pasti dia refresh tuh.
Loh, kok hilang?
Oh, bentar, low-bad katanya.
Nah, ini nih, mungkin ada yang belum tahu atau buat refresh,
kapan harus menge-import font-file, kapan nggak perlu.
Nah, kita tuh mesti nge-import kalau si font-file-nya nggak ada di sistem atau di device-nya user, ya kan.
Kalau misalnya, nah, masalahnya adalah masing-masing OS itu kan font bawaannya,
font-file yang udah ada tuh lain-lain.
Jadi kayak misalnya kalau di Mac itu di, apa, Mac OS itu sudah ada Helvetica.
Tapi kalau di Windows, Windows, Android nggak ada.
Jadi itu kita harus hati-hati buat nge-set.
Misalnya nih, kita mikir kita pengen, oh, biar loading-nya cepat,
nggak usah loading font yang kayak tadi tuh, nggak usah preload dan import macem-macem,
pakai aja yang udah ada di default OS.
Nah, itu boleh, cuma harus hati-hati dan pastikan font yang kita ingin pakai
itu ada di device-user, karena masing-masing OS lain-lain itu biasanya pakai yang namanya font stack.
Font stack itu jadi font family, apa, value dari font family itu bisa banyak.
Misalnya font A, font B, font C, font D, sampai terakhir, sans serif, fallback terakhir.
Nah, itu banyak tinggal googling aja, tinggal search aja font stack.
Jadi kayak misalnya ada kombinasi antara Arial, Helvetica, Trebuchet,
misalnya Trebuchet itu kalau nggak salah cuma ada di Windows atau semacamnya.
- Jadi itu... - Georgia?
Georgia kayaknya ada di mana-mana deh.
Nggak, Windows juga ada.
Jadi kalau misalnya kita pengen pakai font yang udah ada di system,
itu tetap harus diperhatikan biar semua kurang lebih experience-nya sama.
Tapi kalau misalnya kita pengen, kan apa, kadang ada style tipografi tertentu
atau mungkin ada estetika visual, misalnya untuk artikel long read yang biar dibacanya enak,
itu tetap web font nggak bisa dihindari ya, web font atau custom font sering kali nggak bisa dihindari.
Nah, speaking about ini fonts, yang paling sering itu masalahnya adalah font.
Flash of unstyled text.
Jadi yang terjadi adalah, kalau kita penggunakan terutama nih yang pakainya sebut merek dia Google Fonts,
tetapi nggak tahu nih cara pakainya.
Jadi semua di-load, Roboto di-load, atau Notosans, atau...
Inter.
Pokoknya sampai 5 fonts yang di-load,
berikut dengan style-nya semua, italic, bold 1, bold 2, normal, semuanya di-load.
Yang nanti download-nya itu bisa sampai 1 mega misalnya, contohnya.
Kalau dibuat download size itu bisa 1 mega.
Yang terjadi adalah, apa yang terjadi dengan web kita adalah, pertama itu sudah render blocking.
Kedua, kalau kita bisa pakai display swap, itu bisa terjadi CLS, Layout Safe.
Jadi pertama saat dia download, waktu ngerender, karena kita pakainya mode display font swap,
yang ditampilkan adalah fallback font-nya dulu.
Fallback duluan, yang sudah ada di user.
Lalu waktu di-replace saat font...
Itu kelar download ya, selesai download font file-nya.
Langsung berubah kan.
Kalau mau lebih dalam lagi, kerningnya berbeda, space-nya akhirnya ke push, dan tadinya loncat.
Jadi misalnya ada header-nya tadinya 2 baris, bisa jadi 3 baris.
Ke push kan?
Gimana nih cara menghindari CLS kalau dengan fonts?
Itu bisa buka link-nya dari Smashing Magazine.
Tadi kita belum buka link ya?
Smashing Magazine.
Smashing Magazine, betul.
Yang terakhir yang dari Eka.
Betul.
Jadi kita bisa reduce loading impact-nya pakai CSS font descriptor.
Coba zoom in.
Biar tulisannya kebaca.
Nah itu kan yang awal salah satu cara.
Jadi dulu banget kan masalahnya cuma sederhana yaitu F-O-U-T tadi ya.
Pertama masalahnya cuma satu.
Maksudnya kita cuma mikir masalah utamanya itu.
Itu sudah berhasil diatasin oleh si property font-display itu.
Jadi kalau default-nya kan font-display, value-nya block.
Nah kita bisa akali dengan font-display swap.
Swap yang tadi itu.
Pertama tampilin aja dulu text-nya jadi nggak kosong.
Kalau masih pakai block itu selama file-nya masih downloading itu kosong.
Text-nya nggak ditampilin.
Dan kalau download-nya gagal, bakal kosong kayak yang aku bilang tadi di awal.
Cuma dengan font-display swap, text-nya ditampilin pakai font yang ada aja dulu
di browser atau di OS user, begitu selesai download tadi diganti dengan custom web font yang baru.
Cuma muncul masalah baru, CLS ini kan.
- CLS, betul.
- Jadi kayak mainan, apa itu?
Gua ya di timezone itu di pukul satu, keluar lagi masalah awal diatasin,
sekarang ada masalah baru, CLS ini.
Solusinya ini nih ke bawah.
- Ini saya kena ini di proyek saya di sebulan lalu, dan pusing.
- Oh, optional nih. Ada lagi nih lucu.
Jadi tadinya cuma block sama swap, ada juga optional.
Jadi optional itu, mirip dengan swap, pertama tampilin dulu pakai font yang udah ada.
Cuma ada threshold waktu tertentu, masing-masing browser ngehandlingnya agak berbeda.
Jadi misalnya, kalau setelah 2 detik font file-nya nggak kedownload juga,
ya udah, anggap nggak ada.
Jadi kita tetap pakai font yang default.
Cuma ini masalahnya adalah, mungkin kalau dari kita sebagai web developer yang purely teknis,
nggak masalah ya, yang penting kan tekstnya kelihatan.
Cuma kan nggak bisa kayak gitu ke stakeholder lainnya.
Karena itu tadi typeface atau jenis font itu bisa mempengaruhi user experience dan mungkin branding.
Misalnya ada e-commerce yang jual produk emote unyu-unyu gitu.
Nah, itu kan mood-nya jadi rusak kalau semua jadi areal ya kan.
Padahal dia harus...
- Timeshoman, serius-serius. Kayak baca skripsi ya.
- Iya, nah itu bisa ngaruh ke misalnya jual produk untuk anak-anak atau apalah yang emang cute and fun.
Itu kan bisa bikin website jadi nggak menarik, jadi nggak laku.
Nah, itu bahaya banget.
Jadi itu tetap harus... itu salah satu solusi, cuma bukan solusi final.
Nah, ke bawah lagi coba.
- Jadi kita pakai fallback, tetapi kita atur pakai style matcher.
Jadi dia bisa spacing atau kerningnya serupa.
- Dicek ya miripannya gitu ya.
- Dicari yang mirip-mirip.
Jadi fallback font-nya diatur ke yang...
- Mendekati.
- Mendekati dan diadjust kerningnya supaya jangan sampai terjadi CLS.
- Jadi misalnya asli 4 baris dan setiap... misalnya 1 baris sekitar 1,5 rem.
Terus paragraf itu text-nya di render 4 baris.
Di font yang... font awal, font bawaan. Nah, di web font yang lagi di loading juga harus sama.
Harus 4 baris, karena kalau 5 baris atau 3 baris kan bikin isi di bawahnya loncana.
Jadi ini triknya adalah pakai CSS untuk fine-tuning si fallback font itu atau font yang di load pertama.
Ada link-nya dari EK, bisa dibuka aja langsung.
Pakainya itu namanya...
- Monster Matcher?
- Yang ada monsterat-nya mana ya tadi ya?
- Oh, satunya. Kalau ini, apa? Yang awal, yang lebih lama.
Kalau yang baru itu yang... bukan, yang pakai Netlify pokoknya yang URL-nya nggak niat.
- Ya, Netlify.
- Mana sih? - Udah ilang.
- Udah nggak ada? - Oh iya.
- Oh, di link dari Article Smashing? - Oh, dari Smashing.
- Eh, nggak ada. - Kayaknya iya deh.
- Ini? - Ini dihapus.
- Nggak ya. - Ini, ini, ini, ini.
- Ada, ada. - Ini, ini, ini, ini.
- Ini kan, Mui, ini, ini kan? - Bukan.
- Ini aja nih, gua... - Bukan, ada lagi.
- Oh, ada. Mana? - Ini, gua kirim ini via private chat.
- Very useful tool, coba. - Oh, ini.
- Private chat, private chat.
- Deploy preview. Waduh, ini masih preview ya.
- Emang gitu. URL-nya nggak niat.
- Jadi, contohnya kalau mau pakai IBM PlexSans, itu kan dari Google Font.
- Google Font. - Ya.
- Atau pilih deh. - Ini Google Font sama apa contohnya?
- Ya, contohnya... - Apa?
- Ya, tesarah deh. Ini contohnya IBM PlexSans ya.
- Jadi, kita bisa bikin font-face-nya fallback, terus pakai Size Adjust sama Ascent Override.
- Dan source-nya pakai Arial.
- Gitu. Jadi, dia pakai Arial, terus dibuat...
- Oh, ini ya? - Size Adjust sama Ascent Override.
- Tetapi Arial. Jadi, dia kiri itu. - Arial.
- Betul. Jadi, dia tuh. Jadi, nggak apa namanya?
- Nggak terjadi CLS kan? - Nggak berubah jauh.
- Bahkan kayaknya kalau user yang bukan developer, ini nggak sadar...
- Nggak tahu. - ...bahwa...
- Iya. Ini yang mana? - Kita juga beli...
- Yang mana? - Yang sebelah kanan.
- Yang ini jauh. - Yang sebelah kanan.
- Yang sebelah kanan itu ini. Coba... eh, coba...
- Gua nggak tahu, Inter. Coba ke Roboto. Lu ganti Roboto, biar gua lebih kenal.
- Yang aneh-aneh ini kayak Lobster juga.
- Lobster. Emang ada?
- Ada. - Ada, dong.
- Oh iya, jelas. - Oke. Mati Lobster yang sebelah kiri.
- Tetapi, tetap ininya, size-nya sama ya.
- Beda-beda dikit lah. - Nggak nge-
- Karena dangerous. - Iya.
- Oh, oke. - Jadi nggak terjadi CLS.
- Oh, menarik sekali ini.
- Iya. Untuk yang teman-teman...
...itu bisa buka NPM package-nya juga ada, pakai Fontaine namanya.
- Fontaine. - Link-nya saya, iya.
- Yup. Nah, sama. - Nah, kalau kita nggak mau hitung sendiri...
...pusing, ya kan? Tadi size-nya harus disesuaiin 86,001%.
- Ya, jadi ini sudah otomatis dia bikin fallback-nya...
...dan ngedetek file SES-nya kita...
...langsung otomatis menambahin fallback-nya...
...dan menambahkan. - Oke.
- Intinya, otomatis.
- Nambahin ini ya, sorry, mana tadi? Ini.
Nambahin yang ini, ya. SES aja.
- Betul, betul. Dia dilakukan otomatis...
...oleh Fontaine. - Oh.
- Dan kalau kita pakai... - Itu contohnya.
- Oh, itu contoh.
Kalau kita pakai framework kayak Next.js ini, terutama...
...Next.js yang 13 ini, yang baru itu...
...udah dihandle under the hood lah.
Jadi kayak dibalik layar, itu udah dihandling semua.
Semua, literally semua dari awal sampai akhir.
Jadi contohnya gini, kita pengen pakai Lobster.
Nah, itu kita tinggal import kayak import...
...ya, semacam import Lobster from...
...oh, import Next font.
Jadi kayak Next.js punya font library sendiri.
Terus kita semacam instantiate...
...kayak new web font atau semacamnya.
Kita tinggal specify mau pakai Lobster.
Itu semua dihandle dan bahkan yang menarik...
...walaupun kita pengen pakai Google font...
...oleh Next.js ini, di build time...
...file font-nya akan di download jadi lokal.
Jadi di-serve secara lokal.
Jadi dari origin kita sendiri.
Jadi misalnya ada beberapa negara ya...
...kayak contohnya Tiongkok kalau nggak salah...
...yang nge-block beberapa origin URL-nya Google.
Kayaknya NPM package-nya deh itu.
Gua lupa namanya.
Iya, tapi kan tetap lebih aman dan lebih cepat.
Kalau di lokal kita sendiri.
Maksudnya NPM package yang otomatis...
...misalnya untuk Adobe Fonts atau Google Fonts...
...dia otomatis akan download font-nya...
...simpan di lokal, waktu di build...
...file font-nya itu dia download dan simpan di lokal kita.
Tapi saya lupa namanya.
Sama.
Nah yang di Next.js 13 ini udah nge-gabungin semua...
...nge-download, masukin itu, nge-serve sama...
...termasuk font adjustment matrix-nya ini.
Udah beres semua.
Gila ya, makin fomo aja nih sama Next.js...
...kayaknya banyak banget ya inovasi-inovasinya ya.
Tapi walaupun kita tinggal terima beres...
...ya kita tetap harus tahu kan...
...dibalik itu teknologinya apa.
Karena ya mungkin nggak selamanya kita bisa...
...pakai Next.js untuk semua project dan...
...jadi tetap penting buat tahu.
Jangan jadi implementator.
Jadilah pesan moralnya ya.
Buat engineer yang benar gitu.
Engineer ya, malu sama istilah engineer ya.
Kalau cuma pakai-pakai doang.
Ya jangan implementator ya.
Ya tadi sebenarnya moralnya...
...lebih bagus kita menggunakan font...
...dari Google Fonts atau Adobe...
...atau konten hosting font yang ada di luar sana...
...atau mendingan kita hosting sendiri.
Tapi udah terjawab ya, mendingan hosting sendiri.
Hosting sendiri, hosting sendiri.
Jauh lebih baik dengan hosting sendiri...
...karena kita bisa preload.
Kalau preload itu kan harus...
...preload itu origin.
Oh originnya harus sama ya?
Kalau misalnya ada, kalau kita nggak...
...kalau Google Font mungkin dia sudah atur...
...dengan course ya.
Tapi lebih baik...
...atur dari CDN kita sendiri.
Bisa dikendalikan juga ya?
Ya lebih baik lah.
Lebih cepat juga.
Karena DNS resolve-nya aja sudah...
...sudah udah keskip kan.
Minimal 1 step DNS resolve-nya aja udah...
...sudah kita bisa ilangin.
Okay, okay.
Preface ya.
Gak perlu di preface lagi.
Kalau misalkan kita mau ngelakukan apa...
...yang dilakukan oleh SDS ya...
...mohon-mohon adalah...
...misalkan kita pengen pakai Longstar tadi...
...terus kita download...
...file font-nya...
...dari misalkan Google Font...
...atau dari tempat lain...
...kemudian kita hosting di...
...lokal kita sendiri gitu ya.
Betul, betul.
Plus gini juga...
...kalau yang dilakukan sama teman saya...
...urusan fonts beginian...
...jadi didesain itu misalnya...
...pakai Roboto misalnya.
Tetapi Roboto yang dipakai itu...
...hanya untuk header.
Dan hanya yang bold misalnya.
Hanya yang font weight 700.
Jangan semua di download.
Maksudnya selalu sama ya?
Selalu sama.
Jadi secara design guideline-nya...
...misalnya Roboto hanya dipakai di header...
...dengan font weight 700.
Dia nggak pernah dipakai di normal.
Dan nggak pernah dipakai di normal.
Jadi font yang dipakai...
...itu hanya yang bold aja.
That's it.
Jadi nggak dipakai lagi yang normal.
Kadang di file kita nggak bakal pakai...
...yang size normal.
Jadi lebih irit kan?
Lebih irit.
Jadi nggak perlu ngelod banyak font.
Jadi kita cuma limit 5 font file doang.
5 font file.
Dan itu cuma...
...tiga jenis font.
Tiga jenis font.
Tapi apakah dengan kita ngelod apa?
Kita download...
...atau kita gunakan di server state...
...di aplikasi kita.
Kita ikut di aplikasi kita...
...atau server state...
...atau di hosting yang lain yang kita punya.
Apakah fitur-fitur seperti display swap...
...dan lainnya itu tetap bisa dipakai?
Soalnya kalau di Google Font itu kan...
...ada bisa pakai URLnya kita tambahin...
...displace dengan swap, gitu kan?
Itu kan cuma CSS property.
Jadi waktu di...
Dia memanggil file CSS yang ada...
...property swap.
Di Font 10 tadi, persis itu kan...
...font face description-nya.
Ini apa?
Parameternya persis kayak gitu.
Kita initiate sendiri font face yang kita mau.
Iya.
Nah, satu trik lagi yang dari saya...
...itu...
...untuk mempercepat...
...itu bisa pakai yang namanya...
...differ non-critical CSS.
Jadi saya mau...
...kelaskan sedikit...
...bagaimana saya menggabungkan itu.
Coba deh gue yang ini.
Ya, silahkan.
Share screen.
Share screen sedikit aja.
Berbagi pengalaman.
Sambil nunggu.
Kalau hostnya GTP, bisa.
Dimana aja bisa.
Nah, jadi...
Kita bisa differ non-critical CSS.
Jadi ada critical CSS...
...dan non-critical CSS.
Artinya, yang critical CSS itu...
...CSS yang kita load...
...above the fold.
Logo, menu, header...
...title, LCP lah.
Semua yang di atas ya.
Kita hitungannya...
...critical CSS itu yang pakai mobile.
Mobile fold.
Approach-nya.
Jadi yang non-critical, kita differ.
Caranya...
...bisa pakai yang namanya...
...onload.
Jadi kita pertama link preload...
...style CSS...
...as style.
Terus setelah onload, kita...
...rubah rail-nya jadi stylesheet.
Jadi yang pertama terjadi adalah...
...kita preload style-nya.
Jadi dia non-blocking.
Terus kemudian...
...saat dia onload, selesai di load...
...pakai JavaScript...
...kita ganti dari rail preload...
...menjadi rail stylesheet.
Maka yang terjadi, si browser akan...
...ngedetek...
...ada stylesheet baru...
...maka dia akan apply ke tree.
Tetapi yang terjadi...
...sebelum, sorry...
...yang terjadi adalah...
...style yang kita...
...differ tadi...
...itu tidak akan...
...ngeganggu...
...rendering path.
Jadi dia nggak...
...ngge-blocking.
Kalau kita cuma...
...maksudnya kalau kita nge-load CSS ini...
...makanya terjadi dia adalah render blocking request.
Pertama, dia...
...gadetek, oke...
...kita butuh file CSS.
Maka dia download dulu file CSS.
Maka habis itu dia parsing...
...dan dia apply ke...
...CSS tree-nya.
Style tree-nya itu ya.
Yang saya lakukan...
...di...
...semua CSS yang kritikal...
...saya buat jadi inline...
...untuk mempercepat...
...untuk mempercepat...
...FCP sama LCP.
Kita udah pernah bahas juga ya...
...di beberapa MSG.
Saya eliminate render blocking ya.
Jadi saya...
...buat semua...
...kritikal CSS jadi inline.
Termasuk...
...fallback font yang dari...
...fontaine tadi.
Oh fontaine.
Oh ini.
Oke.
Contohnya, yang file ini...
...saya load di kritikal.
Di kritikal CSS...
...ini di-load.
Jadi yang terjadi adalah...
...file font itu saya anggap...
...non-critical.
Jadi dia di-load belakangan.
Jadi saat page load...
...inline CSS sudah ada.
Maka...
...semua FCP langsung muncul...
...kayak begitu HTML selesai...
...kalo misalnya...
...bahasa simpelnya...
...kalo...
...time to force byte-nya saya itu 800ms...
...dan...
...parsing segala macam yang 200-300ms...
...maka 1,1 detik...
...itu content above default...
...sama LCP-nya itu sudah muncul semua.
Karena inline CSS.
Selanjutnya...
...barulah dia...
...download file CSS...
...yang ada font definition...
...dan di swap.
Untuk menghindari CLS...
...saya pakai...
...override ini.
Nah jadinya...
...tetap akan keliatan...
...perubahan cek-cek sedikit ya...
...tetapi tidak dianggap sebagai...
...CLS. Yang terjadi adalah...
...LCP saya...
...dan LCP-nya meningkat tajam...
...dari 2,3 detik...
...LCP...
...itu turun menjadi sekitar 1,6...
...1,5 detik.
Cuma kartafon.
Cuma kartafon.
Big win.
Big win ya.
Gak perlu pusing-pusing...
...saya memikirkan bagaimana...
...dipeliting JavaScript...
...kemudian bla-bla-bla...
...hanya main saya utamakan...
...inline CSS...
...kasih fallback font...
...yang bagus supaya tidak terjadi CLS...
...yang font benerannya...
...saya load belakang.
Jadi CSS splitting.
Itu yang saya lakukan.
Nah ada tips tambahan lagi nih...
...tolong dibuka link-nya.
Kita perlu...
...kadang kita perlu load satu font...
...cuma untuk...
...text yang gak berubah.
Jadi misalnya contohnya...
...nama...
...nama website kita...
...jadi misalnya...
...kalau e-commerce toko ya...
...nama tokonya atau brand...
...kadang terutama font yang fancy ya...
...font yang display style...
...yang semacam lobster gitu...
...itu kan dipakai...
...untuk text yang gak berubah.
Isi text-nya maksudnya...
...gak berubah. Kan kita...
...apa? Kecil kemungkinan kita...
...diba-diba...
...static dan gak berubah. Kecil kemungkinan...
...kita diba-diba ganti nama toko.
Kayak judulnya itu front-end tips...
...contohnya. Nah ya...
...judul website kita. Nah itu...
...kita bisa load beneran literally...
...untuk...
...text itu aja. Jadi itu juga...
...bisa memperkecil...
...ukurannya kan. Oh...
...pakai text ini ya, My Heading. Jadi My Heading...
...ini udah...
...dikasih font itu...
...aja ya.
Atau kalau kita pengen, ini kan...
...nge-load file CSS ya...
...yang tadi udah disebut sama Ivan...
...tetap kurang optimal...
...karna harus nge-load CSS-nya dulu...
...baru...
...baru manggil font-nya.
Itu kita buka aja, terus kita...
...kopas isinya. Kita buka isi...
...fonts Google APIs...
...blah-blah-blah. Kita liat CSS-nya...
...kopas deh. Coba buka...
...masa rica. Menarik...
...ini.
Kita sama...
...ini ya?
Ini apa?
Mana? Yang text My Headingnya...
...gak ada di sini.
Kok bisa jadi begini?
Oh, di sini ya?
Itu di-subset kalau gak salah ya?
Ya, di-subset ya.
Subset atau unicode...
...unicode range mungkin ya?
Mana?
Kirasin tuh...
...apa tuh maksudnya unicode range ya...
...beda lagi tuh. Banyak ya?
Banyak ya. Ternyata ya.
Ya, unicode range.
Ya, unicode range itu juga...
...penting kalau...
...kalau kita kayak ini format...
...Wolf2 ya.
Itu...
Sambil buka CSS-tricks...
...coba di...
...gak cuma ascii karakter.
Lanjut, lanjut.
Ya, gak cuma ascii karakter aja...
...tetapi termasuk unicode karakter.
Cuma kalau website kita itu cuma...
...hanya butuh...
...gak pakai banyak unicode karakter...
...tentu...
...file Wolf yang kita pakai itu...
...sebenarnya gak perlu...
...diluat semua kan?
Jadi kita bisa define...
...unicode range yang kita butuhkan aja.
Itu contohnya...
...kalau misalnya kita cuma A sampai Z...
...tanpa ada spesial karakter.
Kita gak perlu kayak...
...yang ada tanda kutipnya...
...atas itu tahap apa...
Ada titik 2 gitu di atas...
...uruh-uruh yang tidak-tidak...
...gunakan terutama di Indonesia ya.
Terutama negara yang pakai...
...roman karakter. Nah, itu lebih tepatnya.
Oh wow, banyak sekali yang...
...bisa di ok mas ya.
Di ok.
Tapi menurut Eka gimana...
...kalau sebenarnya kalau kayak judul itu...
...perlukan kita load fonts...
...atau mending kita rubah aja jadi SVG?
Nah, iya. Sebetulnya...
...lebih bagus lagi, lebih optimal...
...SVG aja sih.
Tapi bisa dibaca atau SVG?
...sama sesegin.
Sebenarnya sama aja ya, kalau SVG...
ARIA LABEL.
Kita pakai...
...sebenarnya elemen apapun kan...
...bisa dikasih ARIA LABEL.
Kalau ini apa nih?
Ini font ya?
Jadi penasaran ya?
Itu text biasa...
...karena nggak pakai font aneh-aneh.
Sebenarnya kalau dari sisi practical...
...kita sebagai developer kan...
...udahlah nggak usah pakai font aneh-aneh...
...satu macem aja fontnya.
Semua ya, apa? Business Goal...
...website yang kita buat kan...
...nggak bisa dipaksain.
Kita berani terlitar sama bagian desain.
Product design...
...kita dikroyok.
Nah, ini bener banget nih.
Bas font bisa jadi...
...bahan tes interview.
Tau nggak yang gini-gini?
Wah, luar biasa ini...
...kalau pada tahun ini.
Belajar malam hari ini.
Makanya saya bilang...
...waktu ide...
...belajar kita ngomongin font...
...itu sesuatu...
...yang jarang di ngomongin orang...
...tetapi sebenarnya kalau dioptimis dengan benar...
...itu big win.
Karena jarang juga orang kayak...
...nggak begitu peduli.
Load aja lah dari Google Font...
...udah selesai gitu.
Paling sering saya menemukan...
...issue itu...
...Google Font dilod dengan...
...semana-mana.
Begitu saya lihat...
...aduh...
...kok begini sih ngelod-nya?
Akhirnya beresin lagi...
...beresin lagi.
Gimana dengan...
...framework seperti...
...Telwin, yang dia udah...
...beneran berapa font stack kan?
Tadi kita kan...
...berubah font stack juga kan?
Apakah itu berpengaruh atau gimana?
Itu kan dia pakai...
...Dairy System.
Si Telwin itu kan...
...nggak punya opini tentang...
...gimana kita ngeloding web font-nya.
Cuma emang si Telwin itu...
...mereka menyediakan default stack...
...yang ada di masing-masing...
...device.
Kalau kita mau mengkustomize...
...misa kan bisa tuh...
...Telwin juga bisa...
...sans-nya tuh dikasih tambahan...
...font yang kita spesifai sendiri.
Misalnya Lobster.
Lobster lagi.
Atau Comic Sans atau apapun...
...Telwin kan cuma ngelod aja...
...cuma ekspektasinya kita harus...
...ngedefine import sendiri...
...pakai font face cam tadi misalnya.
Ya, kalau misalkan default-nya...
...default-nya dia pakai...
...banyak font...
...atau hanya satu atau apa-apa.
Dia nggak ngelod sih...
...pakai di device-nya.
Emang Telwin ada...
...menganjurkan font tertentu? Kayaknya dia...
Ada, dia ngasih...
...reasonable default yang...
...oke lah, yang di mata cukup enak.
Jadi, ada...
...sans-nya, ada serifnya.
Dia kasih pilihan sebenarnya.
Lobster dan seri stack.
Nah, ini nih.
Belum lagi.
Menarik.
Nah, benar ini dia.
Kurang gede.
Alah.
Ini di gedein malah...
...streaming artinya.
Maaf, maaf, maaf.
Nah, makanya banyak karena dia...
...ngendal macam-macam operating system.
Jadi, kalau kayak gini dibacanya...
...sebenarnya tidak dilod semua, kan?
Dia mencari yang...
Yang pertama, yang pertama matching...
...pertama ada.
Dari paling kiri, ya?
Dari paling kiri.
Misalkan tiba-tiba ketemu SF Mono...
...oh, berarti di Mac nih, ada.
Yang lain udah 2K aja, gitu ya?
Oke.
Jadi, dari si font...
...aman ya? Berarti nggak...
...terlalu utang-atik konfigurasi ya?
Berarti kalau kita mau mengubah.
Kita nambahin...
...custom font kita sendiri.
Oke, noted.
Tadi...
Tadi, oh ya, variable font...
...perlu tahu juga. Jadi, kalau dulu kan...
...OTF, DTF...
...itu masing-masing...
...font...
...masing-masing font style...
...itu ada filenya sendiri. Pusing nggak...
...regular satu font, bold satu font...
...italic satu font...
...bold italic satu font...
...mau ada berapa, ya kan?
Ada semi buat...
...ada medium, ada macam-macam.
Nah, sekarang...
...variable font itu...
...sekarang udah lumayan...
...banyak dipakai. Kalau nggak salah, Google Fonts...
...defaultnya juga sekarang udah...
...variable font. Itu file formatnya...
...biasanya voff...
...sama voff2, voff2.
Kelebihannya adalah...
...dia bisa, dalam satu file...
...jadi satu request kan ya...
...satu request dengan segala prosesnya...
...yang tadi udah dijelasin, Ivan...
...satu file itu bisa menghendal...
...berbagai macam...
...font style tadi. Jadi bold...
...italic, medium, itu dalam...
...satu file.
Oke, nah, namun...
...voff2 itu kalau nggak salah...
...masih belum support di semua browser kan ya...
...kayak yang Mac OS itu...
...lebih support ke TTF kan ya...
...kalau nggak salah, atau...
Makanya keliatannya bisa ada...
...fallback deh voff dan voff2...
...biasanya jadi satu ya di...
Iya, makanya ada TTF kan, dia selalu...
...ke TTF, karena belum tentu...
...coba, can I use...
...use voff...
...soccer compatibility.
Oke, nah, ngomongin...
...web font...
...walk itu web open format...
...open font format.
Oh, baru tau...
...open font format, oke.
Ya, ngomongin...
...web font, salah satu yang paling...
...saya ingat adalah...
...font awesome...
Ya, perlu ngomong, font awesome...
...font awesome...
...itu jangan dipakai.
Jangan dipakai, karena icon...
...jangan dipakai.
Karena icon, udah cocok pakenya...
...SWG saja, ya.
Karena nggak jelas...
...gak jelas bagi saya...
...contohnya...
...hanya pakai 3 icon, tetapi...
...harus load font seabrek-abrek...
...sampai 100 kilobyte...
...itu nggak...
...mening SVG aja.
Kalau bisa SVG-nya, kalau cuma dipakai...
...satu tempat atau dua tempat...
...inline kan...
Ya, vc-nya yang bentuknya ke xml itu...
...dikopy paste aja udah ya.
Eh, cuma font awesome sekarang juga...
...udah evolve...
...udah berevolusi, jadi pakai...
...package-nya yang baru, dia bikin...
...degenerate inline SVG.
Jadi walaupun nama...
...teranjur nama ya font awesome...
...udah nggak bergantung...
...web font lagi.
Kayaknya rata-rata begitu ya...
...ingat nggak jamannya twitter bootstrap itu...
...itu semuanya jumbo tron...
...seabrek-abrek dipakai.
Terus abis itu evolve...
...kita diubah jadi...
...SCSS, kita pilih yang mana...
...komponen yang mau dipakai...
...generate.
Sama font awesome juga sudah berubah.
Sekarang udah 6 loh.
Lucu banget style-nya ya.
Sudah 6 ya?
Sudah berubah juga ya...
...websitenya.
Ada yang berbayar juga ya?
Ada premium-nya.
Oke.
Wah, sedih.
Kalau dulu kan...
...dia udah bundling sama...
...bootstrap kan?
Iya, semuanya di...
Semuanya di download.
Itu jaman kapan itu? Kayaknya jaman...
...berusaha belajar web dev.
Kayaknya sekarang itu...
...orang sudah mulai bergeser...
...sedikit-sedikit, jadi nggak pakai icon...
...dari font awesome atau dari SVG...
...tapi pakai emoji.
Oh, emoji.
Emoji, dijadikan icon sekarang, kan?
Iya.
Banyaknya itu style-style-nya...
...modelnya.
Berarti kalau sekarang kita pakai font awesome...
...berarti aman dong. Maksudnya nggak kayak dulu kan?
Aman, udah.
Kalau dipakai dengan benar.
Oh, iya.
Jadi intinya sebenarnya...
...apapun yang mau kita pakai...
...kita pastikan dia...
...sesuai dengan ekspetasi kita.
Jadi jangan sembarang pakai...
...udah, lupakan.
Jangan plug-and-play.
Coba buka pakai...
...buka konsol-nya, network-nya...
...atau performance insight.
Lihat apa yang render blocked.
Oh, terus juga...
...bisa implementasi itu, kan?
Apa namanya?
Performance budget.
Pastikan kalau mau...
...nambahin fonts atau...
Bukan episode...
...kapan-kapan cocok tuh bagus...
...bahas performance budget.
Iya, boleh tuh.
Performance budget.
Jadi...
...sebelum menambah atau sebelum...
...atau mengganti framework...
...atau mengganti...
...misalnya migrate dari non-tailwind...
...ke tailwind contohnya.
Pakailah performance budget.
Jadi bisa tahu to make sure...
...awalnya berapa...
...hasil akhirnya berapa.
Kalau bisa lebih kurus.
Lebih hard, lebih berkurang.
Jumlah byte yang dikirimkan...
...oleh server.
Hmm, oke.
Siap, siap, siap.
Performance budget.
Oke, ada lagi yang mau kita bahas tentang font?
Ada tuh...
...SVG font.
Iya, bisa tuh, menarik tuh.
Yang mana tuh?
Lika-liku SVG font.
Color V1.
Oke, baiklah, sebentar.
Check screen lagi.
Hilang screennya.
Nah.
Nah, ini juga sebetulnya bagian...
...yang relevan...
...soal web font, walaupun mungkin...
...ya, alternatifnya tadi ya.
Apa?
Kalau kita butuh...
...tampilan yang...
...rich, misalnya yang lebih...
...bukan cuma untuk nampilin text...
...cuma misalnya contoh paling sering...
...emoji atau text dengan style...
...tertentu yang lebih kompleks.
Itu salah satu...
...kemungkinan solusinya adalah...
...SVG font. Itu font yang...
...biasanya, kalau font yang standar...
...kayak Aria, Lobster, Comic Sans...
...dan lain-lain, itu kan satu warna...
...tentu saja ya, kalau ini bisa...
...contain glyph.
Bisa ada gradasi...
...segala macam.
Cuma ini emang...
...bukan penggunaan yang utama...
...mungkin ya, bukan menus font kan...
...karena kita masih punya alternatif...
...berupa ya SVG beneran aja.
Cuma kalau untuk emoji...
...itu kan relevan ya.
Karena emoji bawaan masing-masing...
...OS itu kan lain-lain...
...dan supportnya juga...
...belum tentu merata, misalnya...
...suka ada emoji yang udah disupport...
...misalnya di Mac, cuman Windows belum...
...atau Android belum...
...atau sebaliknya. Jadi tetap ada...
...use case-nya kebutuhannya...
...kadang kita butuh font tertentu...
...untuk tampilan misalnya emoji.
Nah, SVG...
...font SVG ini...
...itu adalah font yang punya...
...kapabilitas khusus...
...si glyph dan gradient...
...dan sebagainya.
Itu landscape-nya...
...sebenarnya masih kayak...
...belum stabil, karena...
...COLR yang...
...versi 0 itu...
...sudah cukup wide-spread...
...supportnya, cuman kurang...
...optimal dan ukurannya besar banget.
Nah, sekarang ada...
...color COLR yang...
...versi 1...
...yang udah improve. Cuma masalahnya...
...sampai sekarang ini masih Chromium only.
Chromium only.
Sebelum ada...
...color V1 ini, ada beberapa...
...format font lain yang punya...
...fungsi mirip. Coba tolong dibuka...
...yang link bawahnya.
Link bawahnya yang adalah...
...pixel...
...nah, bawahnya soal color itu.
Nah, kalau misalnya temen-temen...
...pingin tahu nih...
...jenis-jenis SVG font apa...
...yang disupport di browser...
...di masing-masing browser...
...bisa dicek...
...itu banyak tuh, ada...
...SBIX, itu format lama lah...
...format dari kapan tau. Ada...
...color, ada color V1...
...ada open type SVG...
...bisa kita liat, itu not supported...
...dan seperti biasa...
...Safari...
...Safari maunya ngesupport...
...open type SVG, cuman gak mau...
...support color V1.
Berantem ya, masih berantem.
Pokoknya...
...ini emang agak rumit, jadi...
...belum bisa diandalkan...
...masih belum recommended...
...untuk use case yang...
...harus semua support.
Cuma untuk alternatif...
...bisa, ya bisa...
...dicek lah satu persatu...
...format SVG font-nya.
Cuma kalau untuk grafis, itu...
...cukup menarik sih...
...untuk ke depannya, walaupun mungkin sekarang...
...belum bisa sepenuhnya usable...
...itu...
...bagus banget untuk hal-hal yang...
...sifatnya visual.
Kali grafi.
Kali grafi ya.
Ya, jadi kalau cuma pakai font yang...
...dua dimensi biasa, kan...
...ya bisa, cuma kurang menarik.
Kalau ini menariknya adalah...
...font kali grafi ini, emulate...
...apasih kalau ukir-ukiran gitu loh...
...texture dari ukir-ukiran...
...dan itu untuk branding kan...
...menarik.
Misalnya kita bikin...
...applikasi yang...
...high power, semacam Figma...
...atau Canva, atau...
...semacamnya ya...
...untuk desain grafis, desain visual...
...itu kan bisa berguna juga.
Ada beberapa contoh...
...ada dua contoh...
...font yang menggunakan...
...SVG font teknologi yang baru...
...bisa dilihat di link-nya.
Nah, itu tuh.
Plakato.
Plakato color.
Itu font aja.
Semua ikon-ikon ini font.
Dan termasuk si grafis...
...apa ya, gradient-gradientnya itu...
...bisa kita sesuaikan tuh, bisa real time.
Randomize.
Nice.
Pelangi.
Kalau pelangi, sekarang udah beda ininya.
Beda lagunya.
Beda.
Beda maknanya sekarang.
Nah, itu semua pakai font.
Itu pakai CSS.
Jadi, customize-nya pakai namanya...
...Add Font Palette.
Ya, nanti kalau misalnya...
...bisa diketik.
Bisa, bisa diganti text-nya.
Ngobrolin web.
Wow.
Keren ya.
Plakato color.
Oke, mantap.
Ada lagi? Gini.
Ui, lucu.
Lucu sekali.
Ini juga HP font-nya.
Iya, bisa di-customize.
Itu kayak apa?
Outline-nya sama shadow-nya.
Sama apa? Kayak efek-efek bevel-nya.
Itu di-customize dengan CSS.
Tapi ini Chromium only dulu, mas Yan.
Iya.
Keren ini.
Bisa di-customize ya.
Eh, Safari udah bisa tuh?
Color DX Open Type.
Coba ke atas dulu, mas Riza.
Bisa. Safari.
Safari 11.
Oh, dia punya fallback open type juga...
...soalnya tadi.
Coba dia lihat font-nya tadi.
Unfortunately, this font is not compatible...
...with Adobe Apps yet.
Adobe Apps.
Apa hubungannya?
Sama Adobe Apps.
Gatau.
Oh, mungkin kalau didownload kali...
...itu kan dia font-foundry.
Jadi jualan font.
Yang harus bisa dipakai di...
...perbagai aplikasi.
Mungkin maksudnya nggak bisa di...
...Adobe PDF kali?
Ini free download, tapi...
...misalnya buy it. Oh, ada gratis.
Soalnya...
...lininya buy it.
Keren beli.
Sepertinya...
...kamu mau beli ya?
Free for personal and commercial use.
Including...
...ATF, WoF, WoF2...
...dan 11 color palettes.
Mungkin kalau beli, apa format font-nya...
...lebih macem-macem mungkin.
Oh iya, lucu sekali.
Lucu sekali.
Wala mainan, Mas Lida.
Senangnya.
Maaf, maaf, maaf.
Lanjut, lanjut, lanjut.
Apa lagi dong?
Kalau ini...
...yang saya temukan juga...
...ini apakah...
...font SVG juga?
Nggak tahu ya. Cuman saya ketemu nih...
...wah, ini isometric font.
Apa tuh isometric?
Dari Google font juga ada.
Jadi isometric itu yang kayak...
...dua, sebenernya...
...tapi agak digesak sedikit.
Lucu, lucu. 3D ya?
Ya, hampir 3D. 2,5D lah.
2,5D.
Tadi tuh bayangin isomorphic...
...ketuker sama isometric dong.
Makanya nggak make sense tadi.
Ada game yang modelnya kayak gini...
...sebenernya dia dua dimensi kan...
...gak bisa bergerak 3D kan.
Tapi dia bergeraknya...
...gak miring gitu kan.
Iya, ada shade-nya gitu.
Oh, dia nggak bisa rotate ya?
Iya, ini colorface satu juga.
Nggak bisa, nggak bisa rotate.
Dia udah begini aja. Cuma kayaknya...
...dia diatur nih. Apa?
Shade-nya atau sama kayak tadi?
Ya, depth seberapa tebalnya kan?
Iya, dia pakai colorface satu juga.
Berarti benar sama.
Kayak ini, kayak tensorflow.
Punya logo...
...tensorflow.
Oh, iya benar.
Dia ini ada di Google font.
Kalau mau...
...di echo download...
...jangan, jangan download.
Mau di...
...include di web nggak bisa ya?
Bisa.
Ini masih buka di web.
Nah, ini.
Bisa, cuma ya nggak dijamin...
...aman nih semua browser.
Iya, belum di support ke semua kan.
Karena colorfewan ya?
Yes.
Wait, itu fallback-nya ke...
...cursive. Apa sih, cursive?
Cursive gitu, handwriting...
...untuk wisantangan.
Itu jelek banget deh...
...kalau muncul...
...yang fallback aslinya.
Mana dimeterannya?
Cursive kalau yang bawaan, misalnya bawaan...
...Mac atau Windows.
Cursive-nya itu font-nya...
...oh, banyak jelek banget lah.
Oh, jadi CLS-nya bahaya nih ya?
Iya, bahaya.
Cuma kayak gini fallback-nya apa...
...coba yang mirip?
Nggak ada.
Gak ada.
Terus paling disesuaikan sama ukuran font-nya aja.
Iya.
Ini, wait-nya...
...wait-nya itu disesuaikan.
Bisa coba kalau mau...
...mau experiment coba...
...dijelaskan fontaine.
Iya, cuma fontaine kan nggak...
...nyesuaikan style font yang...
...mood-nya kan.
Dia cuma mastiin ukurannya...
...dimensinya, apa?
Ukuran sama...
...panjang lebernya sama.
Turning-nya.
Gap-nya, gap.
Nah, itu diatur.
Iya.
Oke.
Kita sudah berapa lama?
Wah, hampir satu jam.
Ada lagi yang mau dibahas?
Bahas font doang, sejam kita.
Font itu branding...
...tipografi, banyak...
...yang dibaca...
...kita sehari-hari di web.
Kalau...
...kalau kalian mikir web...
...dari awal, pakai font-nya apa?
Bawa until win.
Bawa until win.
Ya, dia punya stack semacamnya...
...yang system safe. Gak tahu sih kalau...
...personally, aku nggak punya...
...sense of aesthetics yang...
...milih font yang tepat gitu, males asli.
Itu ganteng desainer, mah.
Nyuruhnya.
Saya tinggal minta...
...mana desain guideline-nya.
Itu yang dibaca...
...dulu aja.
Jadi mereka harus punya guideline-nya itu.
Oke, oke.
Oh, cuma kalau milih web font sih...
...kayaknya andalan Inter lah ya sekarang.
Inter ya sekarang ya.
Inter, poppings, gitu-gitu ya.
Inter tuh kayak...
...profesional, tapi ya lumayan...
...ya hipster dikit lah.
Agak apa? Stylish.
Stylish, cuma tetap profesional.
Kalau kayak Roboto sama...
...Hevati Kenewa sudah jadul ya?
Enggak sih, Roboto masih...
Evergreen sih.
Cuma kayaknya Roboto ada...
...versi baru ya. Kayaknya di...
...announce di I/O kemarin ya...
...kalau nggak salah.
Wah, nggak tahu.
Segoey UI.
Lato.
Ya, Lato tuh jaman-jaman...
...kapan?
Ada nih Roboto Flex namanya.
Oh, baru lagi.
Baru yang baru.
Tadi kan ngeluarin phone baru juga.
Terutama untuk...
...kod phone-nya.
Kalau nggak salah.
ViraCode.
Bukan, bukan.
Ya, itu udah ini sih.
Udah umumnya.
Ada kan dia baru ngeluarin namanya apa ya?
Lupa.
Monotype Corsiva.
Ya ampun, itu jelek banget.
Ini bukan...
...bukan yang...
...bukan phone yang dari GitHub.
Kalau mau moding ala Minecraft...
...biar bisa pakai...
...phone.
Monocraft namanya.
Kalau Minecraft itu.
Monocraft.
Monocraft.
Nah, ini...
...monocraft dia.
Programming phone based on...
...Minecraft.
Nah, jadi beneran main game, kan?
Bisa, bisa.
Lucu itu.
Ada...
...Comic Sense juga ada yang versi...
...monotype-nya.
Oh, yang pun super cursed.
Iya.
Lobster belum ada tapinya.
Belum, belum.
Mono ini dia.
Nah, bentuknya kayak gini.
Banyak orang iseng ya.
Jadi Comic Sense itu adalah salah satu...
...phone favorite dan takut tip...
...yang buat bahan...
...ejek-ejekan.
Tapi diserisin juga ya.
Roboto Flex ya.
Roboto Flex.
Comic Mono.
Ya ampun.
Menarik ya.
Bagus juga.
Dan dia udah available sebagai variable phone.
Lebih bulet.
Lebih soft ya kayaknya.
Iya.
Dibandingkan Roboto.
Coba.
Ya kan, lebih soft.
Kalau ini bulet ya.
Bisa di-compare kok, Mas Riza?
Gimana ya?
Bisa sih.
Pernah lihat ada di-compare.
Tapi gimana ya?
Oh harus di-add atau save...
...atau semacamnya.
Ya di-add dulu.
Di-add dulu ya.
Ini di-remove all.
Kemudian cara addnya gimana?
Oh di-regularnya.
Di-add. Nah dia ini kan.
Yang regular ya.
Terus ke Roboto.
Ke Roboto.
Di-add lagi.
Di-add.
Nah.
Sudah. Terus?
Terus gimana?
Ini ada 2.
Gila.
Tester tuh ada ga?
Tester.
Sebelah kiri.
Enggak.
Enggak ada ya.
Setau saya bisa di-test kok.
Bisa di-compare gitu.
Sudahlah.
Kalau dicari biasa ilang.
Bisa ilang.
Jadi ngobrolin font kemana-mana.
Kita ada...
...tepit lagi ga? Gak ada ya.
Gak ada.
Kalau ga ada dari teman-teman mungkin ada.
Kita kasih waktu 3 detik.
1, 2, 3.
Tadi ditanya tuh...
...materi server send event.
Apa itu?
Apa ini?
Tau ga? SSI.
Server send event.
Terima kasih.
Bisa donate 20 ribu ya?
Bisa.
Apa itu server send event?
Websocket tau?
Ya.
Sebelum ada websocket itu server send event.
Jadi buat real time ya?
Kalau websocket...
Real time whistler kan?
Bedanya server send event itu...
...yang ngirim eventnya server.
Kalau...
...kalo sistemnya websocket...
...kalo...
...apa? Satu lagi.
Temannya websocket apa? Satu lagi, saya lupa.
Temannya websocket.
RTC.
Web RTC kan peer-to-peer.
Dengan...
...kalau websocket...
Long polling.
Ya dia bukan terus kan?
Sama. Server send event juga...
...dia long polling, tetapi...
...pakainya HTTP.
Kalau websocket...
...bukan pakai HTTP.
Dia pakai socket.
Kalau server send event...
...sama kayak...
...simkatnya...
Ada server yang standby gitu berarti?
Anggap aja...
...requestnya...
...unlimited.
Jadi kalo kita request...
...ke server...
...terus servernya...
...kayak keep alive.
Oh ini ya...
...mungkin perlu dibahas dulu. Kalo misalkan yang...
...tradisional, kalo ada request...
...di response, tutup, selesai.
Ya, jadi request, response.
Kalo ini...
...request, dia tetep keep listening...
...kalo ada data...
...data terbaru, dia kirim lewat...
...jalur itu. Nah nanti...
...di JavaScriptnya ada sendiri...
...gue lupa nama. Ada eventnya berarti ya?
Ada API-nya.
Ada API-nya.
Namanya...
...tahap...
...server send event...
...web md ya...
Eh, web...
Oh web md.
Nah...
...using server send event...
...itu dia pake event source. Nah...
...itu namanya. Event source.
Ya, event source.
Nah, kita bahas lagi...
...minggu depan atau kapan...
...kita bahas mendalam server send event...
...web socket, web RTC.
Yuk, compare yuk. Itu lama banget...
...berapa jam ya kalo compare itu semua.
Hands on, hands on.
Jadi waktu saya bikin...
Saya bikin collaborative editing...
...dulu itu...
...saya sempet compare...
...kalau saya pake server send event...
...gimana, pake web socket...
...gimana, pake web RTC, gimana.
Ada kelemahan...
...paling cepet itu ya...
...gak ada. Gak ada bisa ya...
...gantung kondisi di lapangan...
...butuhnya apa.
Itu, jadi itu contohnya...
...kalo dari PHP-nya, header-nya...
...kirimnya...
...text event stream...
...konten type-nya, jadi gak.
Jadi...
...while true, jadi dia...
...gak habis-habis tuh, dia tetep listening.
Kayak chunks gitu kan ya?
Ya, terus dia tetep kirim data...
...echo, terus abis itu...
...flush, echo, flush, echo, flush.
I see.
Nanti kalo dari...
...sama si event source...
...kalo misalnya dari server time out...
...atau ketutup, dia open lagi.
Buka lagi, pulling lagi.
Oh...
...ini...
...kalo...
...dari segi time out itu...
...lagi dulu mana sama websock-nya?
Kayaknya duluan ini deh.
Kayaknya paling pertama ya...
...dilihat dari...
...sintaksinya sama...
Aku tidak mengetahuinya...
...sama sekali.
Gak pernah ada K...
...gak pernah ada K-nya.
Ya, langsung ngomongin...
...udah bikin chat app, udah sedang gitu.
Wow, magic gitu kan.
Kalo dulu kan awal...
...dari pertama yang kayak tiap 5 detik...
...di refresh gitu kan.
Apa sentuh terpal ya?
Contohnya kalo misalnya di...
...kita di...
...di belakang CDN kalo pake contohnya...
...CloudFront. CloudFront itu kalo...
...nggak di setting secara...
...customer. Sorry, CloudFront itu...
...tidak bisa websocket. Nah...
...hanya bisa...
...request response.
Websocket itu hanya...
Websocket itu...
Ya, karena...
...nggak bisa keep alive itu.
Karena kalo...
...websocket itu kan harus ada...
...socket yang dibuka...
...secara lama. Sedangkan CloudFront itu...
...nggak bisa, gitu. Jadi...
...kalo pake websocket itu...
...harus tembusnya langsung ke...
...load balancer...
...okey.
Panjang ceritanya kalo kita bahas ini.
Ya, next.
Harus banget ke infra soalnya ya.
Bergantung sama infra aja.
Oke, siap.
Ya, jadi kalo buat temen-temen yang...
...apa? Yang ada...
...topik diskusi atau mau...
...saran-saran, gitu ya.
Boleh ke bit.ly/ngobroinweb.
Ditulis aja disitu.
Kita baca kok, dan kita kumpulin.
Jadi nanti kita...
...bisa merealisasikannya...
...secara langsung gitu semuanya.
Tapi setahap saat...
...satu episode, satu episode.
Dan kita butuh apa?
Butuh banyak...
...ideotopik. Karena kita pengen tau juga...
...temen-temen ini tertariknya ke arah...
...yang mana, gitu ya.
Apakah topik yang beginner...
...fundamental, atau apa...
...diselingin sama yang intermediate, advanced...
...dan lain-lain.
Oke, untuk malam ini mungkin...
...yang dulu aja. Sekarang udah cukup panjang...
...ngomongin phone.
Udah kemana-mana juga.
Cara compare phone dengan Google phone.
Iya.
Terima kasih buat teman-teman...
...semua yang sudah...
...apa? Sudah menemani kita...
...ngobrol...
...ini memang benar-benar definisi dari...
...ngelurngidul, ya.
Iya, ngobrol.
Ada yang kasih kan nyoboin...
...phone.
Mainan phone lucu.
Mainan phone lucu-lucu.
Mudah-mudahan...
...apa yang kita sampaikan...
...bermanfaat buat teman-teman...
...di pekerjaan atau di tugas sekolah...
...atau apa, gitu ya. Buat optimize...
...websitenya juga.
Kita ketemu lagi minggu depan, insyaallah...
...dengan topik yang berbeda.
Selamat malam, selamat istirahat.
Selamat malam, bye-bye.
Bye.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik pembahasan: - Pembahasan font di webalmanac (https://almanac.httparchive.org/en/2022/fonts) - Isometric font: Nabla - https://web.dev/preload-optional-fonts/ - https://web.dev/css-size-adjust/ - https://npm.io/package/fontaine - https://developer.chrome.com/blog/colrv1-fonts/ lika-liku SVG font - Perbandingan COLR v0 dan v1: https://twitter.com/pixelambacht/status/14 Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
14 Jun 2023
Ngobrolin SVG
SVG dibahas sebagai format gambar yang berbeda jenisnya dari JPEG atau PNG: ia bukan kumpulan titik warna melainkan rang...
20 Mei 2026
Alat Desain AI
Episode ini menelusuri gelombang alat desain berbasis AI: getdesign.md, Stitch dari Google, Claude Design, Open Design, ...
13 Apr 2023
Ngobrolin Format Warna
Topik malam itu terdengar sepele tapi tak terhindarkan: menentukan warna di CSS. Sesedikit apa pun kita berurusan dengan...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .