DOMPdf merupakan library php untuk dapat mengexport halaman menjadi dokumen pdf. Salah satu masalah umum yang sering dihadapi adalah custom font yang berhasil muncul di preview dokumen, tetapi tidak muncul saat dokumen dicetak atau diunduh sebagai PDF.
Masalah ini biasanya ditemui jika kamu menggunakan font custom selain yang diambil selain dari Google Font. Saat kamu menggunakan font dari google font kamu langsung dapat memanggilnya dengan css yang tersedia dari google font
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Birthstone&family=Lobster&display=swap" rel="stylesheet">Namun jika font yang kamu gunakan sangat custom kamu harus mendownload font tersebut dalam format woff, ttf atau sebagainya lalu import font tersebut dalam style css
@font-face {
font-family: "copperplate";
font-style: normal;
font-weight: normal;
font-display: swap;
src: local("copperplate"),
url(http://127.0.0.1:8000/asset/fonts/copperplate.woff) format("woff");
}Masalah akan muncul disini
Font yang berasal dari Google Font dapat muncul saat dokumen dipreview (html) maupun dicetak dalam PDF
Sedangkan font custom dapat muncul saat dokumen dipreview namun tidak akan muncul saat dicetak dalam PDF
Untuk dapat mengetahui masalah tersebut, mari kita lihat bagaimana DOMPdf bekerja
Informasi bagaimana DOMPdf bekerja masih belum valid 100%, disini saya hanya beropini dari mengikuti alur yang terjadi saat mencetak dokumen.
I . Mencetak Halaman
$pdf = PDF::loadView('content.previews.v_print_cover');
return $pdf->stream();Saat kita memanggil code untuk mencetak pdf, maka DOMPdf akan membaca seluruh halaman view tersebut terlebih dahulu. Saat ada code source untuk memanggil font baik itu dari Google Font atau pun custom file (ttf,woof), DOMPdf akan mengenerate font tersebut.
II. Generate Font
Saat menemukan source font, dompdf akan mengambil font tersebut lalu menyimpannya kedalam suatu folder yaitu ‘storage/fonts’. Kamu dapat melihat dan mengganti pengaturan confignya pada ‘config/dompdf.pdf’
return [
'fontCache' => storage_path('fonts'),
'fontDir' => storage_path('fonts'),
.....
];Kode dompdf.php diatas menunjukan lokasi font akan disimpan pada folder storage.
Contoh :
v_print_cover.blade.php yang distream menjadi PDF pada controller
{{-- v_print_cover.blade.php --}}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sampul Raport</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Birthstone&family=Lobster&display=swap" rel="stylesheet">
......Didalam view tersebut kita memanggil font Birthstone dari Google Font. Pada saat mencetak pertama kali, DOMPdf akan membuat sebuah 3 buah file didalam folder ‘storage/fonts’ yaitu file ttf, umf dan json
File tersebut yang nantinya digunakan untuk menampilkan font yang dicustom saat mencetak dokumen terkait. Daftar dari font yang sudah terdaftar ke DOMPDf akan ada pada file ‘storage/font/installed-fonts.json’.
Dapat dilihat bahwa font birthstone sudah ada dalam installed-font DOMPdf yang menandakan font tersebut dapat tampil pada saat kita mencetak dokumen.
Lalu Dimana Masalahnya ??
Masalahnya adalah jika kamu menggunakan font custom yang dipanggil dengan menggunakan local font (woff,ttf, dll)
{{ -- v_print_cover.blade.php -- }}
@font-face {
font-family: "copperplate";
font-style: normal;
font-weight: normal;
font-display: swap;
src: local("copperplate"),
url(http://127.0.0.1:8000/asset/fonts/copperplate.woff) format("woff");
}Terkadang DOMPdf tidak dapat membuat file generate font tersebut (copperplate) kedalam folder ‘storage/fonts’ ( pada storage font tidak ada file dari font copperplate ).
Hal itu membuat font custom tidak dapat terpanggil saat mencetak dokumen.
Solusi
{{ -- v_print_cover.blade.php -- }}
@font-face {
font-family: "copperplate";
font-style: normal;
font-weight: normal;
font-display: swap;
src: local("copperplate"),
url(http://127.0.0.1:8000/asset/fonts/copperplate.woff) format("woff");
}Untuk dapat menggunakan font custom dari sumber lokal kamu ( woff, ttf dll ) kamu perlu mengkonvert file kamu menjadi format ttf dan umf dengan tool seperti Convert ttf to ufm | Everything Fonts.
Setelah kamu convert file font kamu menjadi ttf dan umf, masukkan kedua file tersebut kedalam folder ‘storage/fonts’ dengan nama yang sama.
Tulis settingan font copperplate pada installed-font.json dengan NAMA YANG SAMA dengan
2 file hasil konvert -> [ copperplate.ttf & cooperplate.ufm]
{{ -- v_print_cover.blade.php -- }}
@font-face {
font-family: "copperplate";
font-style: normal;
font-weight: normal;
font-display: swap;
src: local("copperplate"),
url(http://127.0.0.1:8000/asset/fonts/copperplate.woff) format("woff");
}Dan font-face pada halaman view (woff) agar font tersebut dapat digunakan mencetak dokumen.
Setelah itu coba akses halaman print kamu
Jika font custom tampil dengan baik saat mencetak dokumen, maka akan muncul penambahan file ‘copperplategothicbold.ufm.json ’pada folder ‘ storage/fonts’.
Terima kasih