Rails demo fonts icons dont work in production
When you deploy the app the fonts are not working due to it is taking font asset url and get 404, because the font asset url is complied and has the compiled name. It should use font-url or something.
Replies (16)
Hi Maria,
Could you please let me know which font is causing the issue? Additionally, it would be helpful if you could send me a screenshot of the problem.
To share the image, you can use a website like imgbb.com and share the link here.
Thanks
Hi, Its related to use font-url in the font-face .css for the keenicons fonts. My workaround using gulp is change url to font-url in keenicons style.css. Change style.css in each keenicon to style.scss. Execute gulp and manually change the plugins.bundle.css to plugins.bundle.scss.
The problem is that servers like heroku in production needs font-url instead url for the fonts.
Please work on a solution to do this better.
Thank you
This workaround is not working well due to the way that master layout load css files and not scss. Could you please send me a workaround in how to get the right fingerprint path for assets in production?
Please tell me something soon. It has production impact
Hi,
We use https://icomoon.io/ service to generate our KeenIcons web fonts version. It uses following default CSS code for the fonts:
@font-face {
font-family: "keenicons-duotone";
src: url("fonts/keenicons-duotone.eot?eut7fk");
src: url("fonts/keenicons-duotone.eot?eut7fk#iefix") format("embedded-opentype"),
url("fonts/keenicons-duotone.ttf?eut7fk") format("truetype"),
url("fonts/keenicons-duotone.woff?eut7fk") format("woff"),
url("fonts/keenicons-duotone.svg?eut7fk#keenicons-duotone") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}Now you are suggesting changing the default code to use
font-url like this?@font-face {
font-family: "keenicons-duotone";
src: font-url("fonts/keenicons-duotone.eot?eut7fk");
src: font-url("fonts/keenicons-duotone.eot?eut7fk#iefix") format("embedded-opentype"),
font-url("fonts/keenicons-duotone.ttf?eut7fk") format("truetype"),
font-url("fonts/keenicons-duotone.woff?eut7fk") format("woff"),
font-url("fonts/keenicons-duotone.svg?eut7fk#keenicons-duotone") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}I checked the CSS code of Fontawesome and they also use the same
url method in your CSS: https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css.We will do R&D on this further. In the meantime, you can consider changing the KeenIcons source code in
src/plugins/keenicons/duotone/style.css, src/plugins/keenicons/solid/style.css, src/plugins/keenicons/outline/style.css and recompile it for your production and test if it works well.Regards.
The problem is not change that, the problem is that font-url needs scss files not css, so when you build with gulp it doesn't work because it is expecting css not scss file, and the same in the layout.
Coud you give me a workaround?
Hi,
Can you please explain the problem in more detail?
Are you compiling the Metronic assets with your own compiler or using our in-house webpack or gulp compiler? If you are using our gulp compiler then there should not be any issue. Please note that currently, Metronic's assets serve only css/js files, no scss files are generated.
Can you provide us with a test URL in a private reply? This is not a general issue, so far KeenIcons work well for common hosting environments.
Regards.
Its in the Keenicons fonts, I send you the 500 internal error that produces just in production. and this is because He is searching for the font with fingerprint.
Screenshots:
https://ibb.co/tc8LXT3
https://ibb.co/sJmFkcP
https://ibb.co/58LwtnT
And this is the file that don't find:
https://d3fa6pm7onf36.cloudfront.net/assets/global/fonts/keenicons/keenicons-outline.ttf?fzo4bm
because is the fingerprint one that exists as you can check here:
https://d3fa6pm7onf36.cloudfront.net/assets/global/fonts/keenicons/keenicons-outline-3be4db5edc16dcbb5f8b0fe25545b92047c9b3a57c3f1eac5a7c084d6c0cba5c.ttf
Please, quite urgent, tell me something soon, a workaround at least. As I said the font-url could be a solution but you need to have scss andnot css, and gulp compile everything to a css.
Hi,
Thank you for the information.
We are looking at it. At the moment checking this related this and this.
Do these files physically exist in your Heroku server path? It seems your web server does not allow service font files. There is a similar issue for Nginx and apache web servers and usually, this issue can be fixed by just enabling web font file loading in the apache and Ngix config.
Regards.
Hi,
For Heroku case please try the below steps:
1) Move the KeenIcons assets from the source foldersrc/plugins/keenicons into your assets folder dist/assets.
2) Rename all the icons .css file extension to .scss extension.
3) In the icon css files change url to font-url.
Exclude the KeenIcons assets from the Metronic's default gulp/webpack build from assets/plugins/global/plugins.bundle.css.
Regards.
First this is not a solution becuase I am in the rails demo, I dont have disc. Second event a move the fonts files (no css but eot, svg, ttf and woff). And I load them here: Rails.application.config.assets.paths .
I have the same problem because the font-face is defined in a css that gulp convert into a unique css. So event I change the css to scss where the font-face are to understand the font-face, execute the gulp, the result is a plugins.bundle.css (not a scss that can understand the font-url)
Hi Maria,
Let's try to exclude the existing Keenicons from the CSS build and rebuild the other assets using Gulp without including Keenicons.
Please follow these steps as a workaround:
1. Move the "starterkit/_keenthemes/src/plugins/keenicons" folder to the "libs/assets" folder. This will exclude the existing Keenicons from the CSS build process.
2. Rename the file extension of the Keenicons file from ".css" to ".scss" within the Keenicons folder.
3. Edit the SCSS file to make any necessary changes. Eg. url to font-url
4. Use the SCSS files in your application instead of the CSS files.
5. There is no need to rebuild the Keenicons assets. Simply move the folder to the "lib/assets" directory.
6. Import the Keenicons into your Rails application as needed.
Thanks
Finally I have resolved:
1) Moving the assets to my app/assets/fonts
2) Loading the fonts in config>initializer>assets.rb
# Add additional assets to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
3)In the manifest app>assets>config>manifest.js
//= link_tree ../fonts
4)Moving the style.css of each keenicon to app>assets>stylesheet
"fonts_duotone_style.scss",
"fonts_outline_style.scss",
"fonts_solid_style.scss",
5)Renaming the style.css to style.scss
6)Changing url to font-url
7)Adding the style files to keentheme settings in variable KT_THEME_ASSETS "css"
"fonts_duotone_style.css",
"fonts_outline_style.css",
"fonts_solid_style.css",
Hi 
,
Looks great, glad to hear that it managed to resolve it. We will check this further and mention it in our Rails Starter Kit docs.
Appreciate you sharing this solution.
Regards.
thank you, you saved my time
Since in might be useful to other people I'll add my very simple solution to make the fonts work in production (Heroku).
I don't know if this could have worked at the time of Maria's problem, but for me the only thing I had to change was the relative path of the various URLs in "plugins.bundle.css" from url("assets/global/fonts/[...]") to simply url("fonts/[...]"). And it continue to work in development.
I hope this helps someone else.
