CODEWITHSUNDEEP
internet-explorergoogle-chromesafaritruetypewoff
user3464438
user3464438

Reputation: 1

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

.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

Upvotes: 0

Views: 1531

Answers (2)

levi
levi

Reputation: 2144

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.

Upvotes: 0

Jorge Díaz
Jorge Díaz

Reputation: 606

(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:

Upvotes: 1

Related Questions