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 add my font with other custom css file but it not work

@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');
}
body{
    font-family: 'fontname';
}

Answer 1

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