I have a small Next.js app that uses a local #font-face. Everything works fine in the dev environment.
The font .woff file is stored in /public/webfonts. The #font-face import is in the globals.css file:
#font-face {
font-family: 'My Font';
src: local('My Font'), local('My-Font'),
url('../public/webfonts/My-Font.woff')
format('woff');
font-weight: normal;
font-style: normal;
}
I've deployed my app using the GitHub actions next.js workflow. The CSS and images are loaded fine but the font is not.
If I try to load the font with a path starting with '/' it throws a 404 error since the base URL is my-user.github.io and not my-user.github.io/my-repo.
If I try to load the font with a relative path it throws a CORS error.
I've searched online and found various answers recommending basically opposite solutions, but nothing works for me.
Anyone with any up-to-date info on how to tweak this issue?
Related
Background
I have MaterialFX as an external dependency for my JavaFx project. The project tries to recreate the demo shown in the MaterialFX project. My project uses Gradle (build script in Kotlin).
The demo uses custom fonts provided in its resource path in a javaFxStylesheet.css file to style e.g. the JavaFX Labels:
/*javaFxStylesheet.css*/
#import '../fonts/Fonts.css';
.header {
-fx-font-family: <fontname>`
}
where Fonts.css has multiple entries like
/*Fonts.css*/
#font-face {
font-family: 'Comfortaa SemiBold';
font-weight: 600px;
font-style: normal;
font-display: swap;
src: url('../fonts/Comfortaa/Comfortaa-SemiBold.ttf') format('truetype');
}
Problem
The MaterialFX dependency I pull into my project has the used fonts in a separate folder but how to I use them in my project. As is visible from the demo Fonts.css (which I would like to simply copy into my project), the paths to the fonts e.g. url('../fonts/Comfortaa/Comfortaa-SemiBold.ttf') are specified relative the resources path.
Now, if I want to use the same fonts in my project without changing all the paths, I guess I need to
Copy the fonts-Folder manually from the externally pulled materialfx.jar into my own project resources
Have Gradle automatically do this
So I imagine I need something like the following in my build.gradle:
copy from external library 'materialfx-11.13.9.jar' the folder 'io/github/palexdev/materialfx/font'
into my own projects "src/main/resources"
Note - there seems to be a smiliar issue but I can't make it work as I have no clue if it even aims at the same thing I'm trying to acchieve.
For the life of me, I can't get self-hosted FontAwesome icons to render in my Angular 2 application.
My Directory structure for these fonts is:
/src/assets/app/fonts/font-awesome/4.7.0/
WebPack is using /src/ as the root when serving the site locally.
To reduce http requests in my app, I have inlined the minified FontAwesome css in my index.html file, and specified the #font-face as such in index.html:
#font-face{
font-family: 'FontAwesome';
src: local('FontAwesome'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.eot?v=4.7.0') format('embedded-opentype'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.svg?v=4.7.0#FontAwesome') format('svg');
font-style: normal;
font-weight: normal;
}
As you can see, the paths to the font files are root relative, and I am able to download the individual font files via those URLs directly, so I'm pretty sure this isn't a path issue.
In Chrome on OS X, I get squares. In Safari, I don't get any icons at all. I have combed through lots of articles with lots of people experiencing various issues similar to mine, but nothing has helped so far.
Even if I supply a specific loader for fonts:
{
test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?$/,
use: ['url']
}
it still doesn't work. On Windows 8.1/10 and Linux (Ubuntu / Mint), everything works as expected. What am I doing wrong?
I ended up using the CDN-based version of Font Awesome as self-hosting wasn't working in OS X or for Cordova builds of my app.
I'm trying to figure out how to adapt a wrap bootstrap theme for use in Rails 4.
The theme uses simple-line-icons. I've tried to move those files to a font folder in my app/assets folder as well as to the css file in my vendor/assets/css folder and the js folder in my vendor/assets/javascript folder.
I don't understand how to rewrite paths in the css so as to reference the assets in a way that will get rails to read them.
For example, one of the css files includes the following:
#font-face {
font-family: 'Simple-Line-Icons';
src: url("../../fonts/Simple-Line-Icons.eot");
src: url("../../fonts/Simple-Line-Icons.eot?#iefix") format("embedded-opentype"), url("../../fonts/Simple-Line-Icons.woff") format("woff"), url("../../fonts/Simple-Line-Icons.ttf") format("truetype"), url("../../fonts/Simple-Line-Icons.svg#Simple-Line-Icons") format("svg");
font-weight: normal;
font-style: normal;
}
I understand that the url(../.. part is a problem for rails. What I can't figure out is how to solve it.
I have rails-12factor gem installed in my production environment. I've tried a million variations (shown in the rails guides), but I can't find anything that works.
Can anyone see what to do?
This article suggests not to include the 'fonts' folder in referencing vendor assets font files. https://gist.github.com/iamatypeofwalrus/6467148
I've tried including and excluding it but neither way works.
This article suggests that vendor file is not capable of storing fonts without amending the initialiser. I tried that but it doesnt work either.
Using fonts with Rails asset pipeline
Rails.application.config.assets.paths
=> ["/Users/cf3/app/assets/images", "/Users/cf3/app/assets/javascripts", "/Users/cf3/app/assets/stylesheets", "/Users/cf3/vendor/assets/fonts", "/Users/cf3/vendor/assets/javascripts", "/Users/cf3/vendor/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/underscore-rails-1.8.3/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/gmaps4rails-2.1.2/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/images", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chosen-rails-1.4.3/vendor/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/chartkick-1.4.1/app/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/formtastic-2.2.1/app/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/images", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/surveyor-5281b317a559/lib/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/dependent-fields-rails-0.4.2/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/cocoon-1.2.6/app/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/jquery-rails-4.0.5/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/coffee-rails-4.1.0/lib/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/bundler/gems/momentjs-rails-eda1b74512db/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-slider-rails-5.3.1/vendor/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-slider-rails-5.3.1/vendor/assets/stylesheets", "Rails/vendor/assets/fonts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/javascripts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/fonts", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.5.1/assets/images", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/stylesheets", "/Users/lem/.rvm/gems/ruby-2.3.0/gems/font-awesome-sass-4.4.0/assets/fonts"]
HEROKU
I've now found this post, that suggests that for heroku compliance in production, I need to replace everything with asset path helpers and rename the files to add .erb to images and css and .coffee to js. Before I do this, can someone please confirm this is actually required, and how I would go about changing the above css file to comply with heroku requirements.
http://joanswork.com/wrapbootstrap-theme-to-rails/
Actually any sub-directory added to assets directory is auto added to the load
paths. Files in those directories can be accessed as normal asset
files.
If you have
vendor/assets/fonts/Simple-Line-Icons.eot
then vendor/assets/fonts/ should be added to load paths.
Then you can add all font files to your css files with path : font/file_name
Remember to restart your server after this as load paths will reload after restarting the server.
You can see the list of load paths through rails console by following command :
Rails.application.config.assets.paths
You can add new load paths by following command :
config.assets.paths << Rails.root.join("vendor", "assets", "fonts")
OR to autoload : config.autoload_paths << Rails.root.join("vendor", "assets", "fonts")
For some reason the fonts are the only assets that are loaded from the http://example.com domain instead of http://www.example.com, and because of this, are not displayed in Firefox because of CORS.
this is the less file that loads the fonts:
#font-face {
font-family: 'example';
src: asset-url('example.eot?97822167');
src: asset-url('example.eot?97822167#iefix') format('embedded-opentype'),
asset-url('example.woff?97822167') format('woff'),
asset-url('example.ttf?97822167') format('truetype'),
asset-url('example.svg?97822167#example') format('svg');
font-weight: normal;
font-style: normal;
}
Firefox says:
downloadable font: download failed (font-family: "example" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed
source: http://example.com/assets/example-c93f82c639ee9474376d8df30300127a.ttf?97822167
The asset host is set to www.example.com. why is the domain wrong? how can i change this?
Thank you
Make sure your fonts are placed in either app/assets/fonts vendor/assets/fonts or lib/assets/fonts since you're using Rails 4
Make sure your assets are precompiled, i'm not sure if rails pipeline precompiles .svg .woff etc.. by default.
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
Edit:
Also, make sure Rails serves static assets config.serve_static_assets = true
changed
asset-url
to
asset_url
in the .less file and all was well
I installed a bootstrap theme and everything is working well locally. However, when I went to push to heroku, my app couldn't find the fonts. I precompiled the assets and pushed to heroku, but no icons.
So, I made my development environment like heroku with the following in development.rb:
config.assets.debug = true
# Disable Rails's static asset server (Apache or nginx will already do this).
config.serve_static_assets = true
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
# config.assets.css_compressor = :sass
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
# Generate digests for assets URLs.
config.assets.digest = true
now, my dev environment can't find the font files. The font files are in two locations:
app/assets/fonts/fontawesome-webfont.*
public/assets/fontawesome-webfont.*
however, I get this error:
ActionController::RoutingError (No route matches [GET] "/assets/fontawesome-webfont.svg"):
here's how they are being loaded from the precomplied css file (application-xxxxxxxxx.css):
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot?v=4.0.3');
src: url('fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('fontawesome-webfont.woff?v=4.0.3') format('woff'), url('fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
what am I doing wrong?
The easiest fix for me was to use the CDN described on the Font Awesome "get started" page.
Delete any local copy of the stylesheet and font files, and just put this in the head:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
(current as of 07-07-2014, see link above for most recent release)
Keep the development environment as it was. We need to precompile assets in production mode only.
Here, I hope you need to add:
Application.rb
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/fonts"
and update:
#font-face {
font-family: 'FontAwesome';
src: url('/assets/fontawesome-webfont.eot?v=4.0.3');
src: url('/assets/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
url('/assets/fontawesome-webfont.woff?v=4.0.3') format('woff'),
url('/assets/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
url('/assets/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Then run rake assets:precompile and push it to heroku. May that would go well.
I tried using asset-url instead of url putting appropriate files in assets/fonts and it worked:
#font-face{
font-family: 'Font-Awesome';
src: asset-url('font-awesome.eot');
src: asset-url('font-awesome.eot?#iefix') format('embedded-opentype'),
asset-url('font-awesome.svg') format('svg'),
asset-url('font-awesome.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I simply cleaned up my public/assets folder and precompiled the assets again. Pushed to heroku and et voila! It worked liked a charm. There were a lot of repetitive files and the assets weren't updated. Hence had to clean up. I tried this when none of the above methods seemed to work for me.
Note: I'm on,
Rails - 4.1.6
Ruby - 2.1.3
font-awesome-rails - 4.2.0.0
Hope it helps anybody who comes looking for the right fix!
I had the exact same issue with Rails 4.2 and Font Awesome gem 'font-awesome-rails'.
I had to use asset-path (since I'm using sass, but I presume asset-url works too) in your #font-face declaration.
Make sure that you compile for production and not development or some other environment:
RAILS_ENV=production bundle exec rake assets:precompile
Here's the resources that helped me:
http://anotheruiguy.roughdraft.io/7379570-custom-web-fonts-and-the-rails-asset-pipeline
https://github.com/concerto/concerto/issues/518 (The comment by augustf)
Perhaps you need to add.
config.assets.precompile += %w( .svg .eot .woff .ttf )
(from http://www.jaynathan.org/2013/02/using-font-awesome-with-rails-asset-pipeline/)
Do following changes
#font-face{
font-family:'FontAwesome';
src:font_url('font/fontawesome-webfont.eot?v=3.0.1');
src:font_url('font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
font_url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
font_url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight:normal;
font-style:normal
}
it work for me