본문 바로가기

Dev. Web/HTML CSS

[HTML/CSS] 웹페이지 폰트 변경 순서 및 작업 일지

[출처] 써나님 블로그

 

홈페이지 폰트 변경하기

▶순서
1.필요한 폰트의 ttf 파일 확보
-ttf→eot, ttf→woff


2.제공할 웹 브라우저에 맞는 폰트 확장자 변경
(use) eotfase.com
-ttf→eot (for IE, Chrome)
(use) http://people.mozilla.org/~jkew/woff/
-ttf → woff (for Firefox)

+포스팅
http://blog.naver.com/j_seonhwa/220803113202

[ttf/eot] 웹폰트 변경을 위한 폰트 확장자 변경(ttf to eot)

▶대표적으로 사용하는 인터넷 브라우저 -IE (인터넷 익스플로러, Internet Explore) -Chrome (크롬) ...

blog.naver.com

http://blog.naver.com/j_seonhwa/220803145237

[ttf/woff] 웹폰트 변경을 위한 폰트 확장자 변경(ttf to woff)

앞서 ttf to eot 로 확장자를 바꾸는 포스팅을 작성하였습니다. 사실... eot 파일만 필요하고 woff는 필요 ...

blog.naver.com



3.웹서버에서 폰트 디렉토리에 복사
(use) Filezilla
-.../css/ 하단에 폰트 파일 저장


4. ccs 수정
(use) editplus

/css/style.css @font-face { font-family: "NanumGothic"; src: url('./NanumGothic.eot'); src: url('./NanumGothic.eot#iefix') format('embedded-opentype'); srcl url('./NanumGothic.woff'); }



5.tada~ 홈페이지 확인



+작업일지
(20160901)
내부망 css/ 외부망 css 가 다른다는 것을 퇴근 직 전에 알게 됨
import로 폰트를 땡겨오는 것은 불가능이라 판단(내부망)
ttf를 웹서버/css 에 넣고 테스트 했는데, IE에서만 안 먹힘(다운그레이드 해도 안 먹힘)


(20160902)
홈페이지 전체 폰트 변경이 짜증나는게
각 브라우저 마다 쓰는 사용되는 폰트 확장자가 다 다르다는 사실
거기다... css가 아닌 각 문장마다 font-family가 따로 설정되어 있는 부분도 짜증

eot, ttf 동시 로드 했는데 실패
브라우저 별로 필요 파일만 로드하는 코드를 구글링을로 찾음
ttf 파일로 eot파일 생성 후 css 코드 수정
오예 / but firefox 폰트 변경 안 댐
급하게 woff 만들어서 css 수정 함
Firefox도 완료 !


to do list on next monday
-페이지 하나하나 확인하면서 폰트 변경하기