I'm working on a Orchard theme using Twitter Bootstrap 3.0.x
I added all scripts and styles into MyTheme/Scripts & MyTheme/Styles.
It works find except Glyphicons images.
In CSS files, it references icons by using a relative path (../fonts/glyphicon.....).
So I created a MyTheme/fonts containing all glyphicons files.
However, when I browse these files are not found (404).
For example, when I browse the source code :
http://localhost:9100/Themes/MyTheme/Scripts/bootstrap.js -> OK
http://localhost:9100/Themes/MyTheme/Styles/bootstrap.css -> OK
http://localhost:9100/Themes/MyTheme/fonts/glyphicons.. -> KO
Any idea to do that ?
I know this is late, but maybe it will help other people. You should put your fonts folder in the Content folder looking like this:
http://localhost:9100/Themes/MyTheme/Content/fonts/
After this you should overwrite in a external css file your bootstrap.css and bootstrap.min.css the #font-face of your Glyphicons.
Looking like this:
#font-face{
font-family:'Glyphicons Halflings' !important;
src:url(../Content/fonts/glyphicons-halflings-regular.eot) !important;
src:url(../Content/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
url(../Content/fonts/glyphicons-halflings-regular.woff) format('woff'),
url(../Content/fonts/glyphicons-halflings-regular.ttf) format('truetype'),
url(../Content/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg') !important
}
Orchard doesn't seem to get content like your fonts outside the Content folder.
Related
I have included my Boostrapmin and bootstrap icon CSS as well.
<i class="bi bi-play-circle"></i>
this icon I am trying to use. but it appears as square. css is applied I can see it in inspect element of google chrome.
I have included my Boostrapmin and bootstrap icon CSS as well.
<i class="bi bi-play-circle"></i>
this icon I am trying to use. but it appears as square. css is applied I can see it in inspect element of google chrome.
So, Here I am writing a solution Thanks to #zim for help.
Step1:
Download Bootstrap icon CSS file, bootstrap-icons.css
Link it in your project
--By including in CSS file
OR
--By linking in HTML file.
After that download the fonts folder from the Bootstrap icons git repository.
--Now open bootstrap-icons.css
And you will find code like this
#font-face {
font-family: "bootstrap-icons";
src: url("../fonts/bootstrapfonts/bootstrap-icons.woff2") //Match this file path format("woff2"),
url("../fonts/bootstrapfonts/bootstrap-icons.woff") //Match this file pathformat("woff");
}
-bootstrap-icons.woff2 and bootstrap-icons.woff make sure you link it properly with bootstrap-icons.css file.
And boom you are good to go.. :)
I am new to rails. I am trying to figure out how to include custom folder path since i m using bootstrap and its tries to load some fonts from specific path which is "/assets/themes/default/assets/fonts/icons.woff2" hence i have created the folder themes inside assest folder, inside themes folder i have created default folder .. so on till fonts folder and i have kept icons.woff2 inside fonts folder. how can i include this path into my project i m still getting resource not found exception
GET http://localhost:3000/assets/themes/default/assets/fonts/icons.ttf 404 (Not Found)
For bootstrap you can include the folder fonts into your assets and for rails 4+ you can just use the font-url helper . A standard that should work for the glyphicons is
#at-root {
// Import the fonts
#font-face {
font-family: 'Glyphicons Halflings';
src: font-url('bootstrap/glyphicons-halflings-regular.eot');
src: font-url('bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), font-url('bootstrap/glyphicons-halflings-regular.woff2') format('woff2'), font-url('bootstrap/glyphicons-halflings-regular.woff') format('woff'), font-url('bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), font-url('bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
}
Works with current bootstrap and rails 4+
the font-url helper points automatically to app/assets/fonts
Currently I trying to add custom fonts into my Rails 4 application.
I added all of my fonts into assets/fonts
I added config.assets.paths << Rails.root.join("app", "assets", "fonts") into config/application.rb
I added script into my style.css
#font-face {
font-family: 'oxygenregular';
src: url(font-path('oxygen-regular-webfont.eot') + "?#iefix") format('embedded-opentype'),
url(font-path('oxygen-regular-webfont.woff')) format('woff'),
url(font-path('oxygen-regular-webfont.ttf')) format('truetype'),
url(font-path('oxygen-regular-webfont.svg') + "#MyFont") format('svg');
}
body {
font-family: 'oxygenregular', arial;
background: #f4f5f9;
background-image: url(../images/bg-pattern.png);
background-position: 0 bottom;
background-repeat: no-repeat;
}
I don't get any error like 404 (Not Found), since I got the error before modified config/application.rb
But the application doesn't load the font that I already put. I tried on native HTML and the fonts are working well, but when I trying to put them into Rails application, it doesn't load.a
Fonts
The problem you have is you're calling the font files without referencing their paths correctly.
The issue here is the same as when you reference images or other files from the asset pipeline - if you use a file path which doesn't exist, it's just not going to load (because of the asset fingerprinting):
Fingerprinting is a technique that makes the name of a file dependent
on the contents of the file. When the file contents change, the
filename is also changed. For content that is static or infrequently
changed, this provides an easy way to tell whether two versions of a
file are identical, even across different servers or deployment dates.
What you get with many Rails assets is an inability to reference the correct file, as the filepath has had its name changed when you precompiled them, preventing them from loading in most cases.
Paths
To add to #praszyk's answer is that you'll need to use one of the asset_paths to pull the correct font path, which can be done using one of the CSS preprocessors that come with Rails (typically SCSS or SASS)
The problem you have is using .css is not going to do this - you have to use either .scss or .sass:
#app/assets/stylesheets/style.css.scss
#font-face { font-family: 'oxygenregular';
src: asset_url('/fonts/oxygen-regular-webfont.eot' + "?#iefix")
format('embedded-opentype'),
asset_url('/fonts/oxygen-regular-webfont.woff') format('woff'),
asset_url('/fonts/oxygen-regular-webfont.ttf') format('truetype'),
asset_url(font-path('/fonts/oxygen-regular-webfont.svg') + "#MyFont") format('svg'); }
Using asset_url with scss will automatically call the correct version of the file - fingerprinted or not.
If you use this with #praszyk's answer, it should hopefully work
Change:
#font-face { font-family: 'oxygenregular';
src: url(font-path('/fonts/oxygen-regular-webfont.eot') + "?#iefix")
format('embedded-opentype'),
url(font-path('/fonts/oxygen-regular-webfont.woff')) format('woff'),
url(font-path('/fonts/oxygen-regular-webfont.ttf')) format('truetype'),
url(font-path('/fonts/oxygen-regular-webfont.svg') + "#MyFont") format('svg'); }
body { font-family: 'oxygenregular', ...}
Since you're loading the fonts in "style.css" which resides in /assets/stylesheets (and /stylesheets/ in the browser) the script tries to load /stylesheets/oxygen-regular-webfont.eot.
Appending "/fonts/" to your paths should work as expected.
Also check the developer console of your browser if you're still having errors.
In CSS:
#font-face {
font-family: 'some_name';
src: url('font_name.eot');
}
In application.rb:
config.assets.paths << "#{Rails.root}/app/assets/fonts"
On Heroku this setup works well, but on localhost doesn't. Am I missing something for correct displaying non-standard fonts on localhost?
I am running on Mountain Lion.
Thanks
The scr path specification of the font is relative.
In production environment, all assets are compiled and assets of different types are placed in one folder, accessible at /assets/asset-name. Which means both font and css file will be in same folder, and relative path would do. In development environment, however, assets ain't compiled and ain't combined together, meaning they're accessed at /assets/ASSET-TYPE/asset-name. So the font won't be in the same folder as the stylesheet will, and relative path won't help to find the actual font file.
Rails has an asset-url CSS helper, which works in both envs, it'll be replaced during compilation to the url(path-to-asset).
#font-face {
font-family: 'The Font';
src: asset-url('the_font.eof', font);
}
This solution works for me:
#font-face {
font-family: 'some_name';
src: url('/assets/font_name.eot');
}
I'm importing some custom fonts in my rails app using the following lines in CSS:
#font-face
{
font-family: "SquareSlabLite";
src: url("/assets/squareslablite.ttf");
}
#font-face
{
font-family: "SquareSlabBold";
src: url("/assets/squareslabheavy.ttf");
}
#font-face
{
font-family: "SquareSlabMedium";
src: url("/assets/squareslabmed.ttf");
}
When I go to the location(s) localhost:3000/assets/font.ttf, I get the respective fonts showing up for download. However when I try and use the fonts for example:
h2{
font-family: "SquareSlabLite";
}
this line only works when I use SquareSlabBold. When I try use the Lite or Med versions of this text, I get nothing, just a generic font showing up. When I check out firebug, The bold shows up, but not the lite nor medium version. I'm baffled. I've checked spelling, redownloaded files but nothing.
Is it not possible to get this working with squareslab medium and lite? Could there be something wrong with the ttf files, even though I have downloaded them from different sources?
Thanks guys.
TTFs are not supported everywhere. And if you're using IE for viewing this font, it is really hard to prepare TTF for this to work in every IE. Try http://www.fontsquirrel.com/fontface/generator/ to generate proper webfonts from yours TTFs.