Grow your CSS skills. Land your dream job.

Automatic Typekit Webfont FOUT preventing through LESS, HELP :)

  • # October 30, 2012 at 5:26 pm

    Hey everyone,

    Currently developing a website and I am taking this opportunity to introduce myself to less. While using fonts from typekit I came across the custom css needed to prevent fout’s.

    this means that .wf-loading with whatever element that is using typekit fonts will not be visible through: visibility:hidden;.

    However less elements should be able to select the elements that have those rules isn’t it? who can help me automate this?

    # October 30, 2012 at 7:57 pm

    @strages You can just use the asynchronous embed code that Typekit provides. http://blog.typekit.com/2012/07/19/new-improved-embed-code/

    # October 31, 2012 at 4:29 am

    thanks for your answer, but I am using the advanced asynchronous script. However this creates the FOUT and to prevent that custom css is needed. Less has some serious capabilities to automate this process. With that I would love to get some help.

    something like:

    if *element* has (font-family:sans;) then .wf-loading *element* {visibility:hidden;}

    can this be done in less?

    # October 31, 2012 at 4:33 am

    @strages Ha. Apparently I (unknowingly) do the same thing on my site. I’m not familiar with less so hopefully someone else can chime in.

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

You must be logged in to reply to this topic.

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