/* --------------------------------------------------------------------------- * Pilihan huruf * * Semua tumpukan di bawah ini adalah huruf yang SUDAH ADA di perangkat * pembaca. Tidak ada satu pun berkas huruf yang diunduh — tidak dari server * ini, tidak pula dari Google Fonts. Alasannya dua: * * 1. Server sudah padat. Satu keluarga huruf web berarti 2–4 berkas tambahan * (biasanya 20–120 KB) untuk SETIAP pengunjung baru, di setiap halaman * yang belum tersimpan di singgahan peramban. * 2. Content-Security-Policy situs ini memakai `font-src 'self'` dan tidak * mengizinkan host luar. Menambah Google Fonts berarti melonggarkan CSP * dan menambah dua sambungan pihak ketiga pada setiap kunjungan. * * Konsekuensinya jujur: tidak semua huruf tersedia di semua sistem. Karena itu * setiap tumpukan diakhiri huruf umum (serif / sans-serif / monospace), * sehingga pilihan yang tidak tersedia tetap turun ke bentuk yang mirip, bukan * ke huruf bawaan yang acak. * * --------------------------------------------------------------------------- * Cara kerjanya * --------------------------------------------------------------------------- * Server TIDAK menyuntikkan nama huruf ke dalam CSS. Yang dikirim hanya kunci * pendek sebagai atribut (data-font-heading="georgia"), dan berkas inilah yang * memetakan kunci itu ke tumpukan huruf. Dengan begitu tidak ada teks dari * basis data yang pernah masuk ke dalam lembar gaya. * * Pemilihnya sengaja tidak diikat ke agar aturan yang sama bisa dipakai * di empat tempat: seluruh situs (), satu tulisan saja (.prose), kotak * pratinjau di Admin, dan kanvas penyunting. * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * Lexend — satu-satunya huruf yang benar-benar diunduh * * Lexend dirancang untuk keterbacaan (huruf terbuka, jarak lega, bentuk yang * tidak saling tertukar), dan itu yang membuatnya terasa lebih tegas daripada * huruf sistem pada ukuran yang sama. * * Dilayani dari server sendiri, BUKAN dari Google Fonts. Hurufnya sama persis — * Lexend berlisensi OFL dan berkasnya diambil dari paket resminya — tetapi: * * - CSP situs ini memakai font-src 'self'; memakai Google Fonts berarti * melonggarkannya dan menambah dua sambungan ke server pihak ketiga; * - setiap pembaca akan tercatat di server Google pada setiap kunjungan; * - berkas dari server sendiri disimpan peramban 30 hari (aturan immutable * pada /assets/vendor/), jadi kunjungan berikutnya tidak mengambil apa pun. * * Berkasnya dipecah dua: latin (39 KB) untuk teks Indonesia dan Inggris, dan * latin-ext (34 KB) yang HANYA diunduh bila halaman benar-benar memuat huruf * beraksen di luar Latin dasar. Pembagian ini bawaan dari paket resminya. * * Satu berkas memuat SELURUH ketebalan 100–900 (huruf variabel), jadi menebalkan * judul tidak menambah unduhan sama sekali. * * font-display:swap: tulisan langsung terbaca dengan huruf sistem, lalu berganti * begitu Lexend selesai diunduh. Tanpa itu, teksnya kosong dulu. * ------------------------------------------------------------------------- */ @font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/vendor/lexend/lexend-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/vendor/lexend/lexend-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root { --f-lexend: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-georgia: Georgia, "Times New Roman", Times, serif; --f-times: "Times New Roman", Times, Tinos, serif; --f-palatino: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", serif; --f-garamond: Garamond, "EB Garamond", Baskerville, "Baskerville Old Face", "Hoefler Text", serif; --f-charter: Charter, "Bitstream Charter", "Iowan Old Style", "Source Serif Pro", serif; --f-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --f-inter: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --f-verdana: Verdana, Geneva, DejaVu Sans, sans-serif; --f-trebuchet: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", sans-serif; --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* Huruf judul: dipakai semua kepala tulisan, nama situs, dan kutipan besar. */ [data-font-heading="lexend"] { --serif: var(--f-lexend) } [data-font-heading="georgia"] { --serif: var(--f-georgia) } [data-font-heading="times"] { --serif: var(--f-times) } [data-font-heading="palatino"] { --serif: var(--f-palatino) } [data-font-heading="garamond"] { --serif: var(--f-garamond) } [data-font-heading="charter"] { --serif: var(--f-charter) } [data-font-heading="system"] { --serif: var(--f-system) } [data-font-heading="inter"] { --serif: var(--f-inter) } [data-font-heading="verdana"] { --serif: var(--f-verdana) } [data-font-heading="trebuchet"] { --serif: var(--f-trebuchet) } [data-font-heading="mono"] { --serif: var(--f-mono) } /* Huruf badan tulisan. Terpisah dari --serif supaya judul dan isi bisa berbeda, dan supaya satu tulisan bisa menimpanya sendiri. */ [data-font-body="lexend"] { --prose: var(--f-lexend) } [data-font-body="georgia"] { --prose: var(--f-georgia) } [data-font-body="times"] { --prose: var(--f-times) } [data-font-body="palatino"] { --prose: var(--f-palatino) } [data-font-body="garamond"] { --prose: var(--f-garamond) } [data-font-body="charter"] { --prose: var(--f-charter) } [data-font-body="system"] { --prose: var(--f-system) } [data-font-body="inter"] { --prose: var(--f-inter) } [data-font-body="verdana"] { --prose: var(--f-verdana) } [data-font-body="trebuchet"] { --prose: var(--f-trebuchet) } [data-font-body="mono"] { --prose: var(--f-mono) } /* Huruf antarmuka: menu, tombol, kartu, keterangan. */ [data-font-ui="lexend"] { --sans: var(--f-lexend) } [data-font-ui="georgia"] { --sans: var(--f-georgia) } [data-font-ui="times"] { --sans: var(--f-times) } [data-font-ui="palatino"] { --sans: var(--f-palatino) } [data-font-ui="garamond"] { --sans: var(--f-garamond) } [data-font-ui="charter"] { --sans: var(--f-charter) } [data-font-ui="system"] { --sans: var(--f-system) } [data-font-ui="inter"] { --sans: var(--f-inter) } [data-font-ui="verdana"] { --sans: var(--f-verdana) } [data-font-ui="trebuchet"] { --sans: var(--f-trebuchet) } [data-font-ui="mono"] { --sans: var(--f-mono) } /* Contoh huruf di Admin (daftar pilihan dan kotak pratinjau). */ [data-font-sample="lexend"] { font-family: var(--f-lexend) } [data-font-sample="georgia"] { font-family: var(--f-georgia) } [data-font-sample="times"] { font-family: var(--f-times) } [data-font-sample="palatino"] { font-family: var(--f-palatino) } [data-font-sample="garamond"] { font-family: var(--f-garamond) } [data-font-sample="charter"] { font-family: var(--f-charter) } [data-font-sample="system"] { font-family: var(--f-system) } [data-font-sample="inter"] { font-family: var(--f-inter) } [data-font-sample="verdana"] { font-family: var(--f-verdana) } [data-font-sample="trebuchet"] { font-family: var(--f-trebuchet) } [data-font-sample="mono"] { font-family: var(--f-mono) } /* Kanvas penyunting ikut huruf badan yang dipilih untuk tulisan itu, supaya yang terlihat saat menulis sama dengan yang terbit. Ditulis di sini, bukan di admin.css, karena --prose baru ada bersama berkas ini. */ .editor-canvas { font-family: var(--prose, Georgia, serif) } /* Kotak pratinjau pilihan huruf di halaman Pengaturan. */ .font-preview { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2, transparent); } .font-preview h4 { margin: 0 0 6px; font: 400 27px/1.15 var(--serif, Georgia, serif); letter-spacing: -.02em } .font-preview p { margin: 0; font: 15px/1.7 var(--prose, var(--serif, Georgia, serif)); color: var(--ink) } .font-preview small { display: block; margin-top: 9px; font: 11px/1.5 var(--sans, ui-sans-serif, sans-serif); color: var(--muted) }