CSS : 컴퓨터에 저장된 글꼴 연결하기 @font-face
@import 방식의 외부 글꼴링크(google font)와는 다르게 컴퓨터에 있는 글꼴을 직접 연결하는 방법입니다.
글꼴의 용량이 무겁기 때문에 꼭 필요한 경우만 1~2개 이하로 설정하시는게 좋습니다.
1. C드라이브 > windows > fonts 원하는 글꼴을 복사합니다.
2. TTF 파일로 붙여넣어진게 보인다면 사용 환경에 따라 WOFF 로 변환합니다.
* 아래 zip 파일 다운받고 ttf 파일을 실행파일(exe)로 드래그하면 변홥됩니다.
3. 변환 파일을 웹 작업 폴더에 fonts 폴더를 생성하여 옮기고 style로 명령어를 작성합니다.
@font-face {
font-family: "사용할 글꼴명";
src: url("절대경로 및 상대경로 주소");
}@font-face {
font-family: "title";
src: url("../fonts/arial.woff");
}
4. 위 글꼴을 적용하고자 하는 선택자에 font-family를 명령합니다.
선택자 { font-family:font-face에서 작성한 글꼴명 }p { font-family:title }
Comments, Trackbacks