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

11,438

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

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

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

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

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

@fontName          : 'Roboto';
  1. 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

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

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

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

@importGoogleFonts : false;
@fontName          : 'fontname';
  1. It is required to create the file site.overrides in semantic/src/site/globals /

  2. 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');
}
  1. 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

Share:
11,438
sara
Author by

sara

Updated on July 26, 2022

Comments

  • sara
    sara over 1 year

    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';
    }
    
    • fstanis
      fstanis over 8 years
      Can you post the exact changes you made to the site.variables file (as well as which site.variables exactly you changed, as there is more than one in Semantic UI)?
    • sara
      sara over 8 years
      there is site.varibles: Link , i try change this default font @fstanis
  • Ali Motameni
    Ali Motameni almost 6 years
    You shouldn't add anything in .css file when you are working with semantic-ui!
  • GWorking
    GWorking about 5 years
    Shouldn't you? I'm using styling components with semantic-ui, and there's nothing wrong in modifying semantic-ui behavior from there. Another possibility is to develop a new theme for semantic-ui, but depending on the case it may be overkill, and you'd destroy the benefits of styling within the same component