티스토리 뷰

Web Client/HTML

HTML/CSS 구글 폰트 사용 및 설정

미쁘다♥ 2017. 10. 6. 18:20
반응형

안녕하세요. 오늘은 HTML/CSS 구글 폰트 적용 방법을 알려드리겠습니다. 


우선 구글에 google fonts  검색하시거나 아래 주소 링크로 들어갑니다. 


https://fonts.google.com 에 접속하면 여러가지 무료공개 폰트가 뜨는데요. 


사용하고자 하는 폰트를 클릭합니다.


저는  Nosifer 을 사용해 보도록 하겠습니다. 




해당 폰트를 클릭하시거나 + 누르시면,  다음과 같은 창이 뜹니다.  SELECT THIS FONT 클릭하세요.



클릭하면 다음 과 같은 창이 뜨는데, 해당 링크와 예제를 보고 사용하시면 됩니다. 


혹시 모를 초급자를 위해 소스 공개해서 설명드릴게요.





<!DOCTYPE html>
<html>
<head>
	<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
	<title>Google 폰트 설정</title>
	<style type="text/css">
	.font-family-1{
		font-family: 'Nosifer', cursive;
	}
	</style>
</head>
<body>
	<h1 style= "font-family: 'Nosifer', cursive;">폰트 확인용 글자입니다~hellow</h1>
	<h1 class="font-family-1">클래스 사용법 예시 check </h1>
</body>
</html>

궁금하신점, 피드백 언제나 환영입니다 :) 
좋은 하루 보내세요~


반응형
저작자표시 비영리 변경금지

'Web Client > HTML' 카테고리의 다른 글

섹션(Section) 요소 - BODY, HEADER, NAV,ARTICLE,ASIDE  (0) 2019.01.14
[Markdown] 마크다운 문법 - 깃허브 위키  (0) 2018.03.08
Favicon & App Icon 파비콘 코딩 방법  (0) 2017.10.04
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크