웹사이트에 구글 웹폰트 적용하기
예전에 비해 근래는 무료 웹폰트를 적용하기에 좋은 시절입니다. 예전에는 웹폰트 하나 적용하려면 지식도 많이 필요했고 폰트라이선스도 구매했었어야 했습니다.
하지만 지금은 무료로 제공되는 웹폰트도 많고 구글에서도 무료 웹폰트를 온라인으로 서비스하고 있어서 쉽게 적용 할 수 있습니다.
구글폰트에서 웹폰트 확인 및 코드 획득하기
먼저 구글 폰트 웹사이트에 접속합니다.
- 구글폰트 웹사이트에 접속합니다.
- 한글 폰트를 적용하기 위해서
Language선택에서Korean을 선택합니다.
- 폰트리스트 중 사용하기 원하는 폰트를 선택합니다.
- 선택된 폰트는 우하단에 저장됩니다.
+버튼을 클릭하면 장바구니에 저장됩니다.
폰트 용량 자체가 크기 떄문에 폰트 굵기 종류가 1개 추가 될 때마다 용량이 많이 증가하기 떄문에 꼭 필요한 폰트만 선택해야 합니다.
- 상단 탭에서 CUSTOMIZE을 선택합니다.
- 선택된 2개의 폰트 중 Nanum Myeongjo에 대해서 폰트 굵기에 대해서 선택합니다.
- 선택된 2개의 폰트 중 Nanum Gothic에 대해서 폰트 굵기에 대해서 선택합니다.
- Korean 폰트를 선택합니다.
이제 웹사이트에 적용하기 위한 코드를 확인 합니다.
EMBED탭을 선택합니다.- STANDARD 탭을 선택하면…
- STANDARD : HTML의
<head>영역에<link>형태로 적용하기 위한 코드를 제공합니다. - @IMPORT 탭을 선택하면…
- @IMPORT : Style 영역에
@import url()형태로 적용하기 위한 코드를 제공합니다. - 실제로 적용하고자 하는 곳에 작성 할
font-family코드를 제공해 줍니다.
구글폰트 웹사이트에서 획득할 수 있는 정보는 여기까지 이고 이제 내 웹사이트에 적용하는 방법을 설명하도록 하겠습니다.
내 웹사이트에 적용하기
내 웹사이트에는 <HTML>과 <CSS> 2가지 종류의 파일이 있을 것입니다.
적용하는 방법은 <HTML>에 적용하는 방법과 Style(CSS)에 적용하는 방법이 있습니다.
HTML에 적용하기
첫번째 인 STANDARD로 적용하는 방법은 HTML의 <head>영역에 <link> 형태로 적용하는 방법입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo&display=swap&subset=korean" rel="stylesheet">
<style>
body {
font-family: 'Nanum Myeongjo', serif;
}
p {
font-family: 'Nanum Gothic', sans-serif;
}
</style>
</head>
<body>
<div>
역사를 되려니와, 천하를 인간은 따뜻한 넣는 이상의 그들의 있는 봄바람이다. 무엇을 일월과 위하여, 힘있다. 희망의 투명하되 같은 찾아다녀도, 있는 피에 꽃 스며들어 황금시대다. 가치를 그들은 인간이 아니더면, 영원히 것이다. 무엇을 능히 힘차게 철환하였는가? 소리다.이것은 곳으로 같은 것은 봄날의 되려니와, 들어 불어 오아이스도 있으랴? 있음으로써 지혜는 힘차게 뛰노는 곳이 피부가 봄바람이다. 할지라도 많이 행복스럽고 얼음 보배를 물방아 것이다. 봄날의 옷을 얼마나 그들은 것이다.
</div>
</body>
</html>
위 의 코드처럼..
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo&display=swap&subset=korean" rel="stylesheet">를
<head></head>영역 안에 적용합니다.
그리고 해당 폰트를 적용하고 싶은 Style에 font-family: "Nanum Gothic", sans-serif;이렇게 적용을 하면 됩니다.
CSS에 적용하기
보통 웹사이트를 디자인 할 떄 style을 css파일로 별도로 분리하여 저장하고 HTML에서 불러와 사용하는 경우가 많습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
<div>
역사를 되려니와, 천하를 인간은 따뜻한 넣는 이상의 그들의 있는 봄바람이다. 무엇을 일월과 위하여, 힘있다. 희망의 투명하되 같은 찾아다녀도, 있는 피에 꽃 스며들어 황금시대다. 가치를 그들은 인간이 아니더면, 영원히 것이다. 무엇을 능히 힘차게 철환하였는가? 소리다.이것은 곳으로 같은 것은 봄날의 되려니와, 들어 불어 오아이스도 있으랴? 있음으로써 지혜는 힘차게 뛰노는 곳이 피부가 봄바람이다. 할지라도 많이 행복스럽고 얼음 보배를 물방아 것이다. 봄날의 옷을 얼마나 그들은 것이다.
</div>
</body>
</html>
CSS를 별로로 운영하기 위해 style파일을 link로 연결을 시켜놓습니다.
<link rel="stylesheet" href="./style.css" type="text/css">
./style.css 파일
아래는style.css파일의 내용입니다.
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo&display=swap&subset=korean');
body {
font-family: 'Nanum Myeongjo', serif;
}
p {
font-family: 'Nanum Gothic', sans-serif;
}@import 기능을 이용하여..
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo&display=swap&subset=korean');\
로 CSS에 링크를 걸어 줍니다.
나머지 적용하는 것은 HTML에 적용하는 것과 마찬가지로 font-family: "Nanum Gothic", sans-serif; 이렇게 적용을 하면 됩니다.
적용확인하기
이제 브라우저로 적용된 화면을 보시면 됩니다.
<body>에 적용한 명조체인 'Nanum Myeongjo', serif;가 반영된 것을 확인 할 수 있습니다.
