Installed Moodle Font doesn't work in other browsers - html

Question

I installed a moodle font (Coptic) in my Moodle Course and Theme and it displays correctly in Google Chrome. However when I try to view it in Firefox, I.E. or on my Tablet (Chrome via Nexus 9) it doesn't display the correct characters.
I followed these instructions before https://docs.moodle.org/28/en/How_to_add_custom_fonts_in_a_theme. The only thing is, before I only had Coptic.tff and no other font types. I.e. eot or svg. I then went online to get the other fonts. I.e. I uploaded Coptic.tff and got a zip of the other files. By including these other fonts in the dir. do you think it might fix the problem. Thanks for all you help. :-)

Answer 1

Please include all fonts type like you did. Create a new directory in your theme and call it fonts. Then add all your custom fonts into this directory.
eg: moodle/theme/yourtheme/fonts/
Some times " src: url([[font:theme|fontname.eot]]); ", this may not work.
Please add path like this
#font-face { /* where FontName and fontname represents the name of the font you want to add */
font-family: 'fontname';
src: url('../theme/your-theme-name/fonts/fontname.woff');
src: url('../theme/your-theme-name/fonts/fontname.eot') format('embedded-opentype'),
url('../theme/your-theme-name/fonts/fontname.woff') format('woff'),
url('../theme/your-theme-name/fonts/fontname.ttf') format('truetype'),
url('../theme/your-theme-name/fonts/fontname.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Next ADD the name of your font wherever you want that font to be used in your stylesheet.
For example:
#page-header h1 { font-family: FontName;}
try !!! It will work for you :)