한글폰트를 무료 제공하는 곳

구글 earlyaccess

사이트

https://fonts.google.com/earlyaccess

자주 사용하는 폰트

제주 고딕

https://fonts.google.com/earlyaccess#Jeju+Gothic

나눔 고딕

https://fonts.google.com/earlyaccess#Nanum+Gothic

네이버 나눔 글꼴

http://hangeul.naver.com/2016/nanum

사이트에 구글 Earlyaccess 한글 폰트 적용하기

제주 고딕을 사이트에 적용하는 예

  • AssInjector을 사용하는 경우 Css Injector에 다음 내용이 담긴 파일을 생성한다.
  • themes/custom/*/css/theme/local-theme.css 에 다음 내용을 저장한다음 캐쉬를 비워준다.
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);

@font-face {
  font-family: 'Jeju Gothic', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.tp-caption__title, .tp-caption__subtitle,
.site-name, .site-slogan,
.nav-tab__title {
    font-family: 'Jeju Gothic', sans-serif !important;
}

Morethanthme에 구글 Earlyaccess 한글 폰트 적용하기

위의 방법으로 적용해도 되지만, "관리자>모양>설정>Font Settings"에 추가한 웹폰트가 목록에 뜨게 하려면 다음과 같이 해야 한다.

StylePlus D8 테마 "제주 고딕" 폰트를 추가하는 예이다.

1. styleplus.libraries.yml 파일을 열어 파일의 끝부분에 새로운 폰트를 추가한다.

StylePlus는 fonts-id중 마지막 폰트 ID가 42이므로, 새로운 fonts-id를 43을 사용한다.

fonts-id-43:
  version: VERSION
  remote: //fonts.googleapis.com/earlyaccess/jejugothic.css
  css:
    theme:
      //fonts.googleapis.com/earlyaccess/jejugothic.css: { type: external }
  license:
    name: SIL Open Font License, 1.1
    url: http://scripts.sil.org/OFL
    gpl-compatible: true

2. theme-settings.php 해당 부분을 찾아 다음을 추가

      'sff-43' => t('Jeju Gothic, Sans-serif'),
      'slff-43' => t('Jeju Gothic, Sans-serif'),
      'hff-43' => t('Jeju Gothic, Sans-serif'),
      'pff-43' => t('Jeju Gothic, Sans-serif'),

3. css/base/typography.css 에서 body.pff-42와 hff-42의 아랫부분인 673L에 다음 항목 추가

body.pff-43 {
    font-family: ‘Jeju Gothic’, sans-serif;
}

---------------------------------------------------------------------------------------------------

.hff-43 h1,
.hff-43 h2,
.hff-43 h3,
.hff-43 h4,
.hff-43 h5,
.hff-43 h6,
.hff-43 .tp-caption__title,
.hff-43 .tp-caption__subtitle,
.sff-43 .site-name,
.slff-43 .site-slogan,
.hff-43 .nav-tab__title {
  font-family: 'Jeju Gothic', sans-serif;
}

4. 관리자 페이지에서 폰트설정 수정

위치: 홈 >> 관리 >> 모양 >> Appearance settings >> Font Settings (admin/appearance/settings/styleplus)

모든 항목의 폰트를 “Jeju Gothic”으로 변경

네이버 나눔스퀘어 폰트 설치

폰트 다운로드:http://hangeul.naver.com/2016/nanum

적용방법 참조:http://www.leunkim.com/others/word-press-tips/nanum_square_font/

순서

  1. ttf폰트를 웹용인 woff로 변환.https://andrewsun.com/tools/woffer-woff-font-converter/

  2. css/fonts 디렉토리 생성후 폰트 업로드

  3. CSS Injector 또는 css/base/local-base.css 에 다음 코드 입력

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

동일 파일 또는 css injector를 이용해서 다음 코드 삽입

h1, h2, h3, h4, h5, h6,
.tp-caption__title, .tp-caption__subtitle,
.site-name, .site-slogan,
.nav-tab__title {
    font-family: 'NanumSquareR', sans-serif !important;
}

results matching ""

    No results matching ""