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';
}

Aroid

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)? – Allocation

there is site.varibles: Link , i try change this default font @Allocation – Aroid

Answer 1

I know of 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 gulp 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

Wakeup

Answer 2

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

Slotnick

You shouldn't add anything in .css file when you are working with semantic-ui! – Tetrapody

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 – Logroll

Answer 3

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.

Brickwork

Answer 4

This is the complicated solution https://mcmap.net/q/1095536/-change-default-font-in-semantic-ui-with-font-face but if you want a simpler approach you could follow this example:

/*In your .css file, loaded after semantic.min.css*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
    font-family: 'Montserrat' !important;
}

Aikoail

Answer 5

You can use google Link:

1. Add to index.html google link. For example:

<linkhref="https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap"rel="stylesheet"/>

2. Add Font in semantic.ui> site> globals > site.variables. For example:

   /*******************************
         User Global Variables
    *******************************/
    /*--FONTS--*/
   
    @pageFont: Rubik Glitch;
   

Lasandralasater