Как можно подключить свой .ttf шрифт в проекте Laravel с использованием Tailwind CSS?

Question

Константин

laravel , tailwind

Как можно подключить свой .ttf шрифт в проекте Laravel с использованием Tailwind CSS?

Папка с шрифтом .ttf расположена по следующему пути: /resources/assets/fonts/Tapestry/... <br/><br/> В файле app.css я подключаю нужный шрифт следующим образом: <br/><pre><code class="css">@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    @font-face {
        font-family: 'Tapestry';
        src: url('../assets/fonts/Tapestry/Tapestry-Regular.ttf') format('ttf');
    }
}</code></pre><br/><br/> В файле tailwind.config.js я расширяю доступные fontFamily: <br/><pre><code class="javascript">extend: {
        fontFamily: {
            'test': ['Tapestry']
        },</code></pre><br/><br/> В шаблоне blade я добавляю: <br/><code>&lt;body class="font-test"&gt;</code> <br/><br/> Однако шрифт не применяется.

3 сентября 2024 г. 15:42

Ответы на вопрос 1

Похожие вопросы

Answer 1

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

### 1. Проверка пути к шрифту

Убедитесь, что путь к файлу шрифта в вашем CSS правильный. Важно понимать, что данный путь должен быть относительным к компилируемому CSS-файлу. Если вы используете Laravel Mix для сборки ваших CSS-файлов, то путь `../assets/fonts/Tapestry/Tapestry-Regular.ttf` может быть неправильным. Laravel Mix обычно копирует файлы в директорию `public`.

Попробуйте использовать следующий путь:

```css
@font-face {
    font-family: 'Tapestry';
    src: url('/fonts/Tapestry/Tapestry-Regular.ttf') format('truetype');
}
```

### 2. Проверка формата

Убедитесь, что указали правильный формат шрифта. Вместо `format('ttf')` используйте `format('truetype')`.

### 3. Команда сборки

После правок не забудьте скомпилировать ваши файлы CSS. Если вы используете Laravel Mix, это можно сделать с помощью следующей команды:

```bash
npm run dev
```

или

```bash
npm run production
```

### 4. Проверка настроек Tailwind

В `tailwind.config.js` вы правильно добавили свой шрифт, но убедитесь, что ваш файл включает в себя переменные конфигурации Tailwind, как показано ниже:

```javascript
module.exports = {
    theme: {
        extend: {
            fontFamily: {
                'test': ['Tapestry']
            },
        },
    },
    variants: {},
    plugins: [],
}
```

### 5. Проверка подключения стилей

Убедитесь, что `app.css`, в который вы добавили шрифт, правильно подключен к вашему шаблону Blade. Например, в файле `resources/views/layouts/app.blade.php` должно быть что-то вроде:

```html
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
```

### 6. Проверка в браузере

Затем, откройте инструменты разработчика в вашем браузере (F12), перейдите на вкладку "Network" и обновите страницу. Найдите файл шрифта `Tapestry-Regular.ttf`. Если он не загружается, путь к нему неправильный или файл отсутствует.

### 7. Проверка кэширования

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

### Пример полного кода

Вот пример того, как должно выглядеть ваше подключение:

```css
/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    @font-face {
        font-family: 'Tapestry';
        src: url('/fonts/Tapestry/Tapestry-Regular.ttf') format('truetype');
    }
}
```

```javascript
// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            fontFamily: {
                'test': ['Tapestry'],
            },
        },
    },
    variants: {},
    plugins: [],
}
```

```html
<!-- blade шаблон -->
<body class="font-test">
    <!-- Ваш контент -->
</body>
```

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