Noto Sans KR을 HTML, CSS에 적용하는 방법은 다음과 같습니다.
1. 구글 웹폰트 라이브러리 링크 가져오기
먼저, Noto Sans KR 폰트를 사용하기 위해서는 구글 웹폰트 라이브러리를 가져와야 합니다. 이를 위해서는 아래 코드를 HTML head 태그 안에 추가합니다.
<link rel="stylesheet" href=" https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap " >
2. CSS에서 Noto Sans KR 폰트 지정하기
Noto Sans KR 폰트를 사용하려면 CSS에서 해당 폰트를 지정해야 합니다. CSS에서 font-family 속성을 사용하여 폰트를 지정할 수 있습니다. 아래 코드를 CSS에 추가하여 Noto Sans KR 폰트를 지정합니다.
body {
font-family: 'Noto Sans KR', sans-serif;
}
위 코드에서 sans-serif는 Noto Sans KR 폰트가 적용되지 않을 경우 대체 폰트를 지정하는 것입니다. 따라서, 해당 폰트가 사용 가능한 환경에서는 Noto Sans KR 폰트가 적용되고, 그렇지 않은 경우에는 대체 폰트가 적용됩니다.
3. HTML에서 폰트 적용 확인하기
위의 코드를 추가하면 Noto Sans KR 폰트가 HTML에서 적용됩니다. 아래 코드를 HTML에 추가하여 폰트가 적용되는지 확인할 수 있습니다.
<p>이 문장은 Noto Sans KR 폰트로 표시됩니다.</p>
위와 같이 코드를 추가한 후, 웹 페이지를 새로고침하여 폰트가 적용되는지 확인할 수 있습니다.
4. 주의 사항
웹폰트를 사용할 때 주의해야 할 몇 가지 사항이 있습니다.
1) 폰트 다운로드 시간
웹폰트는 브라우저에서 다운로드하여 사용하기 때문에 다운로드 시간이 필요합니다. 폰트 크기가 크고, 인터넷 연결이 느리면 페이지 로딩 속도가 느려질 수 있습니다. 따라서, 폰트 파일 크기를 최소화하고, 사용되는 글꼴의 수를 최소화하여 페이지 로딩 속도를 개선할 수 있습니다.
2) 폰트 라이선스 확인
웹폰트를 사용하기 전에, 폰트 라이선스를 확인해야 합니다. 상업적인 목적으로 사용하기 전에는 폰트 제작자의 라이선스를 확인하고, 허가를 받아야 합니다.
3) 대체 폰트 설정
웹폰트를 사용하면서, 해당 폰트가 사용자의 컴퓨터나 브라우저에 설치되어 있지 않은 경우, 대체 폰트가 사용됩니다. 따라서, 대체 폰트를 설정하여 디자인이 깨지지 않도록 해야 합니다.
4) 폰트 일관성
웹폰트를 사용할 때는, 폰트 일관성을 유지해야 합니다. 페이지 내에서 다양한 글꼴을 사용하면, 일관성 없는 페이지 디자인으로 인해 사용자의 불편을 초래할 수 있습니다.
5) 브라우저 호환성
웹폰트는 모든 브라우저에서 지원되지 않을 수 있습니다. 따라서, 웹 페이지가 호환되는 브라우저를 지원하는지 확인해야 합니다.
댓글