UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Example URL:
http://smartslider3.com/bugs/webkit/fontfamily1/index.html

Steps to reproduce the problem:
1. Throttle only the domain fonts.gstatic.com (I used Charles proxy)
2. Clear and disable browser cache
3. Open the page: http://smartslider3.com/bugs/webkit/fontfamily1/index.html
4. If red text appears: the font loading api marked the font active and yet we are unable to render it succesfully.
5. Green test: text active event fired well from the browser and the rendering went fine.

What is the expected behavior?
My assumtion would be:
- Font family starts to load
- When Font family loaded and renderable I get an event
- Then I can be sure that the font loaded and if I get the width of an inline element which has that font family, then I get the correct value

My test depends on this width value, so if the font loaded event from the browser happens, the inline text's width should be correct. When red text appears, this width is not correct!

What went wrong?
If you depend on the width of the inline element which has Google font, you must be sure that the font is loaded and able to render. Without the throttle to fonts.gstatic.com, it works most of the times, but I have experienced such network conditions where this failed and the font width of the inline element was not fine.

It loads several Google Fonts with the Web Font Loader JavaScript library: https://github.com/typekit/webfontloader
I tried it with document.fonts.ready, but it was even more inconsistent in non-simulated environment.

If the output contains green "Fonts active + renderable" then everything was fine. 
If there is no green on the output or red appears, it means a fail.

The desired output would be something like this (families might be in different order, depends on the network environment):

Internet Explorer 11, Edge and Firefox produces the following result even in throttled network condition.

1495005090005 - Fonts active + renderable
1495005090005 - All family renderable
1495005090005 - Fonts active
1495005090004 - All family renderable
1495005090004 - Family Paytone One renderable
1495005089997 - Family Lato renderable
1495005089982 - Family Merriweather renderable
1495005089967 - Family Montserrat renderable
1495005089927 - Family Kaushan Script renderable
1495005089890 - Page loaded
1495005089854 - Font load started
1495005089854 - Window ready

To be able to consistently reproduce the bug, you must throttle the network only on the host: fonts.gstatic.com
(Charles proxy was great help in it.) Make sure to set up https proxy too if you are testing on the https version.

For Safari/OSX testers: It is not enough to disable caches on develop tab. You must hit Empty caches to remove font families from the cache! It seems like disable cache has no effect on the font families.

For IOS: when document load event fired, the default width with the system font changes so I have to update it to be able to compare to the soon-to-be-renderable font families. I think it is a bug too.

Chrome - Failed output:

Fons marked ready, but browser is not be able to render them yet. It takes more than 1 seconds for Family Kaushan Script to be able to render after it should be.

1495006708685 - All family renderable
1495006708685 - Family Kaushan Script renderable
1495006708078 - Family Lato renderable
1495006708050 - Family Paytone One renderable
1495006707802 - Family Montserrat renderable
1495006707578 - Fonts already marked active but NOT renderable
1495006707577 - Fonts active
1495006707529 - Family Merriweather renderable
1495006704563 - Page loaded
1495006704525 - Default width: 531
1495006704521 - Font load started
1495006704520 - Window ready

Safari - OSX - Failed output:

1495007372801 - All family renderable
1495007372801 - Family Kaushan Script renderable
1495007372800 - Family Paytone One renderable
1495007372596 - Fonts already marked active but NOT renderable
1495007372594 - Fonts active
1495007372579 - Family Lato renderable
1495007372377 - Family Merriweather renderable
1495007371651 - Family Montserrat renderable
1495007369650 - Page loaded
1495007369543 - Default width: 531
1495007369539 - Font load started
1495007369538 - Window ready

Safari - IOS - Failed output

1495006954937 - All family renderable
1495006954937 - Family Kaushan Script renderable
1495006954345 - Family Lato renderable
1495006954021 - Family Paytone One renderable
1495006953548 - Family Merriweather renderable
1495006952815 - Family Montserrat renderable
1495006952047 - Fonts already marked active but NOT renderable
1495006952041 - Fonts active
1495006952000 - Default width changed from the original value to: 918
1495006951990 - Page loaded
1495006951961 - Default width: 531
1495006951944 - Font load started
1495006951940 - Window ready

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? No
 Safari IOS/OSX, Opera

Chrome version: 58.0.3029.110  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: