Как подключить шрифт в sass, чтобы он компилировался в css?

Question

[Kork888]

Допустим мне нужен шрифт OpenSansBold, как написать в sass ?

Comments

[iBird Rose]

забыть про sass и использовать scss - и подключать также как и в css

[Kork888]

iBird Rose: лучше забыть про scss и использовать sass)

[Игорь]

Kork888: мне тоже sass больше нравится

Answer 1

[Pavel Sh.]

Я бы посоветовал использовать пакет для подключения, в разных форматах.
Компиляция происходит очень просто https://fontie.pixelsvsbytes.com/webfont-generator
Выбираете: Formats ставите галочку на TrueType Font.
После этого, загружаете любой из скачанных шрифтов (формат не важен) нажав на ссылку выше "Add your font files (or just drop them on the page)". Жмем "Generate & download your @font-face package" и скачиваем архив с генерированными шрифтами.

Следующий шаг: Открываем архив и копируем все шрифты(.ttf, .eot, .svg, .woff и .woff2) в директорию с проектом в папку fonts. В скачанном архиве, открываем файл *.css он там один и копируем стиль для шрифта в отдельный файл стилей шрифтов (как правило это файл _fonts.sass) подключенный к основному стилевому файлу к примеру так: ...где fonts это имя вашего sass файла со шрифтами.
Пример комплекта подключения:

(копируем в файл _fonts.sass) структура может изменяться исходя из имени вашего шрифта.

Данный способ универсален и более насыщен для работы, является более кроссбраузерным. Интеграция шрифта - как обычно.

Comments

[Сергей]

Спасибо, очень помогли, теперь буду пользоваться этим сервисом, все очень хорошо расписали!

[Pavel Sh.]

Пожалуйста. Я очень рад что смог вам помочь.

[Bondi]

Pavel Sh.: Привет! спасибо за крутой сервис! А не подскажешь, почему Roboto проходит норм, а Roboto Slab выдает ошибку?

Answer 2

[Игорь]

Я делал так

@font-face
    font-family: "RobotoRegular"
    src : url("../fonts/RobotoRegular/RobotoRegular.ttf")

В отдельном файле fonts.sass , a затем подключал к основному файлу main.sass вот так
@import "app/sass/fonts.sass"

Comments

[Kork888]

Спасибо)

Answer 3

[Kaloy_El]

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);
Rendered as CSS:

@font-face {
font-family: "Samplino";
src: url("fonts/Samplino.eot?") format("eot"),
url("fonts/Samplino.woff2") format("woff2"),
url("fonts/Samplino.woff") format("woff"),
url("fonts/Samplino.ttf") format("truetype"),
url("fonts/Samplino.svg#Samplino") format("svg");
}

Answer 4

[Айдар Иванов]

Новая большая книга CSS Д. Макфарланд , вам в помощь