웹폰트 적용
링크나 도메인, 브라우저와 상관없이 웹페이지 내에서 폰트가 연결되어지는 것
일반적으로 스타일을 이용해서 연결하는 방법 >> 내 컴퓨터에 설치된 폰트가 존재
cdn 링크를 이용하여 서버상 폰트를 가져와 웹페이지에 전달하는 방법 >> 느려지거나 폰트가 나타나지 않는 경우가 생길 수도 있다.
@font-face >> 파일을 다운받거나 가져와서 문서와 직접 연결하여 폰트를 선언하는 방식, 빠르게 웹사이트에 적용, 오류가 적으나 폰트 확장자를 구해와야 한다는 단점이 있다.
1. @font-face
사이트 '눈누'에서 폰트를 가져옴.
https://noonnu.cc/font_page/pick
style 태그 안 제일 상단에 넣어주면 된다.
<style>
@font-face {
font-family: 'Ownglyph_ParkDaHyun';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2411-3@1.0/Ownglyph_ParkDaHyun.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
*{ /* * 은 전체에 적용 . 원한다면 h1만 부분적용하거나 기호에 맞게 사용하면 된다.*/
font-family: 'Ownglyph_ParkDaHyun';
/* font-weight: 40; 적용 가능 범위를 보고 사용해주면 된다. */
}
</style>구글 폰트에서 다운받아서 사용하는 예시
<style>
@font-face {
font-family: "NanumGothic" ;
/* 폰트 이름 선언 / 해당 폰트의 일음을 임의로 넣을 수 있다 >> 적용할 곳에 font-family sjgrl; */
src: url(NanumGothic.eot), url(NanumGothic.woff) format('woff');
/* src : url(http://웹포트경로)
format("폰트포맷")
폰트 확장자를 모두 붙여야한다.
woff 폰트 파일은 웹에서 사용하기 위해0 설계된 파일 형식*/
}
.text1{
font-family : "NanumGothic" ;
}
</style>2. 구글 폰트
link 방식
https://fonts.google.com/
구글 폰트에서 가져옴.
원하는 폰트를 검색 후 embeded code에서 코드 복사
Embeded code in the <head> of your html
에 있는 코드를 복사하여 head 부분 상단에 넣어주면 된다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>그리고 style 태그 안에 font-family 적용
<style>
p{
font-family: "Roboto", sans-serif;
}
</style>import 방식
style 태그 안에 넣어서 사용
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
.test2{
font-family: "Roboto", sans-serif;
}
</style>유료 폰트로는 산돌구름 사이트 사용해도 됨.
