How to include a font in sass so that it compiles to css?

Question

Sass

Let's say I need the OpenSansBold font, how do I write it in sass ?

Answer 1

I would advise using a connection package, in different formats.
Compilation is very simple https://fontie.pixelsvsbytes.com/webfont-generator
Choose: Formats check TrueType Font.
After that, upload any of the downloaded fonts (format is not important) by clicking on the link above "Add your font files (or just drop them on the page)". Click "Generate & download your @font-face package" and download the archive with the generated fonts.
Next step: Open the archive and copy all the fonts (.ttf, .eot, .svg, .woff and .woff2) into the project directory into the fonts folder. In the downloaded archive, open the *.css file, it's the only one there and copy the style for the font into a separate font style file (usually the _fonts.sass file) connected to the main style file, for example like this: ...where fonts is the name of your sass file with fonts.
Connection kit example:
(copy to _fonts.sass file) the structure can change based on the name of your font.
This method is universal and more saturated for work, it is more cross-browser. Font integration - as usual.

Answer 2

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 3

New big book CSS D. McFarland, to help you