Automatic Typekit Webfont FOUT preventing through LESS, HELP :)

[strages]

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?

[chrisburton]

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

[strages]

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?

[chrisburton]

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

[Author]

Posts