What causes text in asp.net mvc site to resize on downloading font files? How to fix it?

[Hamza Ahmed Zia]

Hello,

I have a asp.net mvc site which is already in production. I am noticing the following behavior which is intriguing.

Our site downloads couple of font files (woff, woff2 and opentype). The following is the sequence of downloading the font files.

I am just showing the font files though and by the way the woff2 file is the last file in the entire site to download.

Please see image at url http://imgur.com/a/mvENl

Here are the file types

data:font/opentype;base64,

data:application/font-woff;base64,

https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2

*Once the last font file (woff2) downloads*, the text on our entire site for example within divs, a tags (anything that is written directly on the .cshtml page) **to flicker once and resize (shrinks and takes up a different font face).**

This happens across all the major browsers (IE, Chrome and Firefox)

Any ideas why such a thing would happen? What should I do to resolve the issue?

Any ideas are welcome and appreciated.

Thank you in advance for your time.

[Marcel Mueller]

Post by Hamza Ahmed Zia
*Once the last font file (woff2) downloads*, the text on our entire site for example within divs, a tags (anything that is written directly on the .cshtml page) **to flicker once and resize (shrinks and takes up a different font face).**

Well, the browser uses an replacement font until the final fonts are
available. Maybe you explicitely enabled this by CSS.

Post by Hamza Ahmed Zia
Any ideas are welcome and appreciated.

Well, avoid non standard fonts. ;-) Some people have disabled them
anyway for security reasons.


Marcel

[Arne Vajhøj]

Post by Hamza Ahmed Zia
I have a asp.net mvc site which is already in production. I am
noticing the following behavior which is intriguing.
Our site downloads couple of font files (woff, woff2 and opentype).
The following is the sequence of downloading the font files.
I am just showing the font files though and by the way the woff2 file
is the last file in the entire site to download.
Please see image at url http://imgur.com/a/mvENl
Here are the file types
data:font/opentype;base64,
data:application/font-woff;base64,
https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2
*Once the last font file (woff2) downloads*, the text on our entire
site for example within divs, a tags (anything that is written
directly on the .cshtml page) **to flicker once and resize (shrinks
and takes up a different font face).**
This happens across all the major browsers (IE, Chrome and Firefox)
Any ideas why such a thing would happen? What should I do to resolve the issue?

I consider it highly unlikely that the fact that the HTML is
generated by ASP.NET MVC has any impact on the problem.

I believe it is a HTML problem.

It does not bother me that you post here. The fact that
it is generated by ASP.NET MVC is sufficient to not make
me scream "off topic".

But this is a very small group and there may only be a handful
or two regular readers that know HTML.

If you posted to a HTML group you will likely reach hundreds
and hundreds of HTML experts.

Arne