사용자 폰트 사용하기 2

저자는 2015년 6월경 “사용자 폰트 사용하기“라는 제목으로 블로깅했었습니다.
실제로 현장에서 개발시 폰트를 추가할 때마다 귀찮은 일이 아닐 수 없었습니다.
그래서 JARED SARTIN 글을 자세히 읽어 보니까 레일스 개발환경에서 설정파일과 rake 파일을 추가하면 자동으로 assets으로 폰트를 등록해 준다는 것을 알게 되었습니다.

설명한데로 따라했으나 최근에 macOS를 high sierra로 업그레이드해서 그런지 폰트 컴파일 작업시 오류가 발생하였습니다.

구글 검색을 해보니 아래와 같이 동일한 오류가 이미 이슈로 등록되어 있었고 운좋게 해법도 제시되어 있어 쉽게 오류를 수정할 수 있었습니다.

Error fontforge’ compilation failed – need help #347

핵심은 에러가 발생하는 파일을 열고, 다음과 같이 수정하는 것입니다. (로컬에 설치된 젬의 소스를 직접 패치하면 됩니다.)

tmpsvgfile.file.write(svgtext.decode('utf-8').encode('utf-8'))

이제 터미널의 프로젝트 폴더에서 다음과 같이 rake 작업을 수행하면,

$ bundle exec rake icons:compile
Compiling icons...
      create  app/assets/fonts/icons.ttf
              app/assets/fonts/icons.svg
              app/assets/fonts/icons.woff
              app/assets/fonts/icons.eot
              app/assets/fonts/icons.woff2
      create  app/assets/stylesheets/_icons.scss

이 전 글에서처럼 헬퍼 메소드를 그대로 사용하기 위해서 _icons.scss 파일을 다음과 같이 수정하였습니다.

//
// Icon Font: icons
//

@font-face {
  font-family: "icons";
  src: asset-url("icons.eot");
  src: asset-url("icons.eot?#iefix") format("embedded-opentype"),
       asset-url("icons.woff2") format("woff2"),
       asset-url("icons.woff") format("woff"),
       asset-url("icons.ttf") format("truetype"),
       asset-url("icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "icons";
    src: asset-url("icons.svg#icons") format("svg");
  }
}

[data-icon]:before { content: attr(data-icon); }

[data-icon]:before,
.fac:before {
  display: inline-block;
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.fa-4x {
  line-height: 1.5em;
}

.fa-2x {
  line-height: .75em;
}

변경한 내역은 다음과 같습니다.

주의 : 아이콘 컴파일한 후 생성된 _icons.scss 파일의 폰트 url(…)asset-url(…) 로 변경해야 배포 전 assets pre-compile 단계에서 아이콘 폰트의 주소가 정확하게 지정됩니다.

이제 뷰 파일에서 다음과 같이 사용할 수 있습니다.

<%= fac_icon('stories') %>
<%= fac_icon('home', class: 'fa-4x') %>

향후 폰트 아이콘을 assets/icons/ 폴더에 추가하거나 수정할 경우에는 bundle exec rake icons:compile 명령을 실행하고 생성된 _icons.scss 파일을 위와 수정하여 사용하면 됩니다.

https://www.joogoni.com 에서 위의 아이콘 폰트가 적용된 예를 볼 수 있습니다.

Posted in 미분류. Bookmark the permalink.