suggestion: font-face

[FDiskas]

There is a problem when custom font is not loaded - website does not displays text - just blank. To solve issue please add to the mixin font-display: swap;

More info: https://css-tricks.com/almanac/properties/f/font-display/

[tysongach]

Can you please provide more detail? What environment are you working within? What fonts are you trying to load and from where? Are you seeing loading errors?

Also, you can specify font-display already (via Sass’s @content):

@include font-face(
  "source-sans-pro",
  "fonts/source-sans-pro-regular",
  ("woff2")
) {
  font-display: swap;
}

[FDiskas]

@import '~node_modules/bourbon/core/bourbon';
@include font-face('GothamLight', './fonts/Gotham-ExtraLight', ('otf')) {
    font-style: normal;
    font-weight: 400;
}

I'm using scss

[tysongach]

Have you tried removing the ./?

-@include font-face('GothamLight', './fonts/Gotham-ExtraLight', ('otf')) {
+@include font-face('GothamLight', '/fonts/Gotham-ExtraLight', ('otf')) {

[FDiskas]

If I type it manually - it works

@font-face {
    font-family: GothamLight;
    font-display: swap;
    src: url('./fonts/Gotham-ExtraLight.otf');
    font-weight: 400;
    font-style: normal;
}

The path it's correct if I change to suggested I got file not found error.

[FDiskas]

What means $asset-pipeline, I'm not using Rails so I'm missing settings like rails-asset-pipeline ?

[tysongach]

The $asset-pipeline argument is set to false by default, so you shouldn’t have to worry about that:

https://github.com/thoughtbot/bourbon/blob/01084edd23a8ace8291b1a263e24723cd736f92f/core/bourbon/settings/_settings.scss#L36

[tysongach]

I just noticed that you’re using the OTF file format, which is not supported by the @font-face mixin and what is causing the error. I’d suggest using a better web font format like WOFF2 instead.

We should also investigate throwing a more descriptive error.

[FDiskas]

Commercial fonts gives only this format :( https://www.w3schools.com/css/css3_fonts.asp

[tysongach]

If you have a valid license for web usage, you can convert your font files. The Font Squirrel Webfont Generator is a popular option and will produce WOFF and WOFF2 versions.

[tysongach]

I’ve opened https://github.com/thoughtbot/bourbon/pull/1085 which adds an @error to be thrown when a non-supported format is passed into $file-formats.

[FDiskas]

The file gotham-black.otf is blacklisted by the Generator. You will not be able to convert this font. (4)

So I will need to wait for the fix #1085

[tysongach]

To be clear, #1085 does not add support for OTF, it just adds a more clear error message for when OTF is used. I'm not intending on adding support for OTF, because it is not a font format designed for the Web and WOFF and WOFF2 are both highly supported. If a font is went to be use on a website, then the foundry will provide those formats.

There's likely a reason the Webfont Generator has blacklisted Gothem, because it's against the license or something. If Gotham from Hoefler & Co is the typeface you're trying to use, then I believe the only way to use it on the Web is to use their Cloud.typography service (not self-hosting).

[FDiskas]

Not sure what you talking about but OTF format is supported by the browsers

[tysongach]

To clarify, it's not about what the browsers support, but that OTF is an old format that is not designed for web usage. So we've built the Bourbon font-face mixin with an opinion that you should be using WOFF or WOFF2 whenever possible.

This article from Creative Market covers some of the history of the different formats.