SCSS Импортировать локальный шрифт ttf

Question

Мне нужно импортировать шрифт истинного шрифта локально для моего веб-сайта.

Для удаленных шрифтов я всегда использовать

@import url('https://example'); 

, но не знаю, как импортировать его из файлов.

Я считаю, что это очень просто, но я не смог найти и хорошего результата.

Спасибо

Answer 1

Если вы не имеете локальный шрифт .ttf, перейти на сайт преобразования WebFont, мне нравится этот один https://onlinefontconverter.com/

Выберите выходной формат, нужно, я бы рекомендовал выбрать .eot, .woff и svg вместе с вашим .ttf для совместимости с браузером.

Затем в вашем scss используйте что-то подобное, чтобы импортировать все версии этого шрифта для кросс-браузера.

Не забудьте добавить запасные шрифты только для разблокировки.

@mixin font($font-family, $font-file) { 
 
    @font-face { 
 
    font-family: $font-family; 
 
    src: url($font-file+'.eot'); 
 
    src: url($font-file+'.eot?#iefix') format('embedded-opentype'), 
 
    url($font-file+'.woff') format('woff'), 
 
    url($font-file+'.ttf') format('truetype'), 
 
    url($font-file+'.svg#aller') format('svg'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    } 
 
} 
 

 

 
@include font('Arvo', '/htdocs/lib/fonts/Arvo'); 
 
@include font('Arvo-Bold', '/htdocs/lib/fonts/Arvo-Bold'); 
 

 

 
h1 { 
 
    font-family: Arvo-Bold, Arial-bold, arial, sans-serif; 
 
}

<h1>Hey Look! A headline in Arvo bold!</h1>