웹 폰트적용 가이드 알아보기

웹 폰트를 적용하는 방법에 대해 알아보겠습니다.

웹 폰트 선택:
- 웹 폰트는 다양한 온라인 폰트 서비스에서 제공됩니다. Google Fonts (https://fonts.google.com/)는 가장 인기 있는 웹 폰트 서비스 중 하나입니다. 해당 웹사이트에서 다양한 폰트를 검색하고 원하는 폰트를 선택합니다. 폰트를 선택할 때는 웹사이트의 빠른 로딩 속도와 호환성을 고려해야 합니다.
웹 폰트 연결:
- 선택한 웹 폰트를 사용하기 위해 HTML 파일의 <head> 태그 내에 폰트를 연결하는 CSS 코드를 추가해야 합니다. 일반적으로는 <link> 태그를 사용하여 외부 CSS 파일을 연결하는 방식을 사용합니다.
- Google Fonts를 사용하는 경우, 해당 폰트의 페이지에서 제공되는 CSS 코드를 복사하여 HTML 파일에 붙여넣습니다. 예를 들어, <link href="https://fonts.googleapis.com/css?family=Font+Name&display=swap" rel="stylesheet">와 같은 형식입니다.

폰트 스타일 적용:

CSS를 사용하여 웹 폰트를 원하는 요소에 적용할 수 있습니다. 폰트를 사용하고자 하는 요소의 CSS 선택자를 선택한 후 font-family 속성을 사용하여 원하는 폰트를 지정합니다. 예를 들어, h1 제목에 웹 폰트를 적용하려면 다음과 같은 CSS 코드를 사용할 수 있습니다:

h1 {
  font-family: 'Font Name', sans-serif;
}

웹 폰트 사용 테스트 및 디버깅:
- 웹 폰트가 올바르게 적용되는지 확인하기 위해 웹사이트를 테스트하고 디버깅해야 합니다. 웹 브라우저의 개발자 도구를 사용하여 CSS 규칙이 올바르게 적용되었는지 확인하고, 폰트가 로드되는지 확인합니다. 또한, 다양한 기기와 브라우저에서 웹 폰트가 제대로 표시되는지 확인하는 것이 중요합니다.

위의 가이드를 따라 웹 폰트를 적용할 수 있습니다. 웹 폰트를 사용하면 웹사이트의 디자인과 텍스트 표시에 맞는 다양한 폰트를 선택할 수 있습니다.

본고딕 (Noto Sans KR)

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
body{
font-family: 'Noto Sans KR', sans-serif;
}

KoPub 바탕 (kopubbatang)

@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css); 
body{ font-family:'KoPub Batang', serif; }

제주한라산 (Jeju Hallasan)

@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css); 
body{ font-family: 'Jeju Hallasan', serif; }

제주고딕 (Jeju Gothic)

@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css); 
body{ font-family: 'Jeju Gothic', serif; }

나눔손글씨펜 (Nanum Brush Script)

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css); 
body{ font-family: 'Nanum Brush Script', serif; }

나눔고딕코팅 (Nanum Gothic Coding)

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css); 
body{ font-family: 'Nanum Gothic Coding', serif; }

나눔명조 (Nanum Myeongjo)

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css); 
body{ font-family: 'Nanum Myeongjo', serif; }

나눔고딕 (Nanum Gothic)

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
body{ font-family: 'Nanum Gothic', serif; }

일본어 웹폰트 적용

@import url();
@import url();
@import url();
@import url();

body{
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Meiryo, "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif; 
}

ex)Google

body{
font-family: arial, sans-serif;
}

ex)Yahoo! Japan

body{
font-family: "MS PGothic", "Osaka", Arial, sans-serif;
}

ex)Facebook

body{
font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
}

ex) Rakuten (일본사이트)

body{
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

ex)cookpad (일본사이트)

body{
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}