I am facing an issue with @fontface specifically in Google Chrome where the font appears to be rendered too high on the page.
Interestingly, when I switch the font to Arial, the display is fine across all browsers. However, as soon as I switch back to the @fontface font, the text seems to jump up abruptly.
For a clear visual comparison, below are two images showcasing the disparity between Firefox and Chrome rendering of the font.
I have already attempted the following solutions: - Applying -webkit-font-smoothing: antialiased;
Additionally, I have included the following code snippet for all fonts right after declaring the font:
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'Museo-Sans-Rounded-100-Regular';
src: url('../fonts/Museo-Sans-Rounded-100-Regular.svg') format('svg');
}
}
Despite these efforts, the issue persists. Any suggestions or assistance would be greatly appreciated!