CODEWITHSUNDEEP
csssass
Mr.Web
Mr.Web

Reputation: 7176

Setting `font-display: swap` on scss imports

I'm importing Fontawesome in my scss file and I do it this way:

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

I need to set those fonts to load with the swap method as Web.dev suggests here.

I tried adding the display property after the import with no luck:

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: swap;
}

Upvotes: 6

Views: 2252

Answers (1)

Sarsa Murmu
Sarsa Murmu

Reputation: 447

There is already a overridable variable in font awesome to change font-display property. You've to just declare it before importing font awesome. Like this

$fa-font-display: swap;

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

Upvotes: 5

Related Questions