기타활용 웹폰트 글꼴 적용하는 방법 - 사이트, 블로그 폰트 바꾸기
페이지 정보
조회 2,309회 작성일 22-03-28 12:34
본문
웹폰트
사이트, 블로그 폰트 바꾸기
웹폰트란 뜻은 사이트나 블로그의 글꼴을 즉석에서 바로 불러와 사용할 수 있는 것을 의미한다.
원래 폰트 글꼴은 자신의 호스팅이나 서버에 글꼴 파일을 올려 놓고 사용한다.
하지만, 스타일 CSS를 사용해서 불러와 사용할 수도 있다. 이에, 사이트와 블로그 글꼴 바꾸기에 이용하는 방법을 간단히 소개한다.
웹폰트 글꼴 적용하는 방법 - 사이트, 블로그 폰트 바꾸기
웹폰트 제공 사이트
가장 대표적인 것으로 구글이 있다. 무료로 제공되며 따로 등록할 필요도 없다.
라이센스 저작권 조항도 구글 폰트를 방문하면 일일이 확인 가능하다.
아래 링크에서 어떤 것은 다운 받을 수 있으며, 어떤 것은 바로 웹폰트로 불러와서 사용할 수도 있다.
https://fonts.google.com/?subset=korean
그 외에도 여러 곳에서 웹폰트를 제공하는데, 눈누라는 곳도 있다.
이곳은 구글과 달리 100% 링크로 실시간 불러오기가 가능하게 운영되고 있다.
역시 상업용 가능 폰트 저작권 라이센스까지 바로 읽고 확인할 수 있다. 아래 링크로 가면 된다.
웹폰트 불러오기
초보자의 경우 이것도 막막할 것이기 때문에 웹폰트를 불러오는 방법도 알려 준다.
일단 서버는 있어야 한다. 자신이 운영하는 호스팅을 FTP로 접속해서 스타일 파일(style.css)을 만든다.
들어갈 내용의 기본 뼈대는 이렇다. 필요하면 복사해서 붙여넣기 하고 필요한 부분만 바꾸면 된다.
[code]
@font-face {
font-family: '사용할 폰트 이름';
src: url('웹폰트가 제공되는 곳의 URL 주소') format('폰트의 종류');
font-weight:굵기;
font-style:기울기;
}
[/code]
여기에는 두 가지 단계를 거쳐서 코드를 짜는 것이 보통이다. 일단, 눈누에서 제공하는 웹글꼴로 소개한다.
1. 웹폰트 로딩하기
아래와 같이 CSS파일에서 웹글꼴을 불러와서 로딩시켜 놓는다.
[code]
@font-face {
font-family: 'ROKAFSlabSerifBold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSlabSerifBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
[/code]
위 내용을 보면 ROKAFSlabSerifBold 라는 글꼴을 src: url에서 불러오는 것을 볼 수 있다. 위의 기본 뼈대와 비교하면 어디를 바꾸면 될지 감이 올 것이다.
font-weight의 옵션을 bold로 바꾸면 굵은 글꼴이 적용된다.
2. 실제 글꼴에 적용시키
그 아래 쪽에서, 사용하고자 하는 스타일에 아래와 같이 적용한다.
[code]
.myspan { font-family: 'ROKAFSlabSerifBold'; font-style:normal; font-weight:normal; }
[/code]
이것을 사용하기 위해서는 홈페이지 파일에 <span class="myspan"> 같은 태그를 먼저 써 넣어야 한다.
(물론 클래스 이름은 마음대로 바꿔도 된다. 클래스를 주는 방법은 검색을 하면 금방 배울 수 있다.)
또한, 여기에서 font-style과 font-weight를 바꿔도 된다. 현재 이 코드는 기울임 없이 굵기도 일반으로 준 상태다.
파일을 저장했으면 FTP로 올린 후, 브라우저로 자신의 홈페이지나 블로그를 띄워서 새로 고침을 해 보면 적용된 것을 확인할 수 있다.
바뀌지 않을 때도 있는데, 그것은 컴퓨터에서 새로 고침이 제대로 되지 않아서이다.
그럴 때는, Shift+Ctrl+R을 동시에 눌러서 강력한 새로 고침을 해본다.
예제
아래는 예제다. Result를 눌러보면 홈페이지/블로그의 폰트 글꼴을 바꾸는 방법이 무엇인지 이해할 수 있을 것이다.
문제점
정확히 말하자면, 웹폰트의 문제점이라기 보다는 안드로이드의 문제가 있다.
적어도 현재까지는... 안드로이드에서는 웹폰트를 ttf파일만 허용한다는 것이다. 그런데 이것은 무겁고 홈페이지를 느리게 만든다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
그럼에도 불구하고 PC에서 사용하는 woff 파일은 지원하지 않아서, 스마트폰에서는 웹폰트가 적용되지 않는다. (최근 IOS에서는 된다고 함)