Adding a new font for block page only.

Adding a new font for block page only.

by Syed HameedUllah -
Number of replies: 2
Hello everyone,

I have a block page and want to apply a different font for that page.

I have been through adding theme fonts

Tried doing something like 

@font-face {
    font-family: 'xyz';
    src: url([[font:block_abc|xyz.eot]]) format('embedded-opentype'),
         url([[font:block_abc|xyz.woff]]) format('woff'),
         url([[font:block_abc|xyz.ttf]]) format('truetype');
    font-weight: bold;
    font-style: normal;
}
#path-block-abc {font-family: xyz;}
Can anyone help me if the above thing is good to effect the xyz font on the page.

Advance thanks,

Hameed

Average of ratings: -
In reply to Syed HameedUllah

Re: Adding a new font for block page only.

by Sandipa Mukherjee -
Picture of Particularly helpful Moodlers

Hi Hameed,

First of all please select your font from https://fonts.google.com/

Here I have selected "ROBOTO" font for my block. Then create a style.css file in <your moodle>/blocks/<your_block>/css/style.css

add this line of css in the style.css file 

@import url('https://fonts.googleapis.com/css?family=Roboto');

.block_your_block {

 font-family: 'Roboto', sans-serif;

}

Now add this css file link in get_content function of  <your moodle>/blocks/<your_block>/block_your_block.php like this,

$PAGE->requires->css('/blocks/your_block/css/style.css');

Please clear your browser cache and moodle cache once.

Hope this helps you.

Regards,

Sandipa

Average of ratings: Useful (2)
In reply to Sandipa Mukherjee

Re: Adding a new font for block page only.

by Syed HameedUllah -

Thanks Sandipa,

It was really useful.

But I got the solution fixed as I mentioned in the above post.

Adding fonts to themes as mentioned in Moodle Doc can be used for adding a different font for any individual plugin.

Though, The Import way of adding font will also work.

thanks,
Hameed

Average of ratings: -