HTML_CSS_039_웹폰트

CSS

/* google-font 형식 */
@import url('url_주소');
 html > body{
 font-family: 'font_name'; 
/* google-roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap');
/* 눈누-font 형식 */
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.font-roboto{
	font-family: "Roboto", sans-serif;
}
.font-sans{
	font-family: "GmarketSansMedium"
}
/* 한 문장에 영문한글 둘다 적용시 */
.font-eng-kor{
	font-family: "Roboto", "GmarketSansMedium";
}

폰트 팁

• 사이즈를 일반적으로 400size 폰트를 불러와 font-weight , font-size : bold, 2~4rem; 값으로 굵기를 굵게 한다. (데이터 절약)
• 2개 이상의 폰트 사용시 class를 만들어 사용한다.
• 한 문장에 영어, 한글 다른 폰트 각각 사용 시 font-family에 영어스타일, 한글스타일로 배치하여 영어읽히고 한글 읽히는 순으로 배치한다.

참고

• 영문폰트 : google-font

• 한글폰트 : 눈누