Subset is not loaded issue

We have a stylesheet with the following import statement

@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400");

By default, this will load font files related to latin subset. But, when we show something on page with another subset (greek/cyrillic) we can see a flicker on the screen.
This happens in Chrome and Firefox currently. The browser loads the subset font files only when it finds that the file is required, not all the font files at the beginning.

We can see this process, with the network tab in the developer tools; if we show the unicode characters for the first time, browser will load the required font files and the flicker happens (it paints the characters again).

Preload the subset

From the documentation, we can preload the subset, it seems.

fonts.googleapis.com/css?family=Open+Sans:300,400&subset=greek,cyrillic

But also mentioned, Chrome won’t consider it, because it supports unicode-range.

Solve by hidden content

There are many solutions discussed in various sites. I find this simple solution fixes the issue. Add some content in the required subset characters with style hidden. So, the font files will be loaded at the beginning and we won’t see the flicker when we show the foreign language content

<span class="font-preload-hack" style="visibility: hidden;position: absolute;">
	<span class="cyrillic">Ф</span>
	<span class="greek">Θ</span>
</span>

I have faced this issue when using a dropdown – with different language content (countries), after adding the above code, issue is solved.