当页面开始加载并且其导入的字体无法正常工作时，Stencil Web组件看起来很奇怪

Question

我克隆了存储库：

https://github.com/ionic-team/stencil-component-starter

并基于此创建了以下存储库：

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

在此处查看演示：

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

在此之上，我创建了2个自定义import android.view.View fun View.visible() { visibility = View.VISIBLE } fun View.invisible() { visibility = View.INVISIBLE } ：

{{web-components，<thumb-01-product />}

这是它们各自的用法：

<thumb-02-product />

这是它们的外观：

这2个组件有2个问题。

问题1：

一开始，页面开始加载时（第一秒），它显示的是我组件的HTML标记中指定的数据，没有格式设置，而且看起来一点也不好，如下所示图片：

问题2：

我导入了两种外部字体：{{<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> （来自Google字体）和Open Sans}

请检查此文件的开头：

https://github.com/napolev/web-components/blob/master/src/components/thumb-01-product/thumb-01-product.scss

我的问题是，在Font Awesome上，两种字体均不起作用，如下图所示：

另一方面，在Google Chrome，Mozilla Firefox和Internet Explorer上，字体工作正常，如您在第一次预览中所见。

关于如何解决这些问题的任何想法？

谢谢！