Font

웹 폰트

로컬 컴퓨터에 폰트 설치 여부와 상관없이 온라인 특정 서버에 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다.

폰트 종류

• EOT(Embedded Opty Type) : 익스플로러 6~8에서 사용하는 웹 폰트 방식입니다.
• TTF(True Type Fonts) : 애플과 마이크로소프트에 의해 1980년대 후반에 개발된 글꼴 표준입니다.
• OTF(Open Type Fonts) : 마이크로소프트 컴퓨터 기본 글꼴입니다.
• WOFF(The Web Open Font Format) : W3C에서 추천하는 글꼴 형식입니다.
• WOFF2(The Web Open Font Format) : WOFF에서 향상된 글꼴입니다.
• SVG : 벡터 방식의 글꼴 형식입니다.

폰트 호환성

@font-face

							@font-face {
							font-family: 폰트 종류;
							  font-style: 폰트 스타일;
							  font-weight: 폰트 두께;
							  src: 폰트 경로;
							  }
						

나눔 고딕

									<!-- 나눔고딕 -->
									<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800" rel="stylesheet">
									<style>
									@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800'); <style>
									font-family: 'Nanum Gothic', sans-serif;
									<style>
								

											<!-- 나눔명조 -->
											<link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800" rel="stylesheet">
											<style>
											@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800'); <style>
											font-family: 'Nanum Myeongjo', serif;
											</style>
										

													<!-- 도현체 -->
													<link href="https://fonts.googleapis.com/css?family=Do+Hyeon" rel="stylesheet">
													<style>
													@import url('https://fonts.googleapis.com/css?family=Do+Hyeon'); <style>
													font-family: 'Do Hyeon', sans-serif;
													</style>
												

															<!-- 구기체 -->
															<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
															<style>
															@import url('https://fonts.googleapis.com/css?family=Gugi'); <style>
															font-family: 'Gugi', cursive;
															</style>
														

																	<!-- Black han san-->
																	<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">
																	<style>
																	@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans'); <style>
																	font-family: 'Black Han Sans', sans-serif;
																	</style>
																

																			<!-- East Sea Dokdo -->
																			<link href="https://fonts.googleapis.com/css?family=East+Sea+Dokdo" rel="stylesheet">
																			<style>
																			@import url('https://fonts.googleapis.com/css?family=East+Sea+Dokdo'); <style>
																			font-family: 'East Sea Dokdo', cursive;
																			</style>
																		

																					<!-- Dokdo -->
																					<link href="https://fonts.googleapis.com/css?family=Dokdo" rel="stylesheet">
																					<style>
																					@import url('https://fonts.googleapis.com/css?family=Dokdo'); <style>
																					font-family: 'Dokdo', cursive;
																					</style>
																				

																							<!-- Song Myung -->
																							<link href="https://fonts.googleapis.com/css?family=Song+Myung" rel="stylesheet">
																							<style>
																							@import url('https://fonts.googleapis.com/css?family=Song+Myung'); <style>
																							font-family: 'Song Myung', serif;
																							</style>
																						

																									<!-- Yeon Sung -->
																									<link href="https://fonts.googleapis.com/css?family=Yeon+Sung" rel="stylesheet">
																									<style>
																									@import url('https://fonts.googleapis.com/css?family=Yeon+Sung'); <style>
																									font-family: 'Yeon Sung', cursive;
																									</style>
																								

																											<!-- Poor Story -->
																											<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
																											<style>
																											@import url('https://fonts.googleapis.com/css?family=Poor+Story'); <style>
																											font-family: 'Poor Story', cursive;
																											</style>
																										

																													<!-- Kirang Haerang -->
																													<link href="https://fonts.googleapis.com/css?family=Kirang+Haerang" rel="stylesheet">
																													<style>
																													@import url('https://fonts.googleapis.com/css?family=Kirang+Haerang'); <style>
																													font-family: 'Kirang Haerang', cursive;
																													</style>