Apply CSS font before JS execution

Question

I'm building the web application which uses canvas surface on top of HTML body. I use canvas to draw border around SPANs. It works nearly perfectly but I still have a problem on the page load.

I've used chrome debugger and noticed that font style from css file is applied after script execution which confuses DOM getElementRects method and causes that the spans border is mispositioned after page is fully rendered. Below I'm attaching screenshots.

Do you have any idea how to solve that? Can I wait on until css style is fully applied?

Community · Accepted Answer · 2017-05-23 12:30:50Z

1

Font loading takes some more time than css loading take help of following -> How to be notified once a web font has loaded

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Nov 28, 2016 at 13:11

anshuVersatile

2,0761 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ghi Over a year ago

Yes it was problem with waiting for font-face. Thank you.

Community · Accepted Answer · 2017-05-23 11:53:03Z

1

Is $(document).ready() also CSS ready?

The ready() method no longer tries to make any guarantees about waiting for all stylesheets to be loaded. Instead all CSS files should be included before the scripts on the page. More Information

Make sure your scripts are on the bottom of the html page.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Nov 28, 2016 at 13:07

Olaf

1,1328 silver badges20 bronze badges

Collectives™ on Stack Overflow

Apply CSS font before JS execution

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related