티스토리 블로그 웹폰트로 가독성을 올리자 - 첫번째

시작하며

티스토리 블로그의 가독성을 높이기위한 방법으로 굴림체를 기타의 웹폰트로 변형하여 사용하는 법을 포스팅 하고자합니다.

티스토리 블로그 웹폰트로 가독성 올리기!

* 웹폰트란? 컴퓨터에도 폰트(서체)의 설치를 통해 다양화 하여 글의 모양을 사용할 수 있는 것처럼 인터넷 상에서 서체의 사용을 다양화 시켜주는 폰트를 의미합니다.

티스토리의 기본 글꼴인 굴림체를 활용하여 "글쓰기"시에 굴림으로 입력하시면 보이는 화면에서 "일정폰트"가 보이도록 합니다. 오늘은 나눔고딕을 활용하여 나눔고딕이 어떻게 블로그에 적용되는지 천천히 설명하도록 하겠습니다. 포스팅이 길어질 수 있으니 참고하세요

* 나눔고딕은 네이버가 한글의날 기념으로 배포한 TTF(윈도우용 폰트)입니다.    TTF를 변환과정을 통하여 Eot(웹용폰트)로 제작하여 사용되어지고, 지정된 웹사이트에서만 사용되어     집니다. 프로그램 및 폰트준비 1. 네이버에서 제공하는 나눔고딕.ttf파일 다운 후 설치 진행 [다운로드] 2. 웹폰트 변환 프로그램 Microsoft WEFT [다운로드] [사이트] - 다운로드 속도가 다소 느릴 수 있습니다.    프로그램 설치 후 설정부분이 있기때문에 실행은 하지마시길 바랍니다. 3. 설정파일 web-font.zip    web-font를 다운 받으신 후 압축을 풀어주세요.    단, 압축은 간단하게 c: d: 등 의 최상위 폴더위에 폴더명 포힘하여 풀어주시기 바랍니다.   영문으로 이루어지지 않은명은 인식하지 않기 때문에 꼭 확인하세요.   예) c:\web-font or d:\web-font가 되게해주세요.

1. 폰트설치

?
폰트설치는 기본적으로 자동프로그램으로 Window사용자는 프로그램 실행으로 자동  설치를 진행 하실 수 있습니다.

2. Microsoft WEFT 설치 및 프로그램 설정 및 웹폰트 제작

?
폰트설치는 기본적으로 자동프로그램으로 Window사용자는 프로그램 실행으로 자동  설치를 진행 하실 수 있습니다.

1) 설치
  -  설치진행에는 별다른 특이사항은 없습니다. 특정경로(운영체제외 드라이브 설치)설정이 있지않는한 계속다음을 누르셔서 설치를 진행하시면 됩니다. 제일마지막 Finish를 누르시면 설치가 시작됩니다.

2) 실행 및 웹폰트 제작
  -  설치가 완료되셨으면 WEFT프로그램을 실행하여 줍니다. 지금부터 설정이 중요하오니 꼭 차분하게 잘 따라와 주세요.

프로그램 실행 후 초기화면의 모습입니다.
이 상태에서 "아니오"를 클릭하셔야합니다. "예"를 누르시면 나중에 폰트를 불러올 시에 문제가 발생 할 수 있으니 주의 하세요.

위와 같이 순차적으로 진행하시면 됩니다. 이메일과 네임은 임의대로 임력하시면 됩니다.

오른쪽과 같이 설정을 file://로 만드신후에 ...을 클릭하시면 파일을 불러드릴 수 있습니다.
위에 받은 설정파일을 압축을 푼곳에 들어가셔서 Index.html파일을 선택합니다. 
* 상위의 설정파일에대한 주의사항 필수 참고!

<Add> 클릭 후 "나눔고딕"폰트를 찾아서 클릭 후 OK를 눌러줍니다.

Load를 누르시면 파일 선택창이 나옵니다.
파일선택창에서 파일종류가 Subset-documernt로 설정된 부분을 ALLFile로 바꾸어 주신 후
다운받으신 설정파일 중 Subset.txt.파일을 선택하여 주시기 바랍니다. 선택 후 돌아온창에서 OK를 눌르셔서 서브셋 설정을 마치시고 다음을 눌러주십시오.

위와같이 EDIT를 누르셔서 그안에 Add를 누르시면 불로그 주소를 추가하실 수 있습니다.
기존 경로는 Remove버튼으로 제거하시고 Show CSS체크도 잊지마세요.

다음을 누르시면 오른쪽과 같이 CSS Style 소스가 생성됩니다. 우측의 소스에 보시면 폰트이름이 나눔고딕으로 되어있습니다. 경로의 위치도 보이구요. 이부분을 기억하시고 다음파트로 넘어가겠습니다.

 

티스토리 블로그 웹폰트로 가독성을 올리자 - 두번째 바로가기

이 글이 마음에 드시면 추천부탁드립니다.