티스토리 뷰

카테고리 없음

나눔고딕 다운 및 적용하기

아빠가출군할떈 뽀뽀뽀 2024. 6. 3. 04:01

나눔고딕은 한글 웹폰트로 널리 사용되는 서체 중 하나입니다. 이 글에서는 나눔고딕을 다운로드하고 웹사이트에 적용하는 방법에 대해 안내하겠습니다.

나눔고딕을 다운로드하려면 네이버에서 공식적으로 배포하는 나눔글꼴 홈페이지(https://hangeul.naver.com/2017/nanum)를 방문해야 합니다. 해당 사이트에서는 다양한 버전의 나눔글꼴을 제공하고 있으니 필요에 맞는 버전을 선택하여 다운로드 받을 수 있습니다. 일반적으로는 '나눔고딕', '나눔고딕 코딩', '나눔고딕 명조' 등이 제공되고 있습니다.

나눔고딕을 다운로드한 후에는 해당 폰트 파일을 웹사이트의 서버에 업로드해야 합니다. 이때, 웹페이지 상에서 해당 폰트를 사용할 수 있도록 CSS(Cascading Style Sheets) 파일을 수정해야 합니다. CSS 파일을 편집하여 웹페이지의 특정 요소에 나눔고딕을 적용할 수 있습니다.

다음은 CSS 파일에 나눔고딕을 적용하는 예시입니다. 먼저, 아래와 같이 CSS 코드를 작성합니다.

css
@font-face {
font-family: 'NanumGothic';


src: url('path/to/your/fontfile/NanumGothic.eot');

적용바법은 추가를 하시면됩니다
src: url('path/to/your/fontfile/NanumGothic.eot?#iefix') format('embedded-opentype'),
url('path/to/your/fontfile/NanumGothic.woff') format('woff'),
url('path/to/your/fontfile/NanumGothic.ttf') format('truetype'),
url('path/to/your/fontfile/NanumGothic.svg') format('svg');

순서대로 적으시면되는데 어려우시면 저한테 말씀해주시면 해드릴게요
font-weight: normal;


font-style: normal;
}

위 코드에서 'path/to/your/fontfile/' 부분은 실제 폰트 파일이 위치한 경로로 변경해주어야 합니다.

그리고 나눔고딕을 사용하고자 하는 요소에 해당 폰트를 적용할 수 있습니다. 예를 들어, 웹사이트의 전체 텍스트에 나눔고딕을 적용하고 싶다면 다음과 같이 CSS를 수정할 수 있습니다.

css

이렇게 하시면 간단하게해보실 수있답니다
body {
font-family: 'NanumGothic', sans-serif;
}

이렇게 하면 웹페이지의 전체 텍스트가 나눔고딕 서체로 표시됩니다.

나눔고딕은 한글 웹폰트로서 가독성이 좋고 깔끔한 디자인으로 많은 사용자들에게 인기가 있는 폰트입니다. 웹사이트를 더욱 전문적으로 보이게 하거나 한국어 사용자들에게 친근한 느낌을 주고 싶다면 나눔고딕을 활용해보세요.