Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

How to change the fonts in Learn2

Solved by ian russell View solution

Started by ian russell 5 years ago · 5 replies · 885 views
5 years ago

Hello,

I would like to change the fonts in Learn2 to our website font. Is there an easy way to do this?

Thank you

5 years ago

Depends on what is easy for you, but yes.
Anyway, from your post it sounds you didn't even try to achieve it. If you did, could you list the steps you took and failed?

5 years ago

Appearances can be deceptive. I added this _custom.scss

TXT
// Your custom SCSS should be written here...

// Import Google Web Fonts
@import url(//fonts.googleapis.com/css?family=Montserrat:400|IBM+Plex+Sans:300|Inconsolata);

$font-family-default:           "IBM+Plex+Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
$font-family-header:            "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
$font-family-mono:              "Inconsolata", monospace;
$font-family-serif:             "Georgia", "Times", "Times New Roman", serif;

to overwrite this in _fonts.scss:

TXT
// Import Google Web Fonts
@import url(//fonts.googleapis.com/css?family=Montserrat:400|Muli:300,400|Inconsolata);

$font-family-default:           "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
$font-family-header:            "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
$font-family-mono:              "Inconsolata", monospace;
$font-family-serif:             "Georgia", "Times", "Times New Roman", serif;

I had hoped IBM Plex Sans would replace Muli, but Muli persists.

Maybe scss needs to be compiled but the documentation on that point is beyond my ken (Gantry has a Compile SCSS button).

Please advise.

5 years ago

A simple way to change the font is to edit the compiled theme css file. Not best practice but quick and easy.

OK for a stable documentation site

Thank you for pointing me in the right direction.

5 years ago

Did you recompile SCSS to CSS after editing _custom.scss?
It's either that or you should just create a custom.css inside the /css folder.

But first of all you should extend the theme by inheriting it and use that new theme for edited CSS. Otherwise on Learn2 update you will lose your changes

5 years ago Solution

@Karmalakas. Just edited the CSS to change the font. I will follow your advice and extend the theme. Many thanks.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 193 2 months ago
Themes & Styling · by Ian, 2 months ago
3 90 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 449 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 43 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 123 3 months ago