font-family 속성
웹 문서에서 사용할 글꼴 지정
사용자 시스템에 있는 경우
font-family : "맑은 고딕", 돋움, 굴림 지정한 글꼴이 없을 경우에 대비해 여러 개 지정한다.
맑은 고딕은 띄어쓰기가 있어 ""사이에 적는다.
사용자 시스템에 없는 글꼴인 경우
1. @import 사용하기
@import 문을 CSS파일 맨 위에 붙여넣기 하고, font-family도 복사-붙여넣기 해주면 된다.
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
h1 {
font-family: 'New Tegomin', serif;
}
2. link 사용하기
link 문을 html의 head 부분에 붙여넣기 하고, font-family를 작성한다.
<!DOCTYPE html>
<html>
<head>
...
<!-- link 추가 -->
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=New+Tegomin&family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
<title>font-family Practice</title>
</head>
<body>
<h1>hello</h1>
</body>
</html>h1 {
font-family: 'Dela Gothic One', cursive;
}
3. @font-face
눈누에서는 @font-face로 폰트를 제공해주고 있다.
@font-face {
font-family: 'NanumBarunpen';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumBarunpen.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Love_son';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_07@1.0/Love_son.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: NanumBarunpen;
}
h2 {
font-family: 'Love_son';
}
응용으로 로컬에 다운받은 폰트도 적용할 수 있다. 디렉토리에 폰트를 넣어준 후, url만 수정해주면 된다.
걸음마코더