Why is my CSS not working!?

So I buy this new book to learn awesome CSS3. I come across a CSS property font-feature-settings.
I check on CanIUse, if the property has been implemented, which says it has been implemented on chrome 49 and firefox 45 (versions which I have installed).

But still the property does not seem to work.

<!DOCTYPE html>
        <style type="text/css">

        h1 {
       -webkit-font-feature-settings: "kern", "liga", "case"; /* No variation */
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1"; /* Firefox 4.0 to 14.0 */
       -moz-font-feature-settings: "kern", "liga" , "case"; /* Firefox 15.0 onwards */
       -moz-font-feature-settings: "kern" 1, "liga" 1, "case" 1; /* Firefox 15.0 onwards explicitly set feature values */
            font-feature-settings: "kern", "liga", "case"; /* No variation */

        <h1 class="smallcaps">Lorem Ipsum Dolor</h1>
        <h1 class="ot-smallcaps">Lorem Ipsum Dolor</h1>

        <h1 class="lig-none">The gift of acts</h1>
        <h1 class="lig-common">The gift of acts</h1>
        <h1 class="lig-disc">The gift of acts</h1>

I have used the props in a way that they should work on almost all versions of chrome and firefox still no success.

Please help. What could be going wrong??

this propertis work only for OpenType fonts.
for example you can try this on code pen in css
span, p, h1 {font-family:linux libertine G,calibri;}

My example:

I don’t see any difference even when I used your code. I have attached a screenshot below.

it’s because your use ubuntu:
windows test:

ubuntu test:

I guess you are right man. Why is it such a problem in Ubuntu? How do I fix this?

sudo mkdir /usr/share/fonts/opentype

sudo cp Downloads/newFonts/* /usr/share/fonts/opentype

sudo fc-cache -f -v