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

回答1:

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

Using google fonts:

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

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

It is required to create the file site.variables in semantic/src/site/globals/
We search for the source that we like most at https://fonts.google.com/ and copy the name.
In the file site.variables we add the name of the font to the variable @fontName as follows:

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

@fontName          : 'Roboto';

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

Using offline fonts

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

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

It is required to create the file site.variables in semantic/src/site/globals/
In the file site.variables we add the variable @importGoogleFonts with the value false;

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

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

It is required to create the file site.overrides in semantic/src/site/globals /
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');
}

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

回答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

来源：https://stackoverflow.com/questions/31937610/change-default-font-in-semantic-ui-with-font-face

标签

css

fonts

semantic-ui