Laravel Google Fonts

https://github.com/spatie/laravel-google-fonts
Admin
This package makes self-hosting Google Fonts frictionless for Laravel applications by scraping CSS,...
Tokens:3,630
Snippets:21
Trust Score:10
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install package via Composer

Source: https://github.com/spatie/laravel-google-fonts/blob/main/README.md

Use this command to add the package to your Laravel project.

```bash
composer require spatie/laravel-google-fonts
```

--------------------------------

### Publish configuration file

Source: https://github.com/spatie/laravel-google-fonts/blob/main/README.md

Run this command to publish the package configuration to your application.

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

--------------------------------

### Configuration file structure

Source: https://github.com/spatie/laravel-google-fonts/blob/main/README.md

The default configuration file allows defining font URLs, storage disks, and optimization settings like inlining and preloading.

```php
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 preload is set to true, preload meta tags will be generated
     * in the HTML output to instruct the browser to start fetching the
     * font files as early as possible, even before the CSS is fully parsed.
     */
    'preload' => false,
    
    /*
     * 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',

];
```

--------------------------------

### Run tests with Composer

Source: https://github.com/spatie/laravel-google-fonts/blob/main/README.md

Executes the project's test suite using the Composer test script.

```bash
composer test
```

--------------------------------

### Prefetch Fonts

Source: https://github.com/spatie/laravel-google-fonts/blob/main/README.md

Run this command to download and cache fonts locally before they are requested by users.

```bash
php artisan google-fonts:fetch
```

--------------------------------

### Configure Google Fonts

Source: https://github.com/spatie/laravel-google-fonts/blob/main/README.md

Define font URLs in the configuration file to be managed by the package.

```php
// 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',
    ],
];
```

--------------------------------

### Use Blade Directive

Source: https://github.com/spatie/laravel-google-fonts/blob/main/README.md

Load configured fonts in your Blade templates using the @googlefonts directive.

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

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

--------------------------------

### Use with Content Security Policy

Source: https://github.com/spatie/laravel-google-fonts/blob/main/README.md

Pass a nonce to the Blade directive when using spatie/laravel-csp for security compliance.

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

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

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

--------------------------------

### Load Fonts in Blade Templates

Source: https://github.com/spatie/laravel-google-fonts/blob/main/README.md

Use the @googlefonts directive to render the configured fonts within the HTML head section.

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

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

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

--------------------------------

### Inter Font Face Definitions

Source: https://github.com/spatie/laravel-google-fonts/blob/main/tests/__snapshots__/GoogleFontsTest__it_loads_google_fonts_as_array__3.html

CSS @font-face rules defining the Inter font family with specific unicode ranges and source URLs for different character sets and weights.

```css
/* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia2jl7w0q5n-wu.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia0zl7w0q5n-wu.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia2zl7w0q5n-woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia1pl7w0q5n-wu.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia2pl7w0q5n-wu.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia25l7w0q5n-wu.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia1zl7w0q5nw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia2jl7w0q5n-wu.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia0zl7w0q5n-wu.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia2zl7w0q5n-wu.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia1pl7w0q5n-wu.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia2pl7w0q5n-wu.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia25l7w0q5n-wu.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/storage/952ee985ef/sinterv20ucc73fwrk3iltehus-nvmrmxcp50sjia1zl7w0q5nw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
```
Tokens:
Raw