0

Hoe do you change the default font for uikit? UIKit

The default font is 

"Helvetica Neue",Helvetica,Arial,sans-serif

and its set on the html element tag. If i change this font on my custom style in the html tag to something else it doesn't overwrite the changes. I can use important which does change things:

html {
     font: 'Raleway', sans-serif !important;
}

This changes the global font as expected but font-awesome obviously no longer works because the !important is over writing it. Any ideas?

twigg
  • 3,753
  • 13
  • 54
  • 96

5 Answers5

5

This is quite old but I'll post the current working answer anyway incase anyone else needs it for version 3 as documented here: 

// 1. Your custom variables and variable overwrites. If you are using google fonts,
//follow their instructions as normal as well. (add a link in the html for example).
$global-font-family: 'Ubuntu', sans-serif;

// 2. Import default variables and available mixins.
@import "../../node_modules/uikit/src/scss/variables-theme.scss";
@import "../../node_modules/uikit/src/scss/mixins-theme.scss";

// 3. Import UIkit.
@import "../../node_modules/uikit/src/scss/uikit-theme.scss";
Tom
  • 4,776
  • 2
  • 38
  • 50
1

Use the customizer from the uikit page. http://getuikit.com/docs/customizer.html See the Body font family, heading font family selects.

Or use scss/less version and have fun with uikit-variables.scss , there are variables $base-body-font-family, $base-heading-font-family .

cssBlaster21895
  • 3,670
  • 20
  • 33
1

All you need to do is include a custom css file after uikit's css, whether you call uikit from a CDN or locally -

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.18/css/uikit.min.css" />
<link rel="stylesheet" href="/site/templates/css/app.css" />

In your app.css do this

html{
  font-family: 'Raleway', sans-serif;
}

and you should be good to go. Font-Awesome should not be affected at all.

DaveP
  • 568
  • 6
  • 18
1

I reckon the easiest and maybe the cleanest way would be this. However, I'd be careful about the performance...

* { font-family: 'Raleway', sans-serif; }
Johnny Vietnam
  • 196
  • 1
  • 6
0

Using the new font-family in html works for me without adding !important or breaking fontawesome.

https://jsfiddle.net/95sff36a/

That said, I typically prefer making the edits on body tag such as this

body{
    font-family: 'Raleway', sans-serif;
}

NOTE: This doesn't take effect on headings, you might want to add them explicitly.

Adi Krishnan
  • 155
  • 8