I am confused with adding a custom font to a theme. I have a ttf font and I moved it theme/example/fonts but it seems that some other files are also needed
.eot
.woff
.svg
So where should I find them for my font?
Next question is how can I add the font name to the style? i found some pages describing that but they are not clear. Any feedback?
Hi Mahmood,
Most of what you are asking about all depends on
The .ttf font type should work on most computers but not necessarily on all browsers, so it is advisable to get those extra files too.
Here is a list of font types for different browsers:
https://socialcompare.com/en/comparison/browser-fonts-support-comparison
Where to find the extra font files?
This will depend largely on if the font is FREE or if it is one that you have to pay for. So check this out by just doing a Google search for name of the font you want to use.
Adding the CSS to make the font work is not hard to do, but it will depend on where you put the styles. This could be a file that you add to the theme's style directoy. This file will need to be listed in your theme's config.php too. But all of that is mentioned in How to add custom fonts in a theme
Hope this helps?
Mary
So, I want to add homa.ttf to a a theme named campus. That font is for RTL (right-to-left language). Looking in the theme/campus/styles, I see three files
custom.css
fonts-awesome.css
font.css
Which one should I modify?
Hi Mahmood,
You can add your CSS to the Campus setting page where you will find a Custom CSS text area using:
body.dir-rtl { font-family: Homa; }
Hope that helps?
Mary
Well I did that but seems that it has no effect
mahmood@ce:/var/www/html/courses/theme/campus/style$ cat custom.css
/* Campus Custom CSS
-------------------------*/
.dir-rtl .breadcrumb-nav {
float: right;
}
body.dir-rtl { font-family: homa; }
/* Custom CSS Settings
-------------------------*/
setting:customcss
mahmood@ce:/var/www/html/courses/theme/campus/style$ cat font.css
@charset "UTF-8";
@font-face { /* where FontName and fontname represents the name of the font you want to add */
font-family: 'FontName';
src: url([[font:theme|homa.eot]]);
src: url([[font:theme|homa.eot]]) format('embedded-opentype'),
url([[font:theme|homa.woff]]) format('woff'),
url([[font:theme|homa.ttf]]) format('truetype'),
url([[font:theme|homa.svg]]) format('svg');
font-weight: normal;
font-style: normal;
}
/* Droid Serif */
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 400;
src: local('Droid Serif'), local('DroidSerif');
src: url('[[font:theme|DroidSerif-Regular-webfont.eot]]');
src: url('[[font:theme|DroidSerif-Regular-webfont.eot]]') format('embedded-opentype'),
url('[[font:theme|DroidSerif-Regular-webfont.woff]]') format('woff'),
url('[[font:theme|DroidSerif-Regular-webfont.ttf]]') format('truetype'),
url('[[font:theme|DroidSerif-Regular-webfont.svg]]') format('svg');
}
...
...
...
homa.ttf is in fonts/ as below
mahmood@ce:/var/www/html/courses/theme/campus$ ls fonts/homa.ttf
fonts/homa.ttf
Any idea?
Change 'FontName' to 'homa' and remove the lines with the other font file types.
I didn't see any change we we decided to use the default theme. Thanks.
Assuming that you wrote the CSS for the font family correctly, you still need to Purge all caches because you have made changes to the theme.
Administraion > Site Administration > Development > Purge all caches
If it does not work after this, then you have possibly still got errors in the font CSS markup.
This page: https://docs.moodle.org/dev/Themes_overview#Adding_custom_fonts may help too.
Hi Mahmood,
Sorry that you are having difficulty with this. It's a strange environment when it comes to FONTS and browsers. Microsoft Internet Explorer was the only browser originally to add fonts to a website, and the best part of that was you could make your own font files using WEFT which was fun to do. But that's another story.
OK so that you are not left out in the cold without help, I will add the fonts to a copy of the Campus theme and see if I can get it to work.
Mary
Hi Mahmood,
Follow-up from my last comment, I tested this in the Campus theme and it appears to be working OK.
I used the following CSS
body.dir-rtl {font-family: Homa; font-size: 1em;}
in the CSS inputbox area provided in the Campus > General settings page
Administration > Site Administration > Appearance > Themes > Campus > General > Custom CSS
After adding the homa.ttf to Campus/fonts/ I added the @font-face CSS at the top of the style/font.css file like this:
/* Homa */
@font-face {
font-family: 'Homa';
font-style: normal;
font-weight: normal;
src: url([[font:theme|homa.ttf]]) format('truetype');
}
It appears to be working OK after I have Purged all caches and change to the Arabic language in the language menu in the header..
But then again I am not familiar with the Arabic language, or the font so it could be some other font although it does give the name of the font when inspecting the page with FireBug.
Hi Marry,
Thanks for your effort and kindness. In fact, I did the same. Previously, I delete theme cache and saw no change. However, this time I purged all caches and see some differences. So, one step forward
The font you showed me was homa and it is correct. Thing is, before user login, I see that some context fonts (which is persian) are in homa (which is expected to be). However, after login, the same same is shown by the default font (Times and not homa).
Please see the picture.
In addition to the font issue, another thing is that I see that before login the text direction is correct but after login the columns are swapped. In summary, what you see before login in the attached picture is the correct form and I want to see that after login.
Hi Mahmood,
Well at least you are moving forward with this., which is great to know.
To get the font to work in all the other places like headings etc., you need to see which fonts are being used in the theme itself. Unfortunately there are a number of fonts that are in the settings for the Campus theme, which you can change but that would require you to add the Homa font to the settings list, and not sure if that can be done easily.
As for the different layouts where before login it is (LTR), and after login it is (RTL). Moodle 3.2 flips left to right, and has perfected this left to right swap for a good many years, and a lot of people including myself have worked to master this specific change of direction, with the layouts and also the content of every page. I suppose the best way to fix this, in your case, would be to make sure your site uses the same language before and after logging-in.
Moodle's default language is English and so if that language setting is still in place you WILL see different layouts on your site before and after login. However, if you set your Moodle site to either (ar) or (fa) depending on what your common language is, then this would fix that layout change. You can set the layouts in the Campus custom settings within the theme and there are various options to choose from.
Hope this helps?
Mary
Good news Marry...
I was surfing the theme option pages and found Site Administration->Appearance->Themes->Campus->Look and Feel. There I saw that Body font and Heading font are combo boxes which select some predefined fonts used in the theme. Then I greped the words in theme/campus and found settings.php where the font names are grouped in arrays. Then I appended Tahoma (similar to Homa) in $choices variable.
So, in addition to the adding the font to the css files, the settings.php also has to be changed. Now as you can see in the picture, all fonts are OK
Thanks you very much.
Great news!
Thank you for sharing your changes to the code.
Kind regards
Mary
Hi, I tried to add new .eot file to Moodle 3.4 version. I used Enlightlite theme and add the .eot file to the root and in css folder (also changed .css file) without success!
Can you SUMMARY those steps with using Moodle 3.4 version please? You can Thank you.
In the (attachment) File, I provided the sample page: .eot, svg.... and a photo showing Font difference.
What browser are you using, as the .eot file type is only used by Internet Explorer.
The fonts need to be in the fonts directory of the theme you are using NOT the root directory of your Moodle site.
The CSS needs to be written just like this:
DO NOT MAKE ANY CHANGES TO THIS CODE.
@font-face {
font-family: 'UKIJ Ekran';
src: url([[font:theme|UKIJEkran.eot]]);
src: url([[font:theme|UKIJEkran.eot]]) format('embedded-opentype'),
url([[font:theme|UKIJEkran.woff2]]) format('woff2'),
url([[font:theme|UKIJEkran.woff]]) format('woff'),
url([[font:theme|UKIJEkran.ttf]]) format('truetype'),
url([[font:theme|UKIJEkran.svg]]) format('svg');
font-weight: normal;
font-style: normal;
}
I hope this helps you?
Mary
Thank you Mary Evans
I used Chrome and IE, still not showing properly.
1. I uploaded the fonts in the fonts directory of the theme,
2. CSS (main CSS) updated as the code you mentioned above. (Purged the caches)
3. ? Is there any changes in the admin dashboard? or any PHP file to be changed?
Still not properly showing.
Kind regards, Jan
Enlightlite
fonts
.eot
.svg
.ttf
.otf
.woff
@font-face {
font-family: 'UKIJ Ekran';
src: url('UKIJEkran.eot');
src: url('UKIJEkran.eot?#iefix') format('embedded-opentype'),
url('UKIJEkran.woff2') format('woff2'),
url('UKIJEkran.woff') format('woff'),
url('UKIJEkran.ttf') format('truetype'),
url('UKIJEkran.svg#UKIJEkran') format('svg');
font-weight: normal;
font-style: normal;
}
And Disabled these codes in that css:
/*!@font-face{font-family:'FontAwesome';src:url('setting:fontwwwfontawesome*-webfont.eot?v=4.3.0');src:url('setting:fontwwwfontawesome-webfont.eot*?#iefix&v=4.3.0') format('embedded-opentype'),url('setting*:fontwwwfontawesome-webfont.woff2?v=4.3.0') format('woff2'),url*('setting:fontwwwfontawesome-webfont.woff?v=4.3.0') format('woff'),url*('setting:fontwwwfontawesome-webfont.ttf?v=4.3.0') format('truetype'*),url('setting:fontwwwfontawesome-webfont.svg?v=4.3*.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal * } *) */
This is the codes in Config.php:
defined('MOODLE_INTERNAL') || die();
$THEME->name = 'enlightlite';
$THEME->sheets = ['font-awesome.min'];
$THEME->editor_sheets = [];
$THEME->parents = ['boost'];
$THEME->enable_dock = false; $THEME->yuicssmodules = array(); $THEME->rendererfactory = 'theme_overridden_renderer_factory'; $THEME->requiredblocks = ''; $THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV; $THEME->prescsscallback = 'theme_enlightlite_get_pre_scss'; $THEME->extrascsscallback = 'theme_enlightlite_get_extra_scss'; $THEME->csstreepostprocessor = 'theme_enlightlite_css_tree_post_processor'; $THEME->scss = function($theme) { return theme_enlightlite_get_main_scss_content($theme); }; $THEME->javascripts_footer = ['theme']; $THEME->rendererfactory = 'theme_overridden_renderer_factory'; $THEME->csspostprocess = 'theme_enlightlite_process_css';
Still not working :-
Dear me but you appear to be making things worse not better.
The Font Awesome styles does not need to be added as this is in Moodle 3.4 already.
What you are missing is a .css file that tells your theme to use the new font you have added.
The CSS should look something like this...where the 'name of font' is the same name of the font you are talking about.
body { font-family: 'name of font'; }
Hi Jan,
I have just downloaded Enlightlite thene and found it to be quite complicated whn it come to Fonts.
You need to look at other files in this theme.
The CSS for the fonts is different than most so that will need to be taken into account.
The files you need to look at are in the following location:
enlightlite/scss/enlightlite.scss
the sections related to fonts is from Line 50
$font_0: alegreyasansR;
$font_1: alegreyasansM;
$font_2: alegreyasansB;
$font_3: alegreyasansL;
$font_4: alegreyasansI;
$font_5: Arial;
$font_6: Helvetica;
$font_7: sans-serif;
$font_8: FontAwesome;
$font_9: fontawesome;
$fontwww: '/fonts/' !default;
and then lower down the page to Line 75 I think...
$url_0: url($fontwww+'alegreyasans-regular/alegreyasans-regular-webfont.eot');
$url_1: url($fontwww+'alegreyasans-regular/alegreyasans-regular-webfont.eot?#iefix');
$url_2: url($fontwww+'alegreyasans-regular/alegreyasans-regular-webfont.woff2');
$url_3: url($fontwww+'alegreyasans-regular/alegreyasans-regular-webfont.woff');
$url_4: url($fontwww+'alegreyasans-regular/alegreyasans-regular-webfont.ttf');
$url_5: url($fontwww+'alegreyasans-regular/alegreyasans-regular-webfont.svg#alegreya_sansregular');
$url_6: url($fontwww+'alegreyasans-medium/alegreyasans-medium-webfont.eot');
$url_7: url($fontwww+'alegreyasans-medium/alegreyasans-medium-webfont.eot?#iefix');
$url_8: url($fontwww+'alegreyasans-medium/alegreyasans-medium-webfont.woff2');
$url_9: url($fontwww+'alegreyasans-medium/alegreyasans-medium-webfont.woff');
$url_10: url($fontwww+'alegreyasans-medium/alegreyasans-medium-webfont.ttf');
$url_11: url($fontwww+'alegreyasans-medium/alegreyasans-medium-webfont.svg#alegreya_sansmedium');
$url_12: url($fontwww+'alegreyasans-bold/alegreyasans-bold-webfont.eot');
$url_13: url($fontwww+'alegreyasans-bold/alegreyasans-bold-webfont.eot?#iefix');
$url_14: url($fontwww+'alegreyasans-bold/alegreyasans-bold-webfont.woff2');
$url_15: url($fontwww+'alegreyasans-bold/alegreyasans-bold-webfont.woff');
$url_16: url($fontwww+'alegreyasans-bold/alegreyasans-bold-webfont.ttf');
$url_17: url($fontwww+'alegreyasans-bold/alegreyasans-bold-webfont.svg#alegreya_sansbold');
$url_18: url($fontwww+'alegreyasans-light/alegreyasans-light-webfont.eot');
$url_19: url($fontwww+'alegreyasans-light/alegreyasans-light-webfont.eot?#iefix');
$url_20: url($fontwww+'alegreyasans-light/alegreyasans-light-webfont.woff2');
$url_21: url($fontwww+'alegreyasans-light/alegreyasans-light-webfont.woff');
$url_22: url($fontwww+'alegreyasans-light/alegreyasans-light-webfont.ttf');
$url_23: url($fontwww+'alegreyasans-light/alegreyasans-light-webfont.svg#alegreya_sanslight');
$url_24: url($fontwww+'alegreyasans-italic/alegreyasans-italic-webfont.eot');
$url_25: url($fontwww+'alegreyasans-italic/alegreyasans-italic-webfont.eot?#iefix');
$url_26: url($fontwww+'alegreyasans-italic/alegreyasans-italic-webfont.woff2');
$url_27: url($fontwww+'alegreyasans-italic/alegreyasans-italic-webfont.woff');
$url_28: url($fontwww+'alegreyasans-italic/alegreyasans-italic-webfont.ttf');
$url_29: url($fontwww+'alegreyasans-italic/alegreyasans-italic-webfont.svg#alegreya_sansitalic');
$url_30: url([[pix:theme|bg-black-trans23]]);
$url_31: url([[pix:theme|ic-forward-img]]);
$url_32: url([[pix:theme|ic-backward-img]]);
$url_33: url([[pix:theme|bg-pattern02]]);
$url_34: url([[pix:theme|bg-pattern01]]);
$url_35: url([[pix:theme|bg-black-trans65]]);
These seem to be related to the settings for patterns etc.,
I can try and help you but I really think you would be better contacting the Company who made this theme!
Cheers
Mary
You will see that there is another font being used.