Icon fonts with @font-face or/and @import

[rodolpheb]

Following Chris’s awesome tutorial I’m wondering which of these properties ( @font-face, @import) I should use.

Thanks for your answers.

[chrisburton]

You have to use @font-face regardless if you have a separate stylesheet that you want to import.

[rodolpheb]

What do you think of the disadvantages of @import?

[chrisburton]

If the file is small enough to not effect the load time significantly of your site then I don’t see the disadvantage.

[rodolpheb]

So with @import I load the entire file even though I’d use one icon font ?
With @font-face I can select the icon with font squirrel and gain performance ??

[chrisburton]

@import: imports files

@import url(‘typography.css’);

@font-face: loads the font which you can call by using the `font` or `font-family` property.

Alternatively you can just paste the @font-face code into your main stylesheet.

[rodolpheb]

Thanks Chrisburton

[Author]

Posts