change default font in semantic-ui with @font-face
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
insemantic/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
insemantic/src/site/globals/
In the file
site.variables
we add the variable@importGoogleFonts
with the valuefalse
;
/*******************************
User Global Variables
*******************************/
@importGoogleFonts : false;
@fontName : 'fontname';
It is required to create the file
site.overrides
insemantic/src/site/globals /
In the file
site.overrides
we add ourfont-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
sara
Updated on July 26, 2022Comments
-
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 over 8 yearsCan 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 over 8 yearsthere is site.varibles: Link , i try change this default font @fstanis
-
-
Ali Motameni almost 6 yearsYou shouldn't add anything in .css file when you are working with semantic-ui!
-
GWorking about 5 yearsShouldn'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