로컬 폰트를 웹폰트로 적용하는 방법

로컬폰트를 웹폰트로 적용하는 방법 ⓒdbre

 

로컬 폰트를 웹폰트로 적용하는 방법

로컬에 설치된 폰트 파일을 웹사이트에서 사용하고 싶지만, 제공되는 웹폰트 링크가 없다면 다음과 같은 방법을 통해 웹폰트로 사용할 수 있습니다.

 

1. 웹폰트 적용 css 코드 작성

먼저, 아래의 CSS 코드를 작성하여 웹폰트를 설정합니다 :

@font-face {
font-family: 'NanumSquare';
font-weight: 400;
src: url(NanumSquareR.eot);
src: url(NanumSquareR.eot?#iefix) format('embedded-opentype'),
url(NanumSquareR.woff) format('woff'),
url(NanumSquareR.ttf) format('truetype');
}

이 코드를 'style.css' 또는 'fonts.css'와 같은 파일에 넣습니다. 해당 파일의 최상단에 위치시키는 것이 좋습니다.
이후, 원하는 HTML 아래와 같이 폰트를 적용합니다.

 

div {
    font-family: 'NanumSquare', Arial;
    font-weight: 500;
    font-size: 12px;
}

 

 

2. 폰트 파일 웹 업로드

폰트를 적용하기 위해서는 로컬 폰트 파일을 웹 서버에 업로드해야 합니다.
웹폰트로 사용하기 위해 필요한 파일 형식은 'eot', 'woff', 'ttf' 입니다.

보통 로컬에 설치된 폰트 파일은 'ttf', 또는 'otf' 형식입니다. 웹폰트로 변환하려면 아래의 사이트를 이용하여 파일 형식을 변환할 수 있습니다.

 

웹폰트 파일 형식 변환

Convert otf to ttf | Everything Fonts

 

Everything Fonts 에서는 otf 파일을 ttf 파일로 변환할 수 있습니다. 다른 파일 형식으로도 변환이 가능합니다.

 

3. 라이선스 확인

폰트 파일을 사용할 때는 반드시 해당 폰트의 라이선스를 확인하고 사용하는 것이 중요합니다. 상업적 사용이 가능한지, 배포가 허용되는지 등을 확인해야 법적 문제가 발생하지 않습니다.

 

추가로 도움이 되는 정보

 

Google Fonts : 다양한 무료 웹폰트를 제공하며, 사용법도 간단히 안내되어 있어 쉽게 적용할 수 있습니다.

Browse Fonts - Google Fonts

 

Font Squirrel : 고품질의 무료 웹폰트를 제공하며, 웹폰트 변환기를 통해 다양한 형식으로 변환할 수 있습니다.

Free Fonts! Legit Free & Quality » Font Squirrel

 

Typekit by Adobe : 유료 서비스이지만 다양한 고품질의 폰트를 제공하며, 간단히 웹사이트에 적용할 수 있습니다.

Adobe Fonts

 

 

이 정보를 참고하여 웹사이트에 로컬 폰트를 쉽게 적용해보세요.