Why chrome load ttf file, rather than woff, in this syntax

Question

.css

@font-face {
    font-family: 'NanumBarunGothic';
    src: url(NanumBarunGothic.eot);
    src: url(NanumBarunGothic.eot?#iefix) format(‘embedded-opentype’),
    url(NanumBarunGothic.woff) format(‘woff’),
    url(NanumBarunGothic.ttf) format('truetype');
}
@font-face {
    font-family: 'NanumBarunGothic';
    src: url(NanumBarunGothicBold.eot);
    src: url(NanumBarunGothicBold.eot?#iefix) format(‘embedded-opentype’),
    url(NanumBarunGothicBold.woff) format(‘woff’),
    url(NanumBarunGothicBold.ttf) format('truetype');
    font-weight: bold;
}

.htaccess

Addtype application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/font-woff .woof

This is my syntax. IE is OK. Load .eot perfectly. But Safari, Chrome load .ttf font. Why? Any wrong syntax in there?

Test page: http://parkjinho.pe.kr:2368

I see strange single quotes for woff format, and normal single quotes for truetype. Maybe this is the problem. The same single quotes are used for embedded-opentype as well. — Wojtek Surowka, Mar 26 '14 at 13:56

score 1 · Answer 1 · answered May 06 '16 at 16:09

(THE WHY) PROBLEM:

The problem is in the WOFF file. If you check Google Chrome Console log, then you will notice:

Failed to decode downloaded font: http://PATH_TO_YOUR_FONT/NanumBarunGothic.woff
OTS parsing error: incorrect file size in WOFF header

So the browser defaults to the TTF format. If you check the HTTP requests, you will notice the WOFF file first and then the TTF file after the browser is unable to parse the WOFF.

SOLUTION:

Reconvert/regenerate your WOFF file. There are a few solutions for it.

I recommend using:

ONLINE: http://ttf2woff.com/
COMMAND LINE: https://github.com/ananthakumaran/webify

score 0 · Answer 2 · answered Jun 29 '16 at 06:44

As pointed out by Wojtek Surowka you've got curly quotes in your CSS file, this could be causing issues (though also could just be a result of you pasting the content here).

For quotes in CSS you should use " or ' never any of the following: “ ” ‘ ’.

Also I noticed your .htaccess file has a typo where you're using .woof instead of .woff.

Why chrome load ttf file, rather than woff, in this syntax

2 Answers2