【Rails6】カスタムフォントの使い方
はじめに
先日、以下の記事を拝見しました。
フリーフォント好きに朗報!Fontworksから日本語フォント8書体がSILライセンスで公開、商用利用も完全に無料
こちらで紹介されている「クレーOne」が僕のRailsポートフォリオテーマの雰囲気にぴったりなフォントだったので導入してみました!
開発環境
- MacOS Catalina 10.15.7
- ruby 2.7.1
- rails 6.0.3.4
フォントデータのダウンロード
GitHubからフォントデータをダウンロードします。
https://github.com/fontworks-fonts/Klee
フォントデータの場所
fonts/ttf/KleeOne-Regular.ttf
開発環境に配置
僕の開発環境ではCSSや画像ファイルなどをwebpackerで管理しているので、フォントデータも同じように配置しました。(※fontsフォルダは新規作成しています。)
app/javascript/fonts/KleeOne-Regular.ttf
なお、Rail5の環境でカスタムフォントを導入されている方の記事では、app/assets/fonts/ に配置されているようです。
フォントデータの読み込み
CSSファイルに以下を記述します。ファイルのパスは僕の環境の場合なので、みなさんの環境にあわせて読み替えてください。
@font-face {
font-family: "kleeone";
src: url('../fonts/KleeOne-Regular.ttf');
}
設定項目 | 設定値 |
---|---|
font-family | このフォントを使用する際のクラス名を好きな名前で名付けます |
url | フォントデータのパス(場所) |
フォントデータのパスについてはCSSファイルからの相対パスになっています。
フォントデータの場所
app/javascript/fonts/KleeOne-Regular.ttf
CSSファイルの場所
app/javascript/stylesheets/custom.scss
CSSファイルのある stylesheetsフォルダから見て、フォントデータは1つ上の javascriptフォルダの中の fontsフォルダにあるので、 ../ で1つ上に上がってそこからのパスを記述しています。(../ は app/javascript と同義です。)
カスタムフォントの適用
実際に使用したい部分に記述します。僕はアプリケーション全体に適用したかったので、bodyタグに記述しました。
body {
font-family: "kleeone"
}
見た目の違い
僕のポートフォリオでは仏像やお寺をテーマにしているのですが、それっぽい感じの雰囲気が出ていると思います。(笑)
適用前
適用後
Author And Source
この問題について(【Rails6】カスタムフォントの使い方), 我々は、より多くの情報をここで見つけました https://qiita.com/masarashi/items/485cd32b1bf7ceae2ed7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .