change default font in semantic-ui with @font-face

Question

i want to change semantic-ui default font with @font-face but no matter...

i tried change in less file(site.variables) but I do not know how change it

i tried ad

Answer 1

It's an old question but I just wanted to add one thing.

Because all Semantic UI elements inherits the ui class you could do it like this:

.ui {
   font-family: 'fontname' !important;
}

Not so elegant but it works.

Answer 2

I know two ways to change font-face, using google fonts or offline fonts:

Using google fonts:

1. We need to have the resources of Semantic UI, you can get here:

https://semantic-ui.com/introduction/getting-started.html

2. It is required to create the file site.variables in semantic/src/site/globals/

3. We search for the source that we like most at https://fonts.google.com/ and copy the name.

4. In the file site.variables we add the name of the font to the variable @fontName as follows:

/*******************************
     User Global Variables
*******************************/

@fontName          : 'Roboto';

5. Finally we execute the command glup build-css, the changes will be reflected in the file semantic /dist/semantic.css

---

Using offline fonts

1. We need to have the resources of Semantic UI, you can get here:

https://semantic-ui.com/introduction/getting-started.html

2. It is required to create the file site.variables in semantic/src/site/globals/

3. In the file site.variables we add the variable @importGoogleFonts with the value false;

/*******************************
     User Global Variables
*******************************/

@importGoogleFonts : false;
@fontName          : 'fontname';

4. It is required to create the file site.overrides in semantic/src/site/globals /

5. In the file site.overrides we add our font-face

/*******************************
         Site Overrides
*******************************/

@font-face  {
    font-family: 'fontname';
    src:url('themes/basic/assets/fonts/fontname.eot'); 
    src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),    
          url('themes/basic/assets/fonts/fontname.woff') format('woff');
}

6. Finally we execute the command gulp build-css, the changes will be reflected in the file semantic /dist/semantic.css

---

This video maked by @Aditya Giri explain how change font family from google fonts

https://www.youtube.com/watch?v=cSdKA-tZEbg

In the next issue @jlukic explain how use offline fonts

https://github.com/Semantic-Org/Semantic-UI/issues/1521

Regards

Answer 3

You can do the following:

• Add the following to a .css file:

  @font-face  {
      font-family: 'fontname';
      src:url('themes/basic/assets/fonts/fontname.eot'); 
      src:url('themes/basic/assets/fonts/fontname.eot?#') format('eot'),    
          url('themes/basic/assets/fonts/fontname.woff') format('woff');
  }
  

• Import the above code before semantic's site.min.css

• Change the @fontName to 'fontname'

• @importGoogleFonts should be false since you don't want to import any fonts from Google

By default the above will applied to body