본문 바로가기

웹 폰트

codeConnection 2024. 2. 22.

웹폰트

CSS3부터 웹 폰트를 표준으로 채택하여 웹 페이지에 폰트를 일괄적으로 적용할 수 있게 되었다.

웹 폰트는 직접 업로드하여 변환해 사용할 수 있다.

PC에서 사용하는 폰트는 TrueType(TTF)이나 용량이 커서 웹에서 적합하지 않다. 웹에서는 EOT(Embedded open type)이나 WOFF(Web Open Foot Format)을 사용하며 최근에는 WOFF2 파일도 많이 사용한다.

한글까지 웹 폰트 변환 가능한 사이트 : Transfonter (https://transfonter.org)

 

출처 : 웹 표준의 정석 (고경희 저)

웹 폰트 사용의 기본형 (@font-face)

@font-face {
    font-famliy: <글꼴 이름>;
    src: <글꼴 파일>;
}

 

눈누 웹 폰트 이용 하기

눈누 사이트 https://noonnu.cc/

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

 

1. 웹폰트 찾기

2. 웹폰트 CSS 태그를 복사하여 <style> 내부에 붙여넣기

3. 사용하고자 하는 클래스, ID, 태그에 CSS 적용하기

/* body에서 사용하는 모든 h1 태그에 사용해라. */
h1 {
	font-family:'Ownglyph_meetme-Rg';
    }
/* 이 경우
    
/* body에서 사용하는 모든 body 태그에 사용해라. */
body {
	font-family:'Ownglyph_meetme-Rg';
    }

구글 웹 폰트 이용하기

https://mjmjmj98.tistory.com/17

'Programing > CSS' 카테고리의 다른 글

CSS Grid  (0) 2024.02.24
부트스트랩 사용  (0) 2024.02.22
별도의 CSS 파일을 불러 모든 웹페이지에 동일하게 적용하기  (0) 2024.02.22
CSS Media Query  (0) 2024.02.22
CSS의 기본 문법  (0) 2024.02.22

댓글