Как сделать preload шрифта в laravel?

@ottilie.farrell 

Чтобы добавить preload шрифтов в Laravel, можно использовать следующие шаги:

1. Поместите файлы шрифтов в директорию public/fonts вашего проекта Laravel.
2. Вставьте следующий код в head секцию вашего макета Blade:

1

<link rel="preload" href="{{ asset('fonts/your-font.woff2') }}" as="font" type="font/woff2" crossorigin>

Замените your-font.woff2 на имя вашего файла шрифта.

1. Сохраните изменения и проверьте, что файлы шрифтов успешно загружаются с помощью инструментов разработчика в браузере.

Примечание: Чтобы использовать asset() хелпер, убедитесь, что вы установили Laravel Mix и скомпилировали свои файлы стилей с помощью команды npm run dev или npm run prod.

@ottilie.farrell 

Также, вы можете использовать логику предварительной загрузки шрифтов вспомогательного класса Middleware в Laravel.

Создайте новый класс Middleware, например, PreloadFontsMiddleware, с помощью команды artisan:

php artisan make:middleware PreloadFontsMiddleware

Откройте созданный класс в директории app/Http/Middleware и добавьте следующий код в метод handle:

use Closure;

class PreloadFontsMiddleware { public function handle($request, Closure $next) { $fonts = [ 'your-font.woff2', // добавьте дополнительные имена файлов шрифтов, если необходимо ];

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

    $preload = '';
    foreach ($fonts as $font) {
        $path = asset('fonts/' . $font);
        $preload .= '<link rel="preload" href="' . $path . '" as="font" type="font/woff2" crossorigin>' . PHP_EOL;
    }

    $response = $next($request);
    $content = $response->getContent();

    $position = strripos($content, '</head>');

    if ($position !== false) {
        $content = substr($content, 0, $position) . $preload . substr($content, $position);
    }

    $response->setContent($content);

    return $response;
}

}

Затем, зарегистрируйте свой Middleware, добавив его в массив $middleware в файле app/Http/Kernel.php:

protected $middleware = [ // ... AppHttpMiddlewarePreloadFontsMiddleware::class, ];

Замените your-font.woff2 на имя вашего файла шрифта.

Перезапустите ваш сервер Laravel.

Теперь, при каждом запросе, ваш Middleware будет вставлять теги предварительной загрузки шрифтов в head секцию для каждого файла шрифта, указанного в массиве $fonts в методе handle.

Пожалуйста, не забудьте проверить, что файлы шрифтов правильно загружаются с помощью инструментов разработчика в браузере.