Adding different font for Block

Adding different font for Block

by Syed HameedUllah -
Number of replies: 1

Hello all,

Can anyone help me know if we can Add a custom separate font for a block.

I tried doing the same way as done in the theme referal link.

I did something like this in the block styles.css file:

@font-face {

    font-family: 'Glyphicons Halflings';

     src: url([[font:blocks_abc|glyphicons-halflings-regular.eot]]);

     src: url([[font:blocks_abc|glyphicons-halflings-regular.eot]]) format('embedded-opentype'),

          url([[font:blocks_abc|glyphicons-halflings-regular.woff]]) format('woff'),

          url([[font:blocks_abc|glyphicons-halflings-regular.woff2]]) format('woff2'),

          url([[font:blocks_abc|glyphicons-halflings-regular.ttf]]) format('truetype'),

          url([[font:blocks_abc|glyphicons-halflings-regular.svg]]) format('svg');

}

The font does not replicate on the web page.

Advance thanks.

Hameed

Average of ratings: -
In reply to Syed HameedUllah

Re: Adding different font for Block

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: -