CODEWITHSUNDEEP
semantic-ui
SML
SML

Reputation: 33

How do you include custom fonts in Semantic UI (instead of Google Fonts)

In /src/site/globals/site.variables, I can see how you can define google fonts, which get imported from when you compile. What I am interested in is defining my own custom fonts where I will supply my own font files.

I can’t find docs on how to do it. While I know how to do it in CSS, I am wondering if it is already built-in in this framework but I have simply missed it.

Thanks!

Upvotes: 2

Views: 1386

Answers (1)

James Ganong
James Ganong

Reputation: 1171

I don't believe there is a built-in way to do it. Here's how I did it.

I used the standard @font-face css rule. I then placed it in the site.overrides file. I am using a less variable (@font-path) to simplify my file paths.

@font-path: '../../fonts';
@font-face {
    font-family: 'my-font';
    src: url('@{font-path}/my-font.woff') format('woff'),
      url('@{proxima-prefix}my-font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

You'll have to make sure that the font files are served up appropriately by your server.

The above can be turned into a less mixin based on your usage as well.

A good resource on @font-face and formats: https://css-tricks.com/snippets/css/using-font-face/

A great answer on how to use different font weights/styles: https://stackoverflow.com/a/10046346/7681976

Upvotes: 2

Related Questions