Search code examples
htmlcssfontswoff2

Woff2 @font-face Won't Load Properly

I am having trouble trying to import a woff2 font file for use in a simple test webpage.

Below is how I have organized and coded the test webpage: File directory for test webpage Code for test webpage

Added .woff file

Everything is in one folder named 'test' and the @font-face src references the local .woff2 font file I want to test. Unfortunately, the font for the heading does not show the proper font unless I use the .ttf font file.

This is how it looks when I use the .ttf file: Test page successfully loads font

and this is how it looks when I use the .woff2 file: Test page fails to load font

I feel as though I am making a simple formatting mistake somewhere, but I can't seem to figure out where I'm going wrong. Any help is appreciated.

Solution

  • I finally found out why the font wouldn't work! I had downloaded the Latin-Extended version of the font, which wouldn't display correctly. All I had to do was download the plain Latin version of the font and it worked as it should.

    I thought to download the plain Latin version of the font after taking a look at this post by limonte: Font rendering in Chrome (woff2) - after load font family doesn't want to change.