Why is my CSS not working!?

Why is my CSS not working!?
0

#1

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>
<html>
    <head>
        <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 */
        }


        </style>
    </head>
    <body>
        <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>
    </body>
</html>

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


#2

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:
http://codepen.io/akholod/pen/zBwjjB


#3

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


#4

it’s because your use ubuntu:
windows test:


ubuntu test:


#5

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


#6

sudo mkdir /usr/share/fonts/opentype

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

sudo fc-cache -f -v