2

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.

1
  • I also found it helpful to use font inspector tools like FontDrop to see if the font data is correct (especially for certain glyphs like arrows)
    – st_phan
    Commented Oct 5, 2023 at 11:36

4 Answers 4

4

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.

3

.woff2

First Way - Steps:

  1. Go to iis server and then "Sites"
  2. Double click on website you want to add MIME type.
  3. Right pan find and click on "MIME Types"
  4. In right most pan, click on "Add"
  5. Type in ".woff2" in "File name extensions:" and "application/font-woff2" in "MIME Type:"

Done. Refresh your website page, this should reflect now.

Second Way - Steps:

Add Below into the web.config.

<system.webServer>
<staticContent>
    <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>

Note: If already there then just add entry for woff2. Else add entire tag.

2
  • Yes, this worked but just one bit to add. If you are manually adding MIME type not in config, it will be lost once new deployment will be done. To keep it there always, we need to add entry in config file. I'm trying to findout the way if we can keep MIME type there always without adding it in config.
    – Ali Mamoon
    Commented Mar 19, 2021 at 7:20
  • adding that on web.config indeed solved the issue. thanks! [+1]
    – kapitan
    Commented Dec 29, 2021 at 0:28
1
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

hope this can help found it a while back when doing something similar(not taking credit for this as found it not wrote it) I would however suggest trying woff instead of woff2 depending on your browser..

1
  • why woff instead of woff2? Commented Jul 22, 2023 at 12:39
1

You can add a MIME type inside the IIS Manager.

  1. Open the MIME Types in your server Home page
  2. Add .woff2 with MIME type application/x-font-woff.

And you can configure it in web.config

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>
</system.webServer>

In my case it works with IIS 10.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.