Change Default Font in Semantic-Ui with @Font-Face

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

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

How to configure the page to display correct font type using Semantic-UI?

I stumbled on your post as I'm having the same issue. Nothing is broken in the web application I'm building but the fonts don't change to the beautiful fonts being used at semantic-ui.

Upon searching a little more, it seems that semantic-ui does not define any base font settings, at least for now. Have a look here. Custom package creation is still being added. Until then I guess you need to let your inner web designer do the due!

Update:

I poked around a little more and was able to get the fonts being used by semantic-ui. Go to Google Fonts and create your own font collection. Semantic-ui is using Open Sans. Click the use button at the bottom to get the link to the font style sheet in the 3rd step. For Open Sans, the link is:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Include the above line in your <head> tag and then include the following <style> tag.

<style type="text/css">
    {# set default font for website #}
    * {
        font-family: 'Open Sans', sans-serif !important;
    }
</style>

You should be all set!

Semantic UI React change default font

The .variables and .overrides files are used by the Semantic UI build scripts. All available gulp scripts are located here: https://semantic-ui.com/introduction/build-tools.html#gulp-commands

To run those builds, you would cd into the folder that you installed Semantic UI in and then run one of those commands. The simplest would be to run gulp build for a one time build. For continuous builds each time a file changes, you would want to run gulp watch.

Change Default Font in Semantic-Ui with @Font-Face

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

How to configure the page to display correct font type using Semantic-UI?

Semantic UI React change default font

Related Topics

Leave a reply