Last active
August 15, 2023 22:53
-
-
Save msyvr/8f1aebf67681ab160e152a995b2ac702 to your computer and use it in GitHub Desktop.
Getting custom fonts to work for Rails 5 app deployed to Heroku.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
I deployed to Heroku and custom fonts didn't work. Details of my starting point below. | |
Fixed in 2 steps: | |
1. In application.rb file, in class Application < Rails::Application, added: | |
config.assets.paths << Rails.root.join("app","assets","fonts") | |
2. In application.scss file, in @font-face, changed src: url('...') to font-url('...'); e.g.: | |
src: font-url('Aileron/Aileron-Regular.otf') format('opentype'); | |
Redeployed to Heroku and custom fonts worked. | |
--- | |
Starting point details (this all worked for a local deploy, but not when deployed on Heroku): | |
1. | |
Custom font folders (one for each font family) added to the app/assets/fonts directory: | |
daartly/app/assets/fonts/Aileron | |
daartly/app/assets/fonts/Megrim | |
2. | |
Fonts added to the application.scss file: | |
@font-face { | |
font-family: 'Aileron'; | |
src: url('Aileron/Aileron-Regular.otf') format('opentype'); | |
} | |
@font-face { | |
font-family: 'AileronLight'; | |
src: url('Aileron/Aileron-Light.otf') format('opentype'); | |
} | |
@font-face { | |
font-family: 'AileronHeavy'; | |
src: url('Aileron/Aileron-Heavy.otf') format('opentype'); | |
} | |
@font-face { | |
font-family: 'AileronThin'; | |
src: url('Aileron/Aileron-Thin.otf') format('opentype'); | |
} | |
@font-face { | |
font-family: 'Megrim'; | |
src: url('Megrim/Megrim.ttf') format('truetype'); | |
} | |
3. | |
Fonts used in css classes using font-family; e.g.: | |
header { | |
font-family: "AileronLight"; | |
font-size: .8em; | |
background-color: none;/* #f2bf2b;*/ | |
} | |
4. | |
Fonts used directly in html 'style' attributes with font-family (as in the css classes). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you!