Implementasi Laravel Google Fonts Package by Spatie

Laravel Google Fonts - Google Font adalah koleksi font (huruf) yang disediakan secara gratis oleh Google. Google Fonts menyediakan ribuan opsi font yang dapat digunakan untuk mengubah tampilan teks di situs web, aplikasi, atau dokumen lainnya.

Salah satu keuntungan utama Google Fonts adalah aksesibilitasnya yang luas. Kita dapat mengunduh font-font tersebut dan menggunakannya secara bebas baik untuk penggunaan pribadi maupun komersial. Font-font tersebut juga dapat disematkan ke dalam situs web Kita dengan menggunakan kode HTML atau CSS yang disediakan oleh Google.

Dengan Google Fonts, Kita tidak perlu lagi mengandalkan font standar yang terbatas yang disediakan oleh sistem operasi atau perangkat Kita. Kita dapat memilih font yang sesuai dengan style dan tujuan, baik itu untuk meningkatkan daya tarik visual atau untuk meningkatkan kelegibilitas teks.

Selain itu, Google Fonts juga menyediakan fitur-fitur seperti kemampuan untuk melihat pratinjau teks dalam berbagai font, menyesuaikan berbagai parameter font seperti ukuran dan ketebalan, serta mendapatkan rekomendasi font yang sesuai dengan kebutuhan Kita.

Penggunaan Google Fonts sangat mudah, Kita hanya perlu menambahkan kode referensi ke font yang Kita pilih ke halaman web Kita, dan font tersebut akan diunduh dan ditampilkan pada pengunjung situs Kita secara otomatis.

Secara keseluruhan, Google Fonts adalah resource yang sangat berguna bagi para desainer, pengembang web, dan siapa pun yang ingin meningkatkan tampilan teks di proyek mereka dengan memanfaatkan beragam pilihan font berkualitas tinggi yang disediakan secara gratis oleh Google.

Nah, di artikel ini saya akan share cara implementasi google fonts di Laravel menggunakan laravel google fonts package dari Spatie.

Seperti yang telah saya mention di awal, Google Fonts menawarkan berbagai opsi font yang menarik, dan dengan bantuan Laravel Google Fonts Package dari Spatie, Kita dapat dengan mudah mengintegrasikan dan mengelola font-font tersebut dalam proyek Laravel Kita.

Spatie, perusahaan pengembangan perangkat lunak terkenal, menyediakan banyak Laravel Package yang sangat berguna dan memudahkan pengembang aplikasi dengan laravel, dan salah satunya adalah laravel-google-fonts. Package ini memungkinkan Kita untuk mengelola font dari Google Fonts dengan mudah, sehingga Kita dapat memperkaya tampilan teks pada situs web Kita. Mari kita bahas langkah-langkah implementasi dan manfaat menggunakan package ini. 👇 🚀

Table of Contents

• Step 1: Install Laravel Google Fonts Package
• Step 2: Implementasi Laravel Google Fonts Package
• Menggunakan dengan spatie/laravel-csp

Step 1: Install Laravel Google Fonts Package

Untuk installasi laravel google fonts package sangat mudah sekali, berikut ini adalah cara menerapkan laravel google fonts package. Sebelum install laravel google fonts package, silahkan buka terminal lalu masuk ke direktori laravel project kalian. Kemudian Install google fonts package via composer dengan menjalankan perintah seperti di bawah ini.

composer require spatie/laravel-google-fonts

Jika proses installasi google fonts package sudah selesai, silahkan lanjutkan langkah mem-publish file config google fonts dengan perintah di bawah ini. Dengan perintah tersebut, sekarang kita sudah mempunyai file config google fonts.

php artisan vendor:publish --provider="Spatie\GoogleFonts\GoogleFontsServiceProvider" --tag="google-fonts-config"

Buka file google-fonts.php yang berada di dalam folder config. File config/google-fonts.php akan seperti di bawah ini.

return [

    /*
     * Here you can register fonts to call from the @googlefonts Blade directive.
     * The google-fonts:fetch command will prefetch these fonts.
     */
    'fonts' => [
        'default' => 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700',
    ],

    /*
     * This disk will be used to store local Google Fonts. The public disk
     * is the default because it can be served over HTTP with storage:link.
     */
    'disk' => 'public',

    /*
     * Prepend all files that are written to the selected disk with this path.
     * This allows separating the fonts from other data in the public disk.
     */
    'path' => 'fonts',

    /*
     * By default, CSS will be inlined to reduce the amount of round trips
     * browsers need to make in order to load the requested font files.
     */
    'inline' => true,

    /*
     * When something goes wrong fonts are loaded directly from Google.
     * With fallback disabled, this package will throw an exception.
     */
    'fallback' => ! env('APP_DEBUG'),

    /*
     * This user agent will be used to request the stylesheet from Google Fonts.
     * This is the Safari 14 user agent that only targets modern browsers. If
     * you want to target older browsers, use different user agent string.
     */
    'user_agent' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15',

];

Step 2: Implementasi Laravel Google Fonts Package

Untuk menambahkan font ke aplikasi atau laravel project kita, copy embed code dari google font, daftarkan di config seperti di bawah ini dan nantinya kita akan menggunakan @googlefonts blade directive di file blade atau view.

// config/google-fonts.php

return [
    'fonts' => [
        'default' => 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap',
        'code' => 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&display=swap',
    ],
];

{{-- resources/views/layouts/app.blade.php --}}

<head>
    {{-- Loads Inter --}}
    @googlefonts

    {{-- Loads IBM Plex Mono --}}
    @googlefonts('code')
</head>

Dengan cara seperti Ini, kita akan membuat inline CSS, sehingga browser needs to do one less round-trip. Jika Kalian lebih suka file CSS eksternal, Kalian dapat menonaktifkan inline option dalam konfigurasi package. Font disimpan dalam folder font pada disk public. Kita harus menjalankan php artisan storage:link untuk memastikan file dapat disajikan melalui HTTP. Jika Kalian ingin menyimpan font di repositori git, pastikan storage/app/public tidak di ignore.

Jika kita ingin memastikan font siap disajikan sebelum siapapun mengunjungi situs kita, kita dapat mengambilnya terlebih dahulu dengan perintah artisan seperti di bawah ini.

php artisan google-fonts:fetch

Menggunakan dengan spatie/laravel-csp

Jika kamu juga menggunakan spatie/laravel-csp untuk manage Content Security Policy, kamu bisa pass array ke blade directive dan menambahkan nonce option seperti di bawah ini.

{{-- resources/views/layouts/app.blade.php --}}

<head>
    {{-- Loads Inter --}}
    @googlefonts(['nonce' => csp_nonce()])

    {{-- Loads IBM Plex Mono --}}
    @googlefonts(['font' => 'code', 'nonce' => csp_nonce()])
</head>

Dengan menggunakan Laravel Google Fonts Package dari Spatie, Kita dapat dengan mudah mengintegrasikan dan mengelola font dari Google Fonts dalam proyek Laravel Kita. Ini memberikan fleksibilitas dan kemudahan dalam memilih font yang sesuai dengan desain situs web Kita. Dengan tampilan font yang menarik dan profesional, tentunya situs web akan semakin memukau pengunjung.

Full Documentation: Laravel Google Fonts Package

Credit: Design illustrations by Storyset