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

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


Solution 1:[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

  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

Solution 2:[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

Solution 3:[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.

Solution 4:[4]

This is the complicated solution https://stackoverflow.com/a/54208399/2374997 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;
}

Solution 5:[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"/>

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

    /*******************************
      User Global Variables
 *******************************/
 /*--FONTS--*/

 @pageFont: Rubik Glitch;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 newbie
Solution 3 Martin
Solution 4 Leonardo Ciaccio
Solution 5 Lucía Crast

Related Questions