Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

[CSS] 사용자 컴터에 없는 글꼴 사용할 수 있게 만들기 @font-face

IE를 제외한 모든 브라우저가 TTF 파일을 지원하고, IE는 EOT 파일을 지원한다고 한다.(출처는 http://naradesign.net/ouif/css3/#s25http://naradesign.net/ouif/css3/#s26 다.)

EOT는 TTF를 EOT로 변환해 주는 웹사이트를 통해 간단히 생성할 수 있다.(작동 테스트는 했는데 실제로 EOT가 적용되는지 테스트해 보지는 않았다.)
적용 CSS 코드는 아래와 같다.
/* FF, OP, SF, CR */
@font-face 
{ font-family:ng_ttf; src:url(ng_ttf.ttf);}

/* IE */
@font-face 
{ font-family:ng_eot; src:url(ng_eot.eot);}

.nanum { font-family:ng_ttf, ng_eot;}
<p class="nanum"> ... </p>
위처럼 하면 글꼴을 적용시킬 수 있다고 한다.
코드를 유의해서 보기 바란다. @font-face에서 font-family로 선언한 이름이 ng_ttf인데, .nanum에서 font-family로 ng_ttf를 적용했다. 즉, @font-face는 글꼴 파일과 이름을 연결시켜서 선언하는 역할을 하는 놈이다. 그리고 font-family는 그걸 사용하는 놈이다. ㅇㅋ?
이런 걸 할 때는 저작권을 유심히 봐야 할 거다. 내가 알기로 개인 및 기업에서 무료로 사용할 수 있는 폰트는 네이버의 나눔글꼴, 한컴의 함초롬체 등이다. 글꼴에 대해서 더 자세한 건 직접 찾아 보기 바란다. 내가 아는 건 이정도.
아, 우분투에 들어있는 은 돋움이나 은 바탕, 그리고 렉시 굴림 같은 글꼴은 기업에서도 무료일 수 있겠다. 확신은 못한다. 이상.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다