Fomantic-ui: Remove "Lato" font from semantic css file

[batata004]

Nowadays I import this CDN file https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css to my projects and it works fine. But I dont want to use Lato font-family at all in my project. Is there a way to override the "Lato" from the file above? I mean, the "Lato" word appears dozens of times. Is there a solution to override the default font family and let the user choose his custom font family?

EDIT:

Is it also possible to disable font-family:brand-icons import ? Cause it loads almost 100kb of unnecessary icons!

[singhda8]

You can override the font in your theme by updating the site.variables file. E.g. to use the Roboto Slab font:

@fontName          : 'Roboto Slab';
@headerFont        : @fontName, 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@pageFont          : @fontName, 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@googleFontName    : @fontName;

[hammy2899]

As @singhda8 said you can change the font in the site.variables file to anything you want

@fontName          : 'Lato';
@fontSmoothing     : antialiased;

@headerFont        : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
@pageFont          : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;

@googleFontName    : @fontName;
@importGoogleFonts : true;
@googleFontSizes   : '400,700,400italic,700italic';
@googleSubset      : 'latin';

@googleProtocol    : 'https://';
@googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';

If you want to use a local font you can disable google fonts via @importGoogleFonts

You can choose to disable outline and brand icons via the icon.variables file

@importOutlineIcons : false;
@importBrandIcons   : false;

[lubber-de]

@batata004 If you just want to override the font-family with another one, but still use the CDN Versions of FUI, try to override it after including the css from CDN

body,
h1,
h2,
h3,
h4,
h5 {
  font-family: 'MyDesiredFontName';
}

[batata004]

@lubber-de your suggestion was the best cause I still want to use the CDN version! The problem is that I dont really know all the elements that I will have to override cause the LATO font name appears many times in the semantic.min.css file. I think overriding just "ody,h1,h2,h3,h4,h5" wouldnt be enought.

[hammy2899]

@batata004 you could use this

*:not(i) {
  font-family: 'MyDesiredFontName';
}

This will change the font-family on every element on your page apart from the i tag which will prevent this from breaking the icons.

[lubber-de]

@batata004 :thinking: Alright, i see the real issue now... I thought all components inherit their font-family setting from body and only the headers had their separate setting. But looking deeper in the code, until now, i totally missed that it's also been defined separately (althought always the same) in button, container, input, textarea, card, and several other elements. :disappointed:
@hammy2899 We might think and test if this is really necessary or if font-family: inherit or even removing the separate font-family property for all those child elements as a default setting would work as before and being a better option.
This would probably leave defining a global font-family at a very central place (preferrably body)

[batata004]

@lubber-de your propposal is great! Having the font-family inheriting would help a lot. This way I could declare the font-family at the topmost parent (html or body) and it would act in the entire page. I dont know the complexity for doing these changes, but if it ever gets implemented would be very practical cause I wouldnt need to download LATO font anymore in all my projects (I dont like this font) and I could change the default font with just a single line of code :)

[lubber-de]

@batata004 In the meantime, use the very neat approach above by @hammy2899 :sunglasses:

[batata004]

@lubber-de the solution provided by @hammy2899 worked like a charm. Thanks again, you are amazing.