구글 웹폰트를 이용하는 방법은 다음과 같다.
1. 사용방법은 두가지가 있다.
- @import를 이용하기
- 링크를 <head></head> 사이에 걸어 사용하기
우리가 밑의 파일을 만들었다고 가정한다.
View.html - 화면을 보여줄 페이지 이름
Style.css - 스타일을 적용할 스타일시트 가 있다고 가정하고 어떻게 적용하는지 알아본다.
구글 웹 폰트 바로가기 :
http://www.google.com/webfonts#구글에서 웹 폰트를 사용하는 방법은 선택 > 리뷰 > 사용 이렇게 세가지로 먼저 사용할 폰트를 고른 후 리뷰, 사용 페이지에서 소스를 얻어오는 방식이다.
1. @import를 이용하기.
간단하게 @import url를 사용하여 CSS파일에 불러오는 방식이다. Style.css 파일에 작성한다. 그 후 Style.css파일을 View.html에 링크를 건다.
- Style.css
@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC);
body {
display: block;
font-family: ‘Carrois Gothic SC’;
font-size: 100%;
}
- View.html
<head>
<title>title</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<link href=’http://css파일이 저장된 경로 주소.css ’ rel=’stylesheet’ type=’text/css’ media='all'>
</head>
2. 링크를 <head> 와 </head>에 넣어 사용하기
헤드 사이에 직접 웹 폰트가 있는 위치를 링크 시켜 걸어주는 방식이다. 직접 보여줄 웹 페이지 헤드와 헤드 사이에 링크한 후, 폰트를 사용할 곳에 스타일를 적어주면 된다.
- Style.css
body {
display: block;
font-family: ‘사용하고자 하는 폰트이름’;
font-size: 100%;
}
- View.html
<head>
<title>title</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<link rel=”stylesheet” href=”Style.css” type=’text/css’ media=’all’ />
<link href=’http://fonts.googleapis.com/css?family=Carrois+Gothic+SC’ rel=’stylesheet’ type=’text/css’>
</head>
이 방법들보다 더 좋은 방법들이 있을지도 모르나 개인 경험으로는 이 정도만 알고 있으니 참고하시길 바랍니다.
'개인적인 것 > 주워 배운 것들' 카테고리의 다른 글
| 알아두면 좋은 해외 웹사이트 소개 (0) | 2015.01.05 |
|---|---|
| 메타 태그 - 웹사이트의 기본 정보를 알려주는 태그 (0) | 2014.03.06 |
| 애자일(Agile)에 대해 알아보기 (0) | 2014.02.26 |
| 그리드(Grid) 디자인에 유용한 그리드 시스템 웹사이트 (0) | 2012.10.15 |
| Div와 CSS에 대한 간단요약 (0) | 2012.10.15 |