AWS EC2にデプロイした際にカスタムフォントの反映がされない場合の解決法について
現象:以下2点の記事を参考にやったが、反映されない。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNDM1NTE3JTJGcHJvZmlsZS1pbWFnZXMlMkYxNTY3NDQwNzg5P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTY0YjAxNWMwOTI1NWI5ZjkyMDMwYTVjZGEwMjFlNGZi%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3D534e379797f91f6a01766f1994a83b0c?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUmFpbHMlNUQlRTMlODIlQUIlRTMlODIlQjklRTMlODIlQkYlRTMlODMlQTAlRTMlODMlOTUlRTMlODIlQTklRTMlODMlQjMlRTMlODMlODglRTMlODElQUUlRTQlQkQlQkYlRTclOTQlQTglRTYlOTYlQjklRTYlQjMlOTUmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1jNmM3N2E0N2U0ZjllYzAwMmU0Y2RjMTEwNzYxOWJmMA&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBkaXJfc2gwNjA2JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9MGU4NmI4ZTQ5YzlkZWY5OTk1NGY3OTBkN2E2Y2MwNGM&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=2429660de673b05a01c51f77a11fbc68)
[Rails]カスタムフォントの使用方法 - Qiita
#はじめに個人アプリを作成する際にカスタムフォントを使用して文字のデザインを変更したので、その方法についてと本番環境でカスタムフォントが適用されなかったので本番環境で適用させる方法について書きたい…
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYxMDA5MDUzJTJGNGYwMDkxOWMyNDBjNWM0MTczNDEyOTdlZGY2YTExZjZjOWQ2MTNmOCUyRmxhcmdlLnBuZyUzRjE2MTYxMjExNTg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZWVlM2UwYWViZThhNzAwMTlhNTlkZjczMzc5MmNmODg%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3D21a4ab5e5b4f7e947e4bd88bc8bba5ef?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUmFpbHMlNUQlRTMlODMlODclRTMlODMlOTclRTMlODMlQUQlRTMlODIlQTQlRTMlODElOTclRTMlODElOUYlRTYlOTklODIlRTMlODElQUIlRTMlODIlQUIlRTMlODIlQjklRTMlODIlQkYlRTMlODMlQTAlRTMlODMlOTUlRTMlODIlQTklRTMlODMlQjMlRTMlODMlODglRTMlODElOEMlRTUlOEYlOEQlRTYlOTglQTAlRTMlODElOTUlRTMlODIlOEMlRTMlODElQUElRTMlODElODQlRTQlQjglOEQlRTUlODUlQjclRTUlOTAlODgmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz02Yjc3OWFhMWI2YjQzZTg4ZDNkODQ5YjBlYmQzNGZiOA&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5dXV5YV9taWxhbjIyJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZGFiYzJlOTU3NTUzNTIyMWUwMjY5MjUxYWY1NTE4NDg&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=f60410e1d56d88d8b065bc6af529ffc4)
[Rails]デプロイした時にカスタムフォントが反映されない不具合 - Qiita
始めて3ヶ月の初学者で、初投稿になります。アウトプットを兼ねて投稿します。どうぞお手柔らかにお願い致します!間違いなどありましたらご指摘いただけるとありがたいです。#はじめにPF作成するに…
というより、scssファイルのsrcをasset_urlにするとローカル環境でもフォント変更が反映されない。
対処法
プリコンパイルされるpublicディレクトリに直接ファイルを入れてしまう。
格納ファイル public/fonts
scssファイル記載方法
@font-face {
font-family: 'Qarmic_sans_Abridged';
src: url('/fonts/Qarmic_sans_Abridged.ttf') format("truetype");
font-weight: normal;
font-style: normal;
}
これでできる!
この記事を書いていて判明した!!!
参考にした記事と、cssの記載ファイルが違う!!!
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRmF2YXRhcnMzLmdpdGh1YnVzZXJjb250ZW50LmNvbSUyRnUlMkYzMjE4NjMyOSUzRnYlM0Q0P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTFhMzFjNTA2NTU0MjQ3MTU2YzljZDIwOWVkMmFjODM5%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3D021def5ecd065dfd95dee43f5146d2cc?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgwJTkwJUU1JTg4JTlEJUU1JUFEJUE2JUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJUUzJTgwJTkxUmFpbHMlRTMlODIlQTIlRTMlODMlOTclRTMlODMlQUElRTMlODIlQjElRTMlODMlQkMlRTMlODIlQjclRTMlODMlQTclRTMlODMlQjMlRTMlODElQUIlRTMlODIlQUIlRTMlODIlQjklRTMlODIlQkYlRTMlODMlQTAlRTMlODMlOTUlRTMlODIlQTklRTMlODMlQjMlRTMlODMlODglRTMlODIlOTIlRTglQkYlQkQlRTUlOEElQTAlRTMlODElOTklRTMlODIlOEIlRTYlOTYlQjklRTYlQjMlOTUmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1iZDI1M2EwMmE5NWQyYjc1YWZjN2IwOTNiY2JkODBjNQ&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBUa0Rva3VnYWt1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9NDFkZGM4YjViMTZhZDM4ZjY3ZWM2OWM4ZGU3MmQxYjY&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=bb5ef8239b8120aa62cd890173745d7a)
【初学者向け】Railsアプリケーションにカスタムフォントを追加する方法 - Qiita
*本記事執筆時点での私の環境はRuby 2.6.3p62, Rails 5.1.6です。環境が違う場合同じ様に動作しない場合もありますのでご注意下さい。アプリケーションがある程度仕上がり始めると、…
もともと、この当たりの記事を参考にしていたため、cssをassets/stylesheets/application.cssに記述していた。
しかし!assets/stylesheets/font.scssに記載する必要があった!!
学んだこと
asset_urlのヘルパーメソッドはapplication.cssでは使えないが、font.scssでは使える!
コメント