웹빌더를 이용하여 홈페이지를 만드는 프로젝트를 하는 중
처음에는 웹빌더를 사용한다고 해서, 조금 불만사항이 있었지만 생각보다 웹빌더라고는 해도 신경쓸 게 많아서 전체적인 제작 플로우를 익히면 좋겠다는 생각을 하게 되었다.
하다보니 아임웹에서 지원하지 않는 글꼴을 기업측에서 요청하셔서, 서체를 적용해 봤는데 생각보다 많이 어려웠다.
김인권 강사님의 강의에서는,
구글 웹폰트를 이용해서 header부분에 <link>를 입력하고,
CSS에서 태그명 {font-family : 글꼴명;} 이라고 적용하면 되었다.
하지만, 기업측에서 요청한 네이버 나눔손글씨 유니 띵땅띵땅, 바른히피 등등의 경우에는 구글 폰트에서 <link> 소스를 찾기가 어려웠다.
무료 웹폰트 다운 사이트 : 눈누
조원분께서 추천해주신 눈누라는 사이트에서, 무료 웹폰트를 사용할 수 있었지만, 왜인지 웹폰트 적용이 되지 않아서 매우 답답했음
여러 블로그를 읽어봤고, 가장 쉽게 설명된 블로그를 참고하여 해결하였다.
CSS 웹폰트 적용방법
서체 적용방법
먼저, 눈누에서 제공되는 웹폰트 소스이다.
@font-face {
font-family: 'Yuni_ddingddang';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_11@1.0/Yuni_ddingddang.woff') format('woff');
font-weight: normal;
font-style: normal;
}이대로 적용하니 제대로 되지 않음.
잘됨.
다만 강의에서처럼 html header부분에서 <link>태그를 붙여넣기 하듯이 하면 안되고, <style> 태그 안에서 css로 작업해야한다.
css파일이 따로 있다면 먼저 이 폰트를 붙여넣기 해 준 후,
적용할 부분에서font-family를 작성하여 사용한다.
수정하니 서체를 설치하지 않은 다른 컴퓨터에서는 적용되지 않았음.
내 노트북에서만 됨.
그냥 원래대로 눈누에서 제공되는 걸 그대로 쓰면 됨
위의 블로그를 참고하여, 수정한 것이 아래와 같다.
@font-face {
font-family: 'Yuni_ddingddang';
src: local(Yuni_ddingddang);
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_11@1.0/Yuni_ddingddang.eot');
src: local(@), url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_11@1.0/Yuni_ddingddang.woff') format('woff');
font-weight: normal;
font-style: normal;
}-
일단 local(pc)에서 해당 글꼴이 있는지를 찾는다.
-
eot가 woff 앞에 와야한다.
IE9+, 크롬, 사파리, 파폭, 오페라는 eot 글꼴에 대한 format('embedded-opentype') 선언을 굳이 안 써줘도, 영리하게도 eot 글꼴은 내려받지 않는다. 반면 IE6~8은 format('woff')를 해줘도 바보같이 woff 파일까지 내려받아버리기 때문에 eot를 woff 앞에 써준다 -
format()
해당 형식을 지원하는 브라우저만 글꼴을 내려받도록 해준다. 값은 반드시 따옴표 안에 있어야 하며, 작성하지 않는 경우 지원 여부에 무관하게 모든 형식의 글꼴을 모든 형식의 글꼴이 내려받아지는 것이 원칙이다. 다만 위에서도 말했듯 대부분의 브라우저가 eot 글꼴은 무시하고, IE7~8은 이 코드를 해석하지 못한다.
이것을 html header부분
<style>태그, 또는 CSS파일에 작성한다.
사용
HTML에서는 style안에 작성해 준다.
<태그 style="font-family : 한글글꼴명, 영문글꼴명;"></태그>CSS에서도 사용가능하다.
태그명 {font-family : 한글글꼴명, 영문글꼴명;}적용하면 완료된다.
최종
그냥 웹폰트 사이트에서 제시된 코드를 그대로 써야했음. 수정했더니 오류남
