ftcolumnflow doesn't work correctly with custom @font-face about ftcolumnflow HOT 8 CLOSED

Interesting that this bug only appears in Firefox, Chrome and Safari. In Opera and IE 10 it seems everything is working fine.

from ftcolumnflow.

I've tried several solutions and it seems the calculations that Javascript does are done before the custom fonts are actually loaded. So far it seems setting using the WebFont loader solves the issue. Still running tests though.

from ftcolumnflow.

@r007 Two things you have to keep in mind while using FTColumnFlow:

• Apply the same fonts and styles to both the prerender area as the actually rendered columns
• Use a font loader such as the Typekit webfont loader (https://github.com/typekit/webfontloader) to ensure the fonts are loaded before columnizing.

from ftcolumnflow.

A quick note btw, if you use selectors such as p + p { text-indent: 30px }; you need to change FTColumnFlow a bit to let the next column inherit the indentation. Will work on a pull request to suggest the change.

from ftcolumnflow.

@r007
We've worked with FTColumnFlow for a while now with custom fonts, using the webfont loader by Typekit/Google seems to fix the problem.

https://developers.google.com/fonts/docs/webfont_loader

Make sure you load all the fonts including the various variants/weights.

from ftcolumnflow.

Can you expound on the comment above regarding selectors? What changes need to occur? I am having the same problem above with lines being duplicated or lost even without the custom fonts and I'm trying to find what the problem is.

from ftcolumnflow.

Hi @jessedijkstra and @r007. Thanks for this discussion. I'll add a note to the documentation to raise this issue - any resources which might load after ColumnFlow runs could potentially cause lines to be missing or duplicated. The fix for fonts is to use webfontloader or similar to ensure the fonts are loaded.

from ftcolumnflow.

@georgecrawford @topherreynoso
If you use a fontloader to load the fonts before columnizing the issue won't occur.

Another issue that exists is the browsers native search, because it moves the columns down if a word can be found in the overflow.

from ftcolumnflow.