본문 바로가기
CSS3

CSS Web font

by 이상한 코드 봄똥 2020. 2. 20.

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;}

 

https://fonts.google.com/

 

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

 

'CSS3' 카테고리의 다른 글

CSS Backgrounds  (0) 2020.02.21
CSS Text  (0) 2020.02.21
CSS Web font  (0) 2020.02.20
CSS Fonts  (0) 2020.02.18
가상 선택자  (0) 2020.02.17
CSS 속성(Attribute) 선택자  (0) 2020.02.14

댓글0