Apologies if this seems like a silly question, but I recently imported a font from my computer into a CSS file. While it displays correctly in Chrome, it's not working in Microsoft Edge or Internet Explorer. Unfortunately, I don't have access to other browsers to test. Can someone shed light on why this might be happening?
This is how the CSS is linked:
@font-face {
font-family: 'Linotte';
src: url('...\font\Linotte\Linotte.otf') format('otf'),
url('...\font\Linotte\Linotte.woff2') format('woff2'),
url('...\font\Linotte\Linotte.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I've read that Edge doesn't support .woff2 files, so I included both the .otf and .woff versions. However, it hasn't resolved the issue. When using this font on any page, I receive an error message in the Chrome console for both the .woff and .woff2 files:
Failed to load resource: net::ERR_FILE_NOT_FOUND
Interestingly, this error does not appear in the Edge or IE consoles.
In the sources section, I see the following (I can't embed images yet as I'm new): Sources
The Linotte folder is located within the same directory as the CSS file, so I'm puzzled as to why it's not showing up correctly.