Html 修复字体差异

我正在使用这种字体：（谷歌字体）。我将其实现到HTML文档中，如下所示：

标记：

对于我的文本，我使用以下CSS代码进行应用：

* {
  font-family: 'Poppins', sans-serif;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}  

一切都在Chrome中工作。在Chrome版本74.0.3729.157中看起来是这样的：

下面是另一款浏览器的风格，如microsoft edge 17.17134版：
正如你所看到的，这有很大的不同。为了设计漂亮的网页，我需要解决这个问题。希望有人能帮我解决这个问题。谢谢。：）
注意：对于其他浏览器中的

元素，它似乎也能正常工作。但不适用于

元素。字体通常应用于

元素，但出于某种原因，我认为它呈现的效果不同。如何解决这个问题？ ~z~菲利普

编辑：

---

要轻松查看和测试我的问题，请在不同的浏览器（如chrome和edge）中打开此JSFIDLE:

要解决问题，请在

@font-face

声明中包含

WOFF

格式。大多数现代浏览器支持

WOFF

为了最大限度地支持浏览器，请包括所有可能的格式

@font-face {
    font-family: 'Poppins';
    src: url('Poppins.eot');
    src: url('Poppins.eot?#iefix') format('embedded-opentype'),
       url('Poppins.woff2') format('woff2'),
       url('Poppins.woff') format('woff'), 
       url('Poppins.ttf')  format('truetype'),
       url('Poppins.svg#svgFontName') format('svg');
}  

---

您是否尝试清除缓存？通常，可以使用CTRL键修复此问题+F5@SuperDJ是的，已经试过了。不起作用。@Alex G.有没有办法从google fonts在线获取字体，或者我必须下载并保存到我的公共文件中？试着改用它，看看是否有效：@import url（'）；这个：body{font family:'Lato'，sans serif；}是的，这是可能的