WhatsApp

Membuat Font Selector ( Google Fonts ) Laravel

Pertanyaan ini muncul ketika saya sedang membuat sebuah web builder (SaaS), bagaimana caranya menampilkan seluruh list google font, dan ketika kita memilih font tersebut, maka font di website kita juga akan otomatis menjadi seperti font yang telah kita pilih.

dan berikut langkah-langkah yang saya kerjakan.

Buat Tabel Database (Migration)

php artisan make:migration create_fonts_table

Edit file migration:

// database/migrations/xxxx_xx_xx_create_fonts_table.php
public function up()
{
    Schema::create('fonts', function (Blueprint $table) {
        $table->id();
        $table->string('family');
        $table->string('category')->nullable();
        $table->json('variants')->nullable();
        $table->json('subsets')->nullable();
        $table->string('version')->nullable();
        $table->string('lastModified')->nullable();
        $table->timestamps();
    });
}

Lalu jalankan:

php artisan migrate

Buat Model:

php artisan make:model Font

Ambil Data dari Google Fonts API

Buat command khusus untuk ambil data dan simpan ke DB:

php artisan make:command SyncGoogleFonts

Isi file app/Console/Commands/SyncGoogleFonts.php:

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Http;
use App\Models\Font;

class SyncGoogleFonts extends Command
{
    protected $signature = 'fonts:sync';
    protected $description = 'Sync all Google Fonts and save to database';

    public function handle()
    {
        $apiKey = env('GOOGLE_FONTS_API_KEY'); // Simpan API Key di .env
        $url = "https://www.googleapis.com/webfonts/v1/webfonts?key={$apiKey}&sort=popularity";

        $this->info('Mengambil data font dari Google Fonts API...');
        $response = Http::get($url);

        if ($response->successful()) {
            $fonts = $response->json()['items'];

            foreach ($fonts as $font) {
                Font::updateOrCreate(
                    ['family' => $font['family']],
                    [
                        'category' => $font['category'] ?? null,
                        'variants' => $font['variants'] ?? [],
                        'subsets' => $font['subsets'] ?? [],
                        'version' => $font['version'] ?? null,
                        'lastModified' => $font['lastModified'] ?? null,
                    ]
                );
            }

            $this->info("Berhasil menyimpan " . count($fonts) . " fonts ke database.");
        } else {
            $this->error('Gagal mengambil data dari API.');
        }
    }
}

update model Font, pada app/Models/Font.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Font extends Model
{
    use HasFactory;

    protected $fillable = [
        'family',
        'category',
        'variants',
        'subsets',
        'version',
        'lastModified',
    ];

    // Jika variants dan subsets adalah array/json, tambahkan cast
    protected $casts = [
        'variants' => 'array',
        'subsets' => 'array',
    ];
}

Tambahkan API Key di .env

GOOGLE_FONTS_API_KEY=your_real_api_key_here

Jalankan Command:

php artisan fonts:sync
  • Font akan langsung tersimpan ke tabel fonts di database!
Baca Juga  Integrasi FullCalendar di NuxtJS dan Laravel API (Part 1)

Contoh Isi Tabel:

idfamilycategoryvariantssubsetslastModifiedversion
1Robotosans-serif[“regular”,”700″][“latin”,”cyrillic”]2023-12-01v29
2Latosans-serif[“300″,”regular”][“latin”]2023-11-10v22

untuk menampilkan datanya, kita akan buat dengan cara seperti berikut:

Ambil Data Font di Controller

// app/Http/Controllers/FontController.php

use App\Models\Font;

public function index()
{
    $fonts = Font::all(); // atau pakai paginate/sort sesuai kebutuhan
    $selectedFont = $request->get('font', 'Poppins'); 

    return view('fonts.index', compact('fonts', 'selectedFont'));
}

Tampilkan di Blade View (resources/views/fonts/index.blade.php)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font Selector</title>

    {{-- Load Google Fonts jika ada selected font --}}
    @if($selectedFont)
        <link href="https://fonts.googleapis.com/css2?family={{ str_replace(' ', '+', $selectedFont) }}&display=swap" rel="stylesheet">
        <style>
            body {
                font-family: '{{ $selectedFont }}', sans-serif;
            }
        </style>
    @endif
</head>
<body>

    <h2>Font Selector (Laravel Blade)</h2>

    <form method="GET" action="{{ route('fonts.index') }}">
        <label for="fontSelect">Pilih Font:</label>
        <select name="font" id="fontSelect" onchange="this.form.submit()">
            @foreach($fonts as $font)
                <option value="{{ $font->family }}" {{ $selectedFont == $font->family ? 'selected' : '' }}>
                    {{ $font->family }}
                </option>
            @endforeach
        </select>
    </form>

    <p style="margin-top: 2rem;">
        Ini adalah teks preview dengan font: <strong>{{ $selectedFont }}</strong>
    </p>

</body>
</html>

Hasil:

  • Font list ditampilkan dari database.
  • User pilih font → halaman reload otomatis (onchange="submit()").
  • Font langsung diterapkan via Google Fonts + font-family di <style>.
Share your love