CSS @ font-face 규칙
웹 글꼴을 사용하면 웹 디자이너는 사용자 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있습니다.
사용하려는 글꼴을 찾거나 구입 한 경우 웹 서버에 글꼴 파일을 포함 시키면 필요할 때 자동으로 사용자에게 다운로드됩니다.
/fonts 폴더에 폰트를 저장 후 css에서 폰트를 연결합니다.
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
자주 사용하는 웹폰트
CDN 글꼴을 웹 페이지에 포함 시키려면 아래 코드를 HTML 문서의 <head>태그 안에 붙여넣시오 .
아래는 자주 사용하는 글꼴 모음입니다.
link 방식
<!-- Noto Sans KR -->
<link href = "https://fonts.googleapis.com/css?family= Noto + Sans + KR & display = swap" rel = "stylesheet">
<!-- Nanum Gothic -->
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
<!-- Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Nanum Square -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css">
<!-- Nanum Squareround -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css">
import 방식
/* Noto Sans KR */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
html, body, th, td, input, select, textarea, button {font-family: 'Noto Sans KR', sans-serif;}
/* Nanum Gothic */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');
html, body, th, td, input, select, textarea, button {font-family: 'Nanum Gothic', sans-serif;}
/* Roboto */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
html, body, th, td, input, select, textarea, button {font-family: 'Roboto', sans-serif;}
/* Nanum Square */
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
html, body, th, td, input, select, textarea, button {font-family: 'NanumSquare', sans-serif;}
/* Nanum Squareround */
@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');
html, body, th, td, input, select, textarea, button {font-family: 'NanumSquareRound', sans-serif;}
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
나눔스퀘어
https://github.com/eehd80/NanumSquare
eehd80/NanumSquare
나눔스퀘어 웹폰트 (NanumSquare Webfont). Contribute to eehd80/NanumSquare development by creating an account on GitHub.
github.com
나눔스퀘어 라운드
https://github.com/eehd80/NanumSquareRound
eehd80/NanumSquareRound
나눔스퀘어라운드 웹폰트입니다. NanumSquareRound webfont. Contribute to eehd80/NanumSquareRound development by creating an account on GitHub.
github.com
https://www.w3schools.com/css/css3_fonts.asp
CSS Web Fonts
CSS Web Fonts The CSS @font-face Rule Web fonts allow Web designers to use fonts that are not installed on the user's computer. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically
www.w3schools.com
'Publishing > CSS3' 카테고리의 다른 글
| CSS Backgrounds (0) | 2020.02.21 |
|---|---|
| CSS Text (0) | 2020.02.21 |
| CSS Fonts (0) | 2020.02.18 |
| 가상 선택자 (0) | 2020.02.17 |
| CSS 속성(Attribute) 선택자 (0) | 2020.02.14 |