Не подключается шрифт через @font-face

Question

Не подключается шрифт через @font-face

Рейтинг: 0Ответов: 1Опубликовано: 02.05.2023

Создаю веб-приложение на React'e и столкнулся с такой проблемой, что не могу подключить шрифт через @font-face. Как это можно исправить помогите пожалуйста, внизу привёл код и скрины расположения файлов. Использую css препроцессоры, в данном случае

@font-face
    font-family: 'macherie'
    src: local("macherie"),
    src: url("../fonts/macherie.ttf"), format("truetype")
    font-weight: 700

*
margin: 0
padding: 0

h1
    font-family: macherie, sans-serif
    font-style: normal
    font-weight: 600
    font-size: clamp(55px,5.728800000000001vw,220px)
    line-height: 120%

javascript html reactjs sass

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Покажите ошибку в браузере вкладку Network? Если ругается на загрузку шрифта 404 (значит проблема в пути) если даже не открывается то проблема в синтаксисе sass.

Если подключаете font-weight: 700 то и на h1 должен быть 700 а не 600

Пример как у меня в проекте подключается свой шрифт (с web версиями) правда там scss но легко переделать можно под sass:

пример sass:

в app.sass сверху добавляем @import "fonts"; Создаем файл: _fonts.sass обязательно с подчеркиванием и папку _mixins с файлом _font-face.sass

в файл _fonts.sass добавляем:

@import "_mixins/font-face"

+font-face("macherie", "../fonts/macherie", 700)

в файл _mixins/_font-face.sass

@mixin font-face($font-family, $file-path, $weight: normal, $style: normal )
@font-face
    font-family: $font-family
    font-weight: $weight
    font-style: $style
    font-display: swap
    src: url('#{$file-path}.ttf') format('truetype')

в файле app.sass для h1

h1
    font-family: macherie, sans-serif
    font-weight: 700

Не подключается шрифт через @font-face

Ответы