FabricJs Tutorial : Canvas Doesn’t Render Custom WebFont

Pernah kemarin ketika saya lagi asik-asiknya mainan dengan FabricJs, ketemu dengan permasalahan sesuai dengan judul tulisan kali ini. Permasalahan muncul ketika setelah selesai inisialisasi canvas, kemudian mulai menambahkan object text dengan berbagai macam property nya seperti font size, font align, dll. Kebetulan saya menggunakan custom webfont dari Google. Font type tidak langsung di-render otomatis. Object text muncul, hanya saja seperti tulisan yang font type nya tidak ditemukan. Dan ketika saya coba untuk melakukan klik di area canvas atau select object text, barulah font type nya muncul dan di-render.

Tidak masalah memang, cuma ini berhubungan dengan UX (cieeehh, yang ngomongin UX, hahaha). Googling kesana-kemari, solusinya belum ada. Akhirnya iseng mampir ke halaman dokumentasi google webfont, disana dijelaskan untuk menggunakan webfont loader. Disediakan event active, jadi ketika webfont telah berhasil dimuat, maka event active akan dijalankan. Kita bisa menambahkan sebuah function di event ini. Ada juga event loading, sambil menunggu semua font, kita bisa menambahkan animasi atau pesan kepada user. Di bawah ini saya buatkan contohnya, silahkan di’korek-korek :p

Sekian dulu hasil tulisan saya kali ini, saya catat disini supaya tidak lupa :)). Siapa tau juga ada rekan-rekan yang mengalami masalah serupa, semoga bisa membantu.

“Stay Foolish, Stay Hungry”

Happy Blogging and Keep Coding

Cheerrrss….!!!!