전자책(epub)제작 css - 글꼴설정하기 font-family

전자책(epub)을 만들때 필수적으로 들어가야 하는 것 중 하나가 폰트입니다. 이 글에서 전자책(epub)을 만들때 서체를 적용하는 방법에 대해 남깁니다. 

 

속성

글꼴을 바꿔주는 css 속성은 font-family입니다. 

 

속성값

속성값은 서체에 지정한 이름을 쓰면 됩니다. 

font-family: "kopub_bat_l";

 

전자책 기본 글꼴

전자책(epub)제작시 본문에 가장 많이 사용하는 글꼴은 Kopub바탕체, 네이버 나눔명조입니다. 

두 서체 모두 무료로 이용이 가능합니다. 

 

전자책(epub)제작 시 폰트 적용 방법 

서체파일 시길에 삽입 -> css에 서체파일 연결 -> css에 글꼴 변경 스타일 작성 -> html에 적용 

 

1. 서체파일을 시길에 넣기

1. 기존파일추가 선택

2. 넣고 싶은 서체파일 선택

3. Open클릭

4. 시길 Fonts폴더에서 들어간 파일 확인 

 

* 서체파일은 otf나 ttf파일을 넣으시면 됩니다. 

* 서체파일을 넣을 때는 반드시 서체의 저작권을 확인하셔야 합니다.(상업적사용 가능 서체인지 확인)

 

2. 서체파일을 css에 연결

1. css파일로 갑니다. 

2. @font-face { font-family: "kopub_dot_b"; src: url(../Fonts/KoPubDotum_ProBold.ttf); } 이 소스코드를 복사합니다. 

이 코드에서 수정할 부분은 위의 빨간색 부분입니다. 

3. css에 코드를 붙여넣기 합니다. 

@font-face { font-family: "kopub_dot_b"; src: url(../Fonts/KoPubDotum_ProBold.ttf); } 
이 코드에서 수정할 부분은 위의 빨간색 부분입니다. 
KoPubDotum_ProBold.ttf 부분은 Fonts폴더에 넣은 서체 파일명으로 바꿉니다. 
kopub_dot_b 부분은 내가 부르고 싶은 속성값으로 변경합니다. 

 

4. 시길 Fonts폴더에서 서체파일을 선택한 뒤 마우스 오른쪽을 클릭하고 이름 바꾸기를 선택합니다. 

5. 서체이름을 그대로 복사해 위 빨간네모자리에 붙여넣기 합니다. 

6. font-family뒤 속성값 부분에 이름을 원하는 이름으로 바꿔줍니다. 저는 바탕체볼드라 batangb라고 이름을 지었습니다. 

 

3. css에 스타일 만들고 html에 적용 

1. css파일에 글꼴을 바꾸는 스타일을 만듭니다. 

.f3{font-family: "batangb";}라고 만듭니다. "batangb"는 위에 내가 지어놓은 이름을 그대로 사용하면 됩니다. 

2. html파일에서 내가 적용하고 싶은 곳에 f3을 적용합니다. 

3. 화면에서 보면 바탕체 볼드가 적용되었습니다. 

 

4. 서체가 적용되지 않을 때 확인

내가  KoPubBatang_ProBold.ttf 서체를 시길에 넣은 후 html에 적용하고 싶다면 아래와 같이 이름들이 정확하게 매칭이 되어 있어야 합니다. 

 

이러한 과정을 거치면 내가 원하는 글꼴을 얼마든지 적용할 수 있습니다. 

 

무료글꼴 찾기

 

눈누라는 사이트로 이동합니다. 

눈누

원하는 글꼴을 선택 - 저작권 확인 - 다운로드의 순으로 받으시면 됩니다. 

 

눈누에서 원하는 글꼴을 클릭하면 해당 글꼴의 페이지로 이동합니다. 

페이지의 하단에 보면 라이선스 요약표가 있습니다. 

임베딩 부분에 E-book제작 허용여부를 확인하시면 됩니다. 

 

허용이 된다면 상단의 다운로드 페이지로 이동을 눌러 글꼴 페이지로 이동해 받으면 됩니다. 

글꼴 페이지로 이동해 글꼴의 라이선스를 다시 한번 정확하게 확인하고 받으시길 바랍니다. 

라이센스
개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공되며 모든 용도의 상업적 사용이 가능합니다. 

 

위와 같은 내용의 문구가 있어야 합니다. 

눈누가 아니더라도 어디서든 글꼴을 검색하고 위와 같이 라이선스를 확인하고 다운로드 받아 사용하시면 됩니다.