Grow your CSS skills. Land your dream job.

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

  • # January 4, 2013 at 2:07 pm

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

    Thanks for your answers.

    # January 4, 2013 at 2:29 pm

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

    # January 4, 2013 at 2:55 pm

    What do you think of the disadvantages of @import?

    # January 4, 2013 at 3:02 pm

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

    # January 4, 2013 at 3:13 pm

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

    # January 4, 2013 at 3:17 pm

    @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.

    # January 4, 2013 at 3:19 pm

    Thanks Chrisburton

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".