0

We have an application where:

  • Apply font-face Lato to body
  • Need to calculate offset().top value of some elements (for scroll-spy)

Now we calculate the value of offset().top in an Angular link function, which should be invoked after DOM is ready.

However, we found that the values are inaccurate. If we disable the font Lato, the values become correct.

So we suspect that in the link function, when we calculate, the font is not yet rendered to the body, making the offset() value incorrect.

How can we calculate only after the font is applied?

I have tried the solution given in How to know when font-face has been applied, but without luck.

Community
  • 1
  • 1
Joy
  • 9,430
  • 11
  • 44
  • 95
  • Have you tried to put the calculations in `link` inside zero-delay `$timeout`? Can't promise it will work for font-face, but it helps in similar cases. – Estus Flask Apr 23 '15 at 10:35
  • Maybe `line-height` has some effect for calculating offset? – Justinas Apr 23 '15 at 10:38
  • Thanks @estus. But i tried, it does not work. And `line-height` is set to be `24px` for the whole wrapper, @Justinas. – Joy Apr 23 '15 at 10:39
  • Please show an example that replicates the problem. It's impossible to say what could be wrong with your code without seeing it. – JJJ Apr 23 '15 at 10:40

1 Answers1

1

Yeah, we had exactly the same problem at work. We integrated a webfont loader to avoid this behavior. I think the most famous one is this one: https://github.com/typekit/webfontloader (developed by Google and Typekit)

You will have events for the state of the fonts to load. For example "active", when all fonts have rendered. You can bind JavaScript callback to this events, so you can start calculations after fonts are applied.

dsuckau
  • 592
  • 3
  • 15