Cara Mengatur Font Tester/Preview di WordPress (LarisFont)
Panduan lengkap Font Tester/Preview LarisFont: mengaktifkan preview global, upload font per produk, memilih gaya Interactive/Classic, posisi WooCommerce, shortcode, glyph, dan troubleshooting.
Font Tester/Preview bikin calon pembeli bisa “mencoba” font langsung di website sebelum membeli: mengetik teks sendiri, lalu (opsional) melihat semua glyph/karakter yang tersedia di file font.
Fitur ini kompatibel dengan WooCommerce, Easy Digital Downloads, dan LarisDigital Storefront. Anda bisa menampilkannya di halaman produk, post/page, lewat shortcode [larisfont_preview], atau lewat hook WordPress tertentu. Kalau Anda butuh integrasi plugin lain yang lebih spesifik, silakan hubungi tim TokoPressID.
Tutorial ini berperan sebagai hub: alur setup dari nol, ringkasan opsi di halaman Settings, pengaturan per produk/post/page, dan titik-titik troubleshooting yang paling sering.
Yang akan pengunjung lihat
Setelah dikonfigurasi, pengunjung melihat widget preview font di halaman yang Anda tentukan. Isinya bergantung gaya tema yang dipilih:
- Interactive: area teks yang bisa diedit, plus kontrol ukuran (px), letter spacing, line height, dan alignment
- Multi-font Interactive: beberapa font sekaligus, masing-masing dengan kontrol terpisah (cocok untuk paket font dengan banyak weight/style)
- Classic: tampilan mirip CreativeMarket, ukuran preset dalam pt (24pt–72pt)
Jika Show Font Glyphs Table Preview (if supported) aktif, di bawah preview interaktif muncul tabel semua karakter dalam font.
Prasyarat
- Plugin LarisFont by TokoPressID terpasang dan lisensi aktif
- File font siap diupload: WOFF (direkomendasikan untuk preview web), OTF atau TTF (fallback dan wajib untuk glyph jika hanya WOFF2 yang diupload sebagai file web)
- Folder upload WordPress (
wp-content/uploads/) bisa ditulis plugin (untuk cache font preview di subfoldertplfp) - WooCommerce/EDD hanya diperlukan jika preview dipasang di halaman produk toko digital
Cara membuka pengaturan
- Login ke WordPress Admin.
- Buka LarisFont → Dashboard.
- Buka Font Tester/Preview, lalu klik Settings.
Semua opsi di bawah hanya muncul setelah Enable Font Preview dicentang.
Opsi yang tersedia
Gunakan tabel ini sebagai referensi cepat. Detail tiap bagian dibahas di tutorial terkait agar tidak berulang.
| Label di plugin | Jenis | Fungsi |
|---|---|---|
| Enable Font Preview | Checkbox | Menyalakan atau mematikan seluruh fitur preview |
| Font Preview Theme Style | Radio | Gaya tampilan: Interactive, Multi-font Interactive, atau Classic |
| Hide Font Preview Title | Checkbox | Menyembunyikan judul section preview |
| Font Preview Title Text | Teks | Judul section (default: Font Preview); hanya muncul jika judul tidak disembunyikan |
| Font Preview Pangram | Textarea | Pangram kustom untuk dropdown, satu baris per item, format Label|Teks |
| Font Preview Size (Default) | Angka (px) atau Radio (pt) | Ukuran default: px untuk Interactive/Multi-font; preset 24pt/36pt/48pt/72pt untuk Classic |
| Show Font Glyphs Table Preview (if supported) | Checkbox | Menampilkan tabel glyph; format didukung: OTF/TTF/WOFF (bukan WOFF2) |
| Show Font Preview Editor for Post | Checkbox | Mengaktifkan metabox preview di post; membuka opsi posisi post |
| Show Font Preview Editor for Page | Checkbox | Mengaktifkan metabox preview di halaman; membuka opsi posisi page |
| Font Preview Position | Radio | Lokasi tampilan di WooCommerce, post, page, custom hook, atau shortcode |
| Font Preview Hooks Name | Teks | Nama hook WordPress (jika posisi Custom Hooks Position) |
| Font Preview Hooks Priority | Angka | Prioritas hook (default 10 jika dikosongkan) |
| Font Preview Text Color | Color | Warna teks preview |
| Font Preview Background | Warna latar area preview | |
| Font Preview Border/Line | Warna garis/border | |
| Font Preview Input/Select | Warna field input dan dropdown | |
| Font Preview Padding | Angka (px) | Padding dalam area preview |
Gaya tema (Font Preview Theme Style)
| Pilihan | Kapan dipakai |
|---|---|
| Interactive (Editable text with adjustable size, letter spacing, line height, and alignment controls) | Satu font per produk, pengunjung butuh kontrol penuh |
| Multi-font Interactive (Separate controls for each font preview, ideal for displaying multiple fonts) | Beberapa font/weight dalam satu produk, masing-masing dengan kontrol sendiri |
| Classic (Similar to CreativeMarket style) | Tampilan familiar untuk pembeli marketplace font; ukuran preset pt |
Posisi (Font Preview Position)
Opsi yang tampil bergantung plugin dan pengaturan integrasi:
| Pilihan (label di plugin) | Lokasi |
|---|---|
| WooCommerce - After Product Image (woocommerce_before_single_product_summary:30) | Setelah gambar produk; default di tema TokoPressID digital |
| WooCommerce - Before Product Tabs (woocommerce_after_single_product_summary:9) | Sebelum tab deskripsi |
| WooCommerce - After Product Tabs (woocommerce_after_single_product_summary:11) | Setelah semua tab |
| WooCommerce - Inside Product Tabs - Before Description (priority:5) | Tab baru, sebelum deskripsi |
| WooCommerce - Inside Product Tabs - After Description (priority:15) | Tab baru, setelah deskripsi |
| WooCommerce - Inside Product Tabs - Last Tab (priority:99) | Tab terakhir |
| EDD - After Product Image / Storefront - After Product Image | Setelah gambar produk (EDD atau LarisDigital Storefront) |
| Post - Before Content in Single Post | Sebelum konten single post (perlu Show Font Preview Editor for Post) |
| Post - After Content in Single Post | Setelah konten single post |
| Page - Before Content in Single Page | Sebelum konten halaman |
| Page - After Content in Single Page | Setelah konten halaman |
| Custom Hooks Position | Hook dan prioritas kustom |
| I will use shortcode [larisfont_preview] to display font preview | Penempatan manual via shortcode |
Langkah-langkah setup
1. Aktifkan fitur global
- Buka Settings Font Tester/Preview.
- Centang Enable Font Preview.
- Simpan pengaturan.
Detail: Mengaktifkan Font Preview di Pengaturan Global.
2. Pilih gaya dan opsi dasar
- Pilih Font Preview Theme Style yang sesuai tampilan toko Anda.
- (Opsional) Atur Font Preview Pangram, ukuran default, dan Show Font Glyphs Table Preview (if supported).
- Simpan.
Detail: Memilih Gaya Preview, Mengatur Pangram dan Teks Default, Menampilkan Tabel Glyph.
3. Tentukan posisi tampilan
- (Opsional) Centang Show Font Preview Editor for Post dan/atau Show Font Preview Editor for Page jika perlu preview di luar produk.
- Pilih Font Preview Position.
- Jika memilih Custom Hooks Position, isi Font Preview Hooks Name dan Font Preview Hooks Priority.
- Simpan.
Detail: Posisi Preview di WooCommerce, Preview di Post dan Halaman, Shortcode [larisfont_preview].
4. Upload font dan aktifkan per produk
Preview hanya tampil jika dua kondisi terpenuhi: fitur global aktif dan preview diaktifkan untuk post/produk tersebut.
- Buka Produk → Edit produk (atau post/halaman jika integrasi aktif).
- Scroll ke metabox LarisFont by TokoPressID, section Font Tester/Preview.
- Centang Enable font preview for this product.
- Klik Add Font, upload WOFF Font File (recommended) dan/atau OTF/TTF Font File (fallback).
- (Opsional) Isi Font Name (optional), Custom Default Text, Custom Pangrams Selection, Custom Default Size (px).
- Simpan atau perbarui post/produk.
Detail: Upload File Font di Produk.
5. Sesuaikan tampilan (opsional)
Di section Font Preview Style, atur warna dan Font Preview Padding. Detail: Kustomisasi Warna dan Padding.
6. Verifikasi di frontend
Buka halaman produk/post/halaman di mode pengunjung. Pastikan widget preview muncul, teks bisa diedit, dan glyph tampil jika diaktifkan.
Pengaturan per produk (metabox)
Selain upload font, metabox Font Tester/Preview menyediakan:
| Label di metabox | Fungsi |
|---|---|
| Enable font preview for this product | Mengaktifkan preview untuk post/produk ini |
| WOFF Font File (recommended) | File WOFF untuk tampilan web (prioritas utama) |
| OTF/TTF Font File (fallback) | Fallback; juga dipakai glyph jika file WOFF adalah WOFF2 |
| Font Name (optional) | Nama tampilan font (berguna di Multi-font Interactive) |
| Add Font | Menambah font lain (weight/style tambahan) |
| Custom Pangrams Selection | Pangram khusus produk, format Label|Teks per baris |
| Custom Default Text | Teks awal saat preview pertama dimuat |
| Custom Default Size (px) | Ukuran default px (Interactive/Multi-font) |
| Font Preview Shortcode | Shortcode siap pakai, misalnya [larisfont_preview id="123"] |
Jika Enable Font Preview global mati, metabox menampilkan pesan IMPORTANT! dengan tautan Go to Settings.
Shortcode [larisfont_preview]
Ringkasan parameter (detail di tutorial terpisah):
| Parameter | Fungsi |
|---|---|
id |
ID produk/post/halaman (default: halaman saat ini) |
title |
Judul section |
title_hide |
yes atau no |
preview |
yes atau no |
glyphs |
yes atau no |
color, background, border, input |
Override warna hex |
Contoh cepat:
[larisfont_preview id="123" preview="yes" glyphs="no"]
[larisfont_preview id="123" preview="no" glyphs="yes" title="Font Glyphs"]Keamanan file font
LarisFont memblokir akses langsung ke URL attachment untuk file font (WOFF, WOFF2, TTF, OTF) dan arsip terkait (ZIP, RAR, TAR, dll.). Pengunjung yang membuka URL media langsung akan dialihkan ke beranda situs. Preview tetap berfungsi karena font diload lewat mekanisme internal plugin (file cache di wp-content/uploads/tplfp/), bukan link attachment publik.
Troubleshooting
Preview tidak muncul sama sekali
| Kemungkinan penyebab | Solusi |
|---|---|
| Enable Font Preview belum dicentang | Aktifkan di Settings global |
| Enable font preview for this product belum dicentang | Centang di metabox produk/post/halaman |
| Belum ada file font terupload | Upload minimal satu file WOFF atau OTF/TTF via Add Font |
| Font Preview Position = shortcode tapi shortcode belum dipasang | Tempel [larisfont_preview] di konten, atau ubah posisi |
| Cache/optimasi tema memblokir script | Nonaktifkan minify JS sementara; pastikan script larisfont-preview terload |
Preview muncul tapi font tidak ter-render
| Kemungkinan penyebab | Solusi |
|---|---|
| Hanya OTF/TTF diupload tanpa WOFF | Upload WOFF Font File (recommended) |
Folder wp-content/uploads/tplfp/ tidak bisa ditulis |
Perbaiki permission folder upload |
| File font corrupt atau format tidak didukung | Coba export ulang sebagai WOFF/OTF/TTF |
Tabel glyph kosong atau tidak muncul
| Kemungkinan penyebab | Solusi |
|---|---|
| Show Font Glyphs Table Preview (if supported) belum aktif | Centang di pengaturan global |
| Hanya WOFF2 yang diupload sebagai file web | Upload OTF/TTF Font File (fallback) karena WOFF2 tidak didukung untuk glyph |
Shortcode glyphs="no" |
Ubah ke glyphs="yes" atau hapus parameter |
Pangram tidak muncul di dropdown
| Kemungkinan penyebab | Solusi |
|---|---|
| Format baris salah | Gunakan Label|Teks per baris, atau teks saja tanpa label |
| Pangram produk kosong dan global juga kosong | Isi Font Preview Pangram global atau Custom Pangrams Selection per produk |
Preview muncul di posisi salah
| Kemungkinan penyebab | Solusi |
|---|---|
| Tema mengubah urutan hook WooCommerce | Coba Custom Hooks Position dengan hook dan prioritas berbeda |
| Opsi post/page belum diaktifkan | Centang Show Font Preview Editor for Post/Page dulu |
Ringkasan
Alur yang paling sering dipakai: aktifkan Enable Font Preview → pilih gaya dan posisi → upload font + centang Enable font preview for this product → cek frontend. Dua toggle (global dan per produk) wajib aktif agar widget tampil.