[CSS] font-family 지정하기 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

웹페이지가 디바이스(Windows , Mac , Linux , iPhone , Android )에 최적화된 폰트로 보이도록 font-family 를 순차적 적용 방법입니다.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body, input, select, textarea {
    font-family: 'Noto Sans KR', 'Noto Sans', 'Apple SD Gothic Neo', 'AppleSDGothicNeo-Light', '나눔고딕', 'Nanum Gothic', '맑은고딕', 'Malgun Gothic', "Open Sans", "sans-serif", "돋움", 'dotum' ;
}
</style>