css - !important style attribute override not working -

i having problem making element red while applying 2 classes '!important' function. exercise on programming course. appreciated. code follows.

<link href='http://fonts.googleapis.com/css?family=lobster' rel='stylesheet' type='text/css'>  <style>    .red-text {      color: red;    }        .urgently-red {      font-color: red !important;    }        .blue-text {      font-color: blue;    }      h2 {      font-family: lobster, monospace;    }      p {      font-size: 16px;      font-family: monospace;    }  </style>    <h2 class='urgently-red blue-text'>catphotoapp</h2>    <p class='red-text'>kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack ankles chase red dot, hairball run catnip eat grass sniff.</p>  <p class='red-text'>purr jump eat grass rip couch scratched sunbathe, shed everywhere rip couch sleep in sink fluffy fur catnip scratched.</p>

replace

  .red-text {     color: red;   }    .urgently-red {     font-color: red !important;   }    .blue-text {     font-color: blue;   }    h2 {     font-family: lobster, monospace;   }    p {     font-size: 16px;     font-family: monospace;   } 

with

 .red-text {     color: red;   }    .urgently-red {     color: red !important;   }    .blue-text {     color: blue;   }    h2 {     font-family: lobster, monospace;   }    p {     font-size: 16px;     font-family: monospace;   } 

changes: font-color color