Fonts easy

Provide font assets

Copy your font asset files to fonts folder inside branding folder:

cp {my-font.ttf,my-heading-font.ttf} myrepo/ui/branding/semantic-ui/less/fonts/

Configure font styles

Declare corresponding @font-face (opens in a new tab) rules inside your Global stylesheet:

@font-face {
  font-family: 'MyFont';
  src: url("~@less/fonts/my-font.ttf");
}
 
@font-face {
  font-family: 'MyHeading';
  src: url("~@less/fonts/my-heading-font.ttf");
}

Use your fonts in styles

Now you can use your font in your branding style overrides.

Here we set a global font face for the whole site:

html {
    font-family: "MyFont";
    //...
}

This font face will be used just for the Header component instances (elements having CSS classes ui header):

/*  */
.ui.header {
    font-family: "MyHeading";
    //...
}