How does font affect page layout?

Question

css

Making a small page for myself, I suddenly ran into an incomprehensible problem.
A script was written for the page that sets the scrollbar to the desired anchor and puts it in the address. But when you refresh the page, the bar moves a few pixels to the right and the information you need is slightly to the left.
Preparing the files for this question (by removing unimportant information and a bunch of comments) it turned out that the problem was when screwing the font in the css (without @font-face it works well).
Link to the files:
https://drive.google.com/open?id=0BxP9Q3udr1Boc3h6...
Help me deal with this issue and suggest useful literature.

Answer 1

Maybe because the browser scrolls the document (read "calculates the coordinate") before the desired (connected) font is rendered? And when the font was rendered, the browser had already done everything a long time ago.
Try adding a format for the anchor so that the browser does not find it in the document code, but on the document loading event and there may be a small timeout, scroll the document to the desired coordinates through JS itself.