Pada saat membuat website, tidak jarang kita akan mengubah font yang digunakan. Biasanya agar lebih mudah kita akan menggunakan google font, selain gratis pilihan fontnya juga banyak. Namun, tidak menutup kemungkinan kita ingin menggunakan font yang tidak tersedia di google font. Misalnya kita sudah memiliki font yang kita inginkan dan ingin menggunakan font tersebut pada website kita. Nah, pada artikel kali ini kita akan membahas bagaimana cara menggunakan font lokal pada laravel.

Persiapan

Pastikan kalian sudah memiliki project laravel yang terinstall di komputer kalian. Jika belum, kalian bisa membuat project laravel dengan cara berikut:

1

composer create-project --prefer-dist laravel/laravel nama_project

Pastikan kalian memiliki font yang ingin digunakan. Font yang akan digunakan harus merupakan font yang dibuat untuk web. Font web adalah font yang secara khusus dibuat untuk diterapkan pada teks di halaman web. Browser mengunduh font web yang ditentukan saat merender halaman web dan menerapkan font ke teks pada halaman tersebut. Biasanya font web memiliki ekstensi .woff atau .woff2.

Menambahkan Font

Setelah kalian memiliki font yang ingin digunakan, langkah selanjutnya adalah menambahkan font tersebut ke dalam project laravel kalian. Caranya cukup mudah, kalian hanya perlu membuat folder fonts di dalam folder resource project laravel kalian. Lalu pindahkan folder font atua file yang ingin kalian gunakan ke dalam folder fonts tersebut. Berikut struktur folder pada project laravel kalian:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

project_laravel
├── resources
│   ├── fonts
│   │   ├── font1.woff
│   │   ├── font1.woff2
│   │   ├── font2.woff
│   │   └── font3.woff
│   │   └── MyFont
│   │       ├── MyFont-Bold.woff
│   │       ├── MyFont-BoldItalic.woff
│   │       ├── MyFont-Italic.woff

Menggunakan Font

Setelah kalian menambahkan font ke dalam project laravel kalian, langkah selanjutnya adalah menggunakan font tersebut. Untuk menggunakan font tersebut, kalian bisa menambahkan css yang berisi deklarasi font tersebut. Kita bisa tambahkan pada file resources/css/app.css atau file css yang kalian gunakan. Berikut contoh deklarasi font pada file css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

@font-face {
    font-family: 'MyFont';
    src: url('../fonts/MyFont/MyFont-Bold.woff') format('woff'),
         url('../fonts/MyFont/MyFont-BoldItalic.woff') format('woff'),
         url('../fonts/MyFont/MyFont-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* atau */
@font-face {
    font-family: "MyFont";
    src: url("../fonts/font1.woff2") format("woff2"),
        url("../fonts/font1.woff") format("woff");
    font-weight: 200;
    font-style: normal;
}

Setelah kalian menambahkan deklarasi font, tambahkan baris berikut pada file resources/js/app.js:

1
2
3

import.meta.glob([
    '../fonts/**',
  ]);

Kode diatas berfungsi untuk memuat file font yang ada di dalam folder fonts ke dalam project laravel kalian.

Jalankan perintah berikut untuk meng-compile file css dan js kalian:

1
2
3

npm run dev
# atau
npm run build

Setelah itu, kalian bisa menggunakan font tersebut pada project laravel kalian. Misalnya kalian ingin menggunakan font tersebut pada file css kalian:

1
2
3

body {
    font-family: 'MyFont', sans-serif;
}

Kesimpulan

Dengan menggunakan font lokal, kita bisa menggunakan font yang kita inginkan pada website kita. Dengan begitu, kita bisa lebih leluasa dalam mendesain website kita sesuai dengan keinginan kita. Semoga artikel ini bermanfaat dan selamat mencoba!