get real!

cooljohn.egloos.com

포토로그



@font-face 웹폰트(Web font) 적용 programming


Default:
@font-face {
font-family:[지정할 web font 명];
src: url('url 상의 web font파일 위치');
src: url('url 상의 web font파일 위치') format('포맷타입');
}

Ex)
@font-face {
    font-family: BebasNeue;
    src: url('fonts/BebasNeue.eot');
    src: url('fonts/BebasNeue.otf') format("opentype");
}
ReferedURL: http://demun.tistory.com/1930


woff나 eof와 같은 파일을 인식하지 못해 404 Error가 나는 경우, mime-type을 지정해주면 된다.
이경우, 아래와 같이 적용해주면 된다.
application/x-font-woff
application/x-font-eof
ReferedURL: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts
                  http://www.dirigodev.com/blog/404-errors-in-IIS7-for-embedded-woff-font-files/


IE 6-8 또는 기타 브라우저에서 비정상 작동하는 경우 아래와 같이 변경하면 된다.
@font-face {
font-family: 'BebasNeue';
src: url('fonts/bebasneue.eot'); -- IE9 Compat Modes --
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'), -- IE6-IE8 --
     url('fonts/bebasneue.woff') format('woff'), -- Modern Browsers --
     url('fonts/bebasneue.ttf')  format('truetype'), -- Safari, Android, iOS --
     url('fonts/bebasneue.svg#svgBebasNeue') format('svg'); -- Legacy iOS --
}
ReferedURL: http://stackoverflow.com/questions/9705327/font-face-ie-problems


1 2 3 4 5 6 7 8 9 10 다음