Server side rendering of Fonts

Server side rendering of Fonts

by Waseem Muhamad -
Number of replies: 2

Hi I am using Moodle Moodle 2.5.9 (Build: 20151110) to host a course involving 3 languages English, Arabic and Malayalam. I need specific fonts, namely Me_quran and Meera to be used for Arabic and Malayalam respectively. 

I had added these two fonts in TinYMCE HTML Editor settings.

Both Arabic and Malayalam texts are working perfectly and are being rendered in Me_quran and Meera fonts when the user accessing the course has both these fonts installed on their system. 
My issue is that these texts are not rendered correctly when the fonts are not installed in the user's/client's computer. 
Is there any way I can add these fonts somewhere in the server so that they are rendered on the server side rather than on the client's computer? 

Average of ratings: -
In reply to Waseem Muhamad

Re: Server side rendering of Fonts

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

You probably need to install them as part of the theme being used - or if they are web based fonts (eg Google fonts) then you could add a < link > to the additional html settings to point to the online version of the font.

You could check out https://docs.moodle.org/en/How_to_add_custom_fonts_in_a_theme However Im not sure if this was available as far back as 2.5,

Average of ratings: -
In reply to Richard Oelmann

Re: Server side rendering of Fonts

by Waseem Muhamad -

Thanks for the quick reply.
I tried following the steps in the link you provided.

1.Added the font file me_quran.ttf in the location: root\theme\educator\fonts\


2. Added the following in the these css (educator.css):

@font-face { /* where FontName and fontname represents the name of the font you want to add */
     font-family: 'me_quran';
     src: url([[font:theme|me_quran.eot]]);
     src: url([[font:theme|me_quran.eot]]) format('embedded-opentype'),
          url([[font:theme|me_quran.woff]]) format('woff'),
          url([[font:theme|me_quran.woff2]]) format('woff2'),
          url([[font:theme|me_quran.ttf]]) format('truetype'),
          url([[font:theme|me_quran.svg]]) format('svg');
     font-weight: normal;
     font-style: normal;
   }

3. Added the font name (me_quran) in the 'html, body' section of the same css file.
html, body {
    font-family:Arial, Verdana, Helvetica, sans-serif, me_quran;
    margin:0;
    padding:0;
    /*background-color:#EFEFEF;*/
	background-image:url([[pix:theme|bg]]);background-repeat:repeat-x repeat-y;
    font-size:setting:fontsizereference;
	
}
 As I'm not much familiar with css editing, I'm not sure if what I did is the right way.

Anyways, this did not fix my font rendering issue.  sad

Average of ratings: -