moodle 3.3.2 change default font

Question

I want to change moodle's default font. I used this link but it didn't work. I changed theme css and added fonts to a new folder but nothing changes in moodle. There is no good tutorial on the net. Any help would be appreciated.

I use a theme named "more". I went to this directory: moodleServer/theme/more/style

There is one css file named custom.css. I added another css file (myStyle.css) and put these codes inside it:

@font-face {
font-family: "Greta";
src: url("fonts/Greta-Regular.otf");
}

p, div {
font-family: "Greta";
}

I also added a folder named "fonts" and copied my otf files inside it. Then in this folder: moodleServer/theme/more I edited file config.php and changed this line:

$THEME->sheets = array('custom');

to

$THEME->sheets = array('custom', 'myStyle.css');

There is also a line in this file that specifies parent style files:

$THEME->parents = array('clean', 'bootstrapbase');

In the bootstrapbase folder there is a style folder and it contains 2 css files: editor.css and moodle.css
I changed moodle.css and replaced all fonts with my font. I also added a fonts folder and copied my font inside it. I added the following lines to this file:

@font-face {
 font-family: "Greta";
 src: url("fonts/Greta-Regular.otf");
 font-weight: normal;
 font-style: normal;
 }

and changed all fonts to Greta:

body {
  margin: 0;
  font-family: Greta;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  background-color: #fff;
}

When I use "inspect element" to view my page source I still see previous fonts and css files.

If you do a google search for "change moodle's default font", you should see plenty of sources that describe how to do it. — Bill H, Nov 05 '17 at 06:09
Yes! There is! but none of them worked! [This](http://www.inmotionhosting.com/support/edu/moodle/changing-appearance-moodle/change-theme-font) and many others are too old and I mentioned the one I used in my question and that didn't work. — elahehab, Nov 05 '17 at 06:35
Maybe your browser is caching your website, try refreshing with ctrl+f5. — M0ns1f, Nov 05 '17 at 06:40
I tried refreshing with ctrl+f5 and also tried removing moodle's cache. didn't work! — elahehab, Nov 05 '17 at 06:56
I suggest to create a small demo script and add it here, so that others may try it out. It might also help to get a better understanding of the problem. — yacc, Nov 05 '17 at 08:00
I found one problem. The font is loaded in clients that has this font installed but not on clients that doesn't have this font. I'm searching now to see what should I do so this font is showing on all clients whether the font is installed or not. — elahehab, Nov 06 '17 at 08:08

score 3 · Answer 1 · answered Nov 10 '17 at 15:10

you can also change the font via the interface. You do not need to develop a new theme for this.

Short example for integration of the google fonts "raleway":

1. website-administration > appearance > additional html enter image description here

2. website-administration > appearance > themes > more : customcss

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

It's more easier than creating a new theme just for changing the font. More help you get also at moodle.org - espeacially https://moodle.org/mod/forum/view.php?id=46

Hope it helps.

Gerald

Tony · Accepted Answer · 2017-11-06T23:32:45.757

First of all, don't modify any of the core themes because you're likely to run into a lot of code conflicts when to come to upgrade in the future. Instead, make a copy of the folder containing the theme you want to base your new theme on, and then replace all instances of the old theme name in the copied code with your new theme name, e.g. copy theme/more as theme/newtheme and then do a recursive find and replace on theme/newtheme to replace 'more' with 'newtheme' (just make sure you don't miss any). Once you've done that you can modify your new theme plugin as much as you like without creating a headache for yourself later.

Have a read through https://docs.moodle.org/dev/Themes_overview. I've never created a theme with a custom font but one thing that stands out looking at your code above is the line

$THEME->sheets = array('custom', 'myStyle.css');

which according to https://docs.moodle.org/dev/Themes_overview#Basic_theme_example_settings_explained should be

$THEME->sheets = array('custom', 'myStyle');

but really there's no need for the myStyle.css file -- you can just add the extra lines for your custom fonts to custom.css -- and just add any other style rules you need to override in here, rather than editing parent themes.

Good luck!

Thanks! there was 2 problems. The first one was as you said it was enough to add new styles to custom.css. And the address for font file was also wrong. I added absolute path in the end. — elahehab, Nov 07 '17 at 09:16
There are some descriptions here that I didn't see before: https://docs.moodle.org/dev/Themes_overview#Adding_custom_fonts — elahehab, Nov 07 '17 at 09:50

moodle 3.3.2 change default font

2 Answers2