Wicked PDFでカスタムフォントを使う.

フォントファイルをCDNからで読み込む場合

スタイルシートで @font-face を定義し,wicked_pdf_stylesheet_link_tag で読み込むだけ.

app/assets/stylesheets/fonts.sass.erb
@font-face
  font-family: 'Noto Sans JP'
  font-style: normal
  font-weight: normal
  src: local("Noto Sans CJK JP"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype')

.custom-font
  font-family: "Noto Sans JP"
  font-weight: normal
  font-style: normal

ローカルに"Noto Sans CJK JP"がなければWebフォントの"Noto Sans JP"を利用するCSSの指定方法 のようにローカルに存在しないときにのみ、CDNから読み込むようにもできる.

app/assets/stylesheets/application.sass
/*
 *= require_self
 */
@import fonts
app/assets/views/layouts/pdf.html.slim
doctype html
html lang='ja'
  head
    meta charset="utf-8"
    = wicked_pdf_stylesheet_link_tag 'application'
  body
    .custom-font
      = yield

フォントファイルをプロジェクトに追加するパターン

フリーのIPAフォントなどをダウンロードしプロジェクトに追加する.
image.png

app/assets/stylesheets/fonts.sass.erb

@font-face
  font-family: 'IPAex Gothic'
  font-style: normal
  font-weight: normal
  src: url('<%= font_path('ipaexg.ttf') %>') format('truetypee')

@font-face
  font-family: 'IPAex Mincho'
  font-style: normal
  font-weight: normal
  src: url('<%= font_path('ipaexm.ttf') %>') format('truetype')

.custom-font
  font-family: 'IPAex Gothic' // or 'IPAex Mincho' 使いたい方を指定
  font-weight: normal
  font-style: normal

他は,CDNで読み込む場合と同じ.

CDNで読み込んだcssファイル内のフォントが設定されない問題

例えばfontawesomeを = stylesheet_link_tag 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' のように読み込んでいるケースで,Trouble with FontAwesome Iconsのようにアイコンが表示されない問題が発生する.
この問題はfont-awesome-railsを使っていれば解決される.

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.