使用webfont

如何解决使用webfont

我正在研究使用Webfont的wordpress主题。我遇到了一个问题，我的首字下沉样式在Firefox上可以正常使用，但在Chrome（codepen | screenshot）上却奇怪地未对齐

当我取出webfont声明并仅使用默认的serif系列时，问题就消失了，所以我认为这取决于webfont。我在其他地方读过，SVG字体在浏览器中得到了更一致的处理，因此我尝试生成该字体的svg版本，并使用font-face而不是@import，但这似乎没有用，我已经结束了知识。有人知道解决方法吗？

这是我的CSS：

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');

body {
    font-family: 'IM Fell English',serif;
    font-size: 1.25rem;
    background-color: #f3f8fe;
    color:#333;
    line-height: 1.5;
}

.dropcap:not(:focus)::first-letter{
    float: left;
    font-size: 8.4em;
    line-height: .68;
    font-weight: 100;
    margin: .05em .1em 0 0;
    text-transform: uppercase;
    font-style: normal;
    background-color: #ccc; 
}

和HTML：

<p class="dropcap">
    Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce placerat quis purus porttitor sagittis. Etiam lectus urna,venenatis id porttitor nec,vehicula ac velit. Phasellus enim mauris,condimentum ac euismod sed,efficitur a urna. Nullam elementum,nulla iaculis consequat feugiat,leo nisi elementum elit,sit amet pharetra magna lorem sit amet urna. Sed facilisis ultrices mauris fermentum porta. Nullam vel ex lorem.
</p>