Ensure text remains visible during webfont load

[alexdor]

Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more

[himankpathak]

Google fonts API does not support font-display property yet. Learn more
How should we go about resolving this issue? @alexdor

[alexdor]

@himankpathak I think the best solution here is to download the fonts and include them in the project. That will allow us to use the font-display and it would load the fonts faster (because we use http2 so we will skip quite a few round trips). What do you think?

[himankpathak]

@alexdor Yea, I was thinking the same to download and serve them through our project itself.
Also, there is no static directory so should I create a font directory in public or a static in src?

[alexdor]

I would create a folder inside src/styles but you can create it where ever you want : ) It's better to do it inside the src/ folder in order to not skip webpack preparation of the assets.

Note: Don't forget to read this part https://github.com/ossn/fixme#adding-images-fonts-and-files in order to avoid common issues : )

[himankpathak]

@alexdor created a PR! :)

[himankpathak]

@alexdor Also I wanted to ask why do we use Raleway as the main font when numbers in Raleway font look up & down? Any specific reason for it?

[alexdor]

@himankpathak The designers used it so we had to : )

[himankpathak]

Okay @alexdor :P
I am really liking this project, great work done by you and @bacharakis.
Will love to help you out with other issue and features. 😄

[alexdor]

Thanks @himankpathak : ) You could always try to tackle #15 or this comment #28 (comment)