Stencil Web Component looks weird when page starts loading and its imported fonts are not working properly

Stencil
1

I cloned the repository:

and based on it I created the following repository:

Check Demo here:

https://napolev.github.io/web-components/

On top of it I created 2 custom web-components:

{ <thumb-01-product />, <thumb-02-product /> }

Here is the usage for each of them:

<thumb-01-product
	thumb="https://placeimg.com/900/400/1/1"
	name="PICTURE 01"
	button-text="PURCHASE"
></thumb-01-product>

<thumb-02-product
	thumb="https://placeimg.com/215/170/2/1"
	description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry."
	button-text="READ MORE"
	url="https://www.google.com/search?num=5&q=image+1"
	target="_blank"
></thumb-02-product>

and here is how they look like:

enter image description here

I have 2 issues with these 2 components.

Issue 1:

At the very beginning, when the page starts loading (the very first second), it shows the data specified on my components’ HTML tags with no formatting and that doesn’t look good at all as you can see on the following image:

enter image description here

Issue 2:

I import two external fonts: { Open Sans (from Google Fonts), and Font Awesome }

Please, check the very beginning of this file:

My problem is that on Google Chrome both fonts are not working as you can see on the following image:

enter image description here

In the other hand, on Mozilla Firefox, Internet Explorer and Microsoft Edge the fonts are working properly as you can see on the first preview.

Any idea on how to solve these to issues?

Thanks!