Thursday, February 28, 2013

Adding a new font to your theme

I wanted to include a True-Type font to my moodle theme. And with some internet browsing, I have found the solution.

1) Go inside your theme folder and make a new folder called "fonts." In my own instance, I used this path:
mythemename/pix/fonts/

2)  Upload your .ttf file inside the "fonts" folder.

3)  Now add some code to the css to show the font. Go to your  mythemename/style/core.css file.

@font-face
{
    font-family: myfontname;

    src: url('mythemename/pix/fonts/myfontname.eot'); /* IE8-9 */
    src: url('mythemename/pix/fonts/myfontname.eot?#iefix') format('embedded-opentype'),  
          url('mythemename/pix/fonts/myfontname.ttf') format('truetype');

}

4)  Now that you declared your new font, you can start using it inside your theme

html,body 
{
    font-family: myfontname !important;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, input, textarea 
{
    font-family: myfontname;


5) Remember to clear your theme caches in order to see the changes. You are done!

1 comment:

  1. Many Many thanks .....
    your post is excellent ...
    I link to work with you ...
    my e-learning platform is www.allinoneclasses.com

    ReplyDelete