Adding chartset:utf-8 to @font-face class doesn't work

I have set the charset:utf-8 property in @font-face class. But it does not work.

When I set the metadata tag, it's working correctly.

How do I get this way to work as well?

My CSS Section:

@font-face {
  font-family: 'font-icon';
  src:url('fonts/iconfont.eot');
  src:url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/iconfont.woff') format('woff'),
    url('fonts/iconfont.ttf') format('truetype'),
    url('fonts/iconfont.svg#font-icon') format('svg');
  font-weight: normal;
  font-style: normal;
  charset:utf-8;
}

Solution

In the CSS you just put the line @charset "utf-8"; at the top of the sheet to tell the browser the contents of the file is in UTF-8. You do the same in the HTML with setting the meta charset tag <meta charset="utf-8"> at the <head> of your document. Now, if the font you are loading supports UTF-8 characters, you don't need to do anything.You can completely omit this property from your node.