My environment is Rails 3.2.8, and all my stylesheets are found in app/assets/stylesheets in .css.scss format. I'm also using Bootstrap-sass for my application.
The stylesheets do not seem to be loaded at all in internet explorer, and I haven't found a solution after some research.
I provide one css file for example:
File: posts.css.scss
$myFontFamily: 'Nanum Gothic', sans-serif;
$baseFontFamily: $myFontFamily;
#import 'bootstrap';
body {
background-color: #000000;
color: #FFF;
}
In IE9, font, body background, font color are not at all affected by this stylesheet. Any help would be appreciated.
I don't think you need the css and just put posts.scss and I'm assuming all config.assets are set correctly too. i.e., you didn't mess with them.
Related
I'm having an issue with deploying a customized _variables.scss to my production server as a compiled asset.
Everything is fine on my development environment, it's in production that my variables are being overwritten.
I'm using Rails 4.2.1 with Spree 3.0 Stable branch.
I have the following structure:
Files created in vendor/assets/stylesheets/frontend
_variables.scss (my custom app variables)
all.css (generated by Spree)
frontend_bootstrap.css.scss (override Spree)
navbar.scss (my customization)
The _variables.scss contains the following:
// Place all Sass variables here.
// Colors
$brand-primary: green;
$gray: #aaa;
// Navbar
$navbar-default-bg: #fff;
$navbar-height: 100px;
$navbar-border-radius: 0;
$navbar-default-border: none;
$navbar-default-toggle-hover-bg: $navbar-default-bg;
$navbar-default-toggle-icon-bar-bg: lighten($gray, 60%);
$navbar-default-toggle-border-color: $navbar-default-bg;
$navbar-default-link-active-bg: $brand-primary;
The frontend_boostrap.css.scss contains the following:
// Spree Bootstrap Override
// Core
#import "variables";
#import "bootstrap-sprockets";
#import "bootstrap";
// Custom Overrides
#import "navbar";
The navbar.scss contains the following:
// Navbar Customization
.navbar-myapp {
margin-bottom: 40px;
border-top: none;
border-bottom: 1px solid $navbar-default-toggle-icon-bar-bg;
.navbar-brand {
padding: 15px;
}
}
The Rails standard app/assets/stylesheets/application.css manifest isn't being used/I haven't declared anything specfic in there.
The produced HTML head code shows all.css and frontend.
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/all.self-33fc4a513acb9a5f3fd4ba26b89c94184e5d028c4bd40eee6736d3ccfea5c140.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/frontend_bootstrap.self-88eb7ced3e4d78d298a33264c3cfc65af6cef8ac32ae56a7dd7a3e321ba97378.css?body=1">
All is well in development but when I deploy this to my test server, some of the variables are being overwritten by the default, this includes the navbar configuration and a color.
I'm not sure if this is because of asset compilation order; or if it's how bootstrap-sass is imported.
Any suggestion on how I can go about using _variables.scss without it being overwritten? I didn't want any duplication, that's why I wanted to change the navbar and colors in the the variables sass file.
It looks like I've solved the issue.
The Bootstrap Sass gem states:
Do not use //= require in Sass or your other stylesheets will not be
able to access the Bootstrap mixins or variables.
To get this working in Production / compiled assets. I had to:
Change all.css to all.scss
Change the //= require statements to #import
The vendor/assets/stylesheets/spree/frontend/all.scss:
// Sass Application Manifest
#import "frontend_bootstrap";
The vendor/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss:
// Spree Bootstrap Override
// Core
#import "bootstrap-sprockets";
#import "variables";
#import "bootstrap";
I hope this helps anyone who stumbled like I did.
I'm researching how to add custom fonts to my Rails app, e.g. by adding a fonts folder in the assets folder - and I cannot find an "official" Rails way on how to do this.
Yes, there are plenty of questions/answers here on SO about the matter, all seemingly with their own hacks. But shouldn't such a common practice go under Rails' famous "convention over configuration"?
Or if I've missed it - where is the documentation reference on how to organize fonts in a Rails app?
Yes the link given will explain it well, however if u need another detailed explanation then here it is
Firstly to use custom fonts in your app you need to download font files, you can try https://www.1001freefonts.com/ and look for fonts
Few of the most popular font file formats are mainly .otf(Open Type Format) .ttf(True Type Format) .woff(Web Open Font Format)
You can move the downloaded fonts to your app folder under app/assets/fonts/
After downloading the file you need to "declare" the fonts you will be using in your css like this
#font-face {
font-family: "Kaushan Script Regular";
src: url(/assets/KaushanScript-Regular.otf) format("truetype");
}
Finally you can use the font-family that you just declared wherever you want like this
#e-registration {
font-family: "Kaushan Script Regular";
}
Hope this helps.
Just did it...
Download and save the font files (eot, woff, woff2...) in your
assets/fonts/ directory
In your config/application.rb add this line config.assets.paths
<< Rails.root.join("app", "assets", "fonts")
What this does is it
precompiles your fonts folder just as it does by default with your
images, stylesheets etc.
and make sure this line is set to true config.assets.enabled =
true
In your sass/scss or even inline with <script> tag
#font-face { font-family: 'Bariol Regular'; src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');
src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
format('eot'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
format('woff'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
format('truetype'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
format('svg'); font-weight: normal; font-style: normal; }
Note that you should use the font-url helper instead of css' url to address the fingerprinting done by Rails when it precompiles the assets
Finally, set the font-family in your CSS files
body {
font-family: 'Bariol Regular', serif;
}
FREE TIP:
This being said, the best way in terms of performance is to set this up with JS so that these fonts get loaded asynchronously. Check this loader: https://github.com/typekit/webfontloader
I had some trouble with the approaches listed above, because the production css was not pointing to the compiled ttf font, so I then successfully used this alternative approach borrowed from https://gist.github.com/anotheruiguy/7379570:
Places all font files in assets/stylesheets/fonts. e.g. assets/stylesheets/fonts/digital_7.ttf.
I defined in a .scss file that we use:
#font-face {
font-family: 'Digital-7';
src: asset-url('fonts/digital_7.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I leveraged the custom font in other .scss files:
.digital-font {
font-family: 'Digital-7', sans-serif;
font-size: 40px;
}
This said, a much cleaner way of doing this is to put the font definition (digital_7_mono.ttf in this example) on a separate site.
If you are using Cloudfront, for example, in a Cloudfront directory called my_path, upload your font files, then define a css file (e.g. digital_fonts.css)
#font-face {
font-family: 'Digital-7-Mono';
font-weight: normal;
font-style: normal;
src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}
In your html, inside the <head> tag, add:
The only way that worked for me was this:
#font-face {
font-family: 'Vorname';
src: asset-url('Vorname.otf') format('truetype'),
asset-url('Vorname.ttf') format('truetype');
}
Just put fonts under app/assets/fonts, and modify url('Your Font Path') to font-url('Your Font Path') in your scss. Aslo Asset Pipeline will auto precompile fonts into public/assests folder.
check here for more detail:
https://guides.rubyonrails.org/asset_pipeline.html#css-and-sass
I'm trying to use the Zurb Foundation General Enclosed font icons. I downloaded the files, they have filename extenstions of "sgv", "ttf", "woff". I'm not sure how to include them in the page. I'm completely new to this.
I've searched google and read a few blogs on this but I'm still confused.
I'm not sure how to set up the files to get them to work.
My platform is asp.net mvc.
Thank you
I downloaded the files, they have filename extenstions of "sgv",
"ttf", "woff". I'm not sure how to include them in the page.
After you downloaded the files you will have the following Foundation Fonts folder structure:
- foundation_icons_general_enclosed
--- fonts
--- saas
--- stylesheets
In an ASP.net project it's better that you have the styles in a separate file so you can update quickly in case there are updates from Foundation. You can copy them into their own folders too. So you have a Content folder by default, and you can have the following structures:
- Content
--- fonts - copy `eot`, `sgv`, `ttf`, and `woff` files
--- addon - copy `general_enclosed_foundicons.css`
After you copied the files you need to adjust the styles to point to the correct font files, for example:
#font-face {
url("../fonts/general_foundicons.eot")
Then reference the files so you could use them in your project
<link href="#Url.Content("~/Content/addon/general_foundicons.css")"
rel="stylesheet" type="text/css" />
And you can start using them by doing <i class="foundicon-[icon]"></i> as shown on the playground. For example:
<i class="general foundicon-add-doc"></i>
// to use it as a link
<i class="general foundicon-add-doc"></i>
Additional Tip for Deployment
If its the first time you used fonts in a website, the fonts will not work after deployment. If you encounter that issue make sure you have the following MIME types in your IIS. I forgot which ones are in by default but I'm sure you won't have the following by default:
File name extension: .svg
MIME type: image/svg+xml
File name extension: .ttf
MIME type: application/octet-stream
File name extension: .eot
MIME type: application/octet-stream
You can leave out .woff and it will work.
When you download the fonts, you'll be able to simply merge the stylesheets and fonts folders straight into Foundation. Here's what the CSS looks like:
#font-face {
font-family: '[set]Foundicons';
src: url('fonts/[set]_foundicons.eot');
src: url('fonts/[set]_foundicons.eot?#iefix') format('embedded-opentype'),
url('fonts/[set]_foundicons.woff') format('woff'),
url('fonts/[set]_foundicons.ttf') format('truetype'),
url('fonts/[set]_foundicons.svg#[set]Foundicons') format('svg');
font-weight: normal;
font-style: normal;
}
[class*="foundicon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
}
[class*="foundicon-"]:before {
font-family: "[set]Foundicons";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
}
This is how you use it.
<i class="foundicon-[icon]"></i>
From the Foundation documentation.
phantom edit
Just after posting a blurb on zurb icon fonts not working on F4... viola, I fixed it. So I'm redoing my post to add some much needed clarification:
The instructions on the Zurb site are typically a bit on the vague side. It requires general knowledge of sass, and for sass noobs it gets confusing fast. So here we go:
1) After downloading the files, copy them over to the applicable directories in your Foundation folder. I'm using Zend, so wherever you have your Foundation Sass setup is where you are going to put these. Just like the docs say, copy the .scss files over to their appropriate folder, copy the entire new fonts directory over to the Foundation folder, at the same directory level (right there next to Sass and Stylesheets, etc).
Note: one reason why such a simple step may be confusing for some is because the Zurb documentation uses the term "merging" instead of "adding" the files. Only one file is in fact merged: _settings.scss
2) So whats up with the _settings.scss file? Open it up and check it out! It's just a mixin for the fonts. Take that code and add it near the top of your existing _settings.scss folder. It did not work for me when added toward the bottom.
3) That snip of CSS from the Zurb documentation page needs to be added at the top of your app.scss file. I put it just under all of my #import declarations.
4) Make sure that Compass is on and you have it watching your Foundation folder! Yow.
Ok, I've done my good deed for the day.
No need to over complicate this. What I did:
download icons
move the downloaded folder "foundation-icons" into your css folder
put the following line into the <head> section of your html <link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" />
Then put in an up-arrow (or other icon) anywhere in the <body> of your html with <i class="fi-up-arrow"></i>
I'm using font awesome in my project(mvc/asp.net). My problem is, I was debugging the project and check on localhost, there was no problem with font awesome icons. But when published the website and check on web, instead of icons, i saw small boxes. I'm sure that it's placed in right directory(where css files placed).
I couldn't find any proper solution.
By the way there is also no problem with buttons. They are all ok but icons are gone.
Thanks
I've just loaded your webpage and checked the net tab of firebug.
your following urls returned a 404:
http://www.senocakonline.com/Content/font/fontawesome-webfont.woff
http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf
i would assume that those being missing is the reason your icons aren't displaying.
UPDATE: 23.10.2015
to make it available just add this code to your WebConfig:
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
Why font-awesome works on debug mode but not on IIS?
In Visual Studio, by default, some font files are not including during Publish:
.eot
.json
.ttf
.woff
This is because their build action is set to None, this is by default (on MVC, not sure on WebForms). You must go to the affected file's properties and set it from "None" to "Content".
This is how I solved it (not by manually dragging the files as some may suggest)
Credits goes to this guy: http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html
Another solution that solved this issue for me can be found here: https://stackoverflow.com/a/12587256/615285
Quoting from there:
The issue is most likely that the icons/images in the css files are using relative paths, so if your bundle doesn't live in the same app relative path as your unbundled css files, they become broken links.
The easist thing to do is to have your bundle path look like the css directory so the relative urls just work, i.e:
new StyleBundle("~/Static/Css/bootstrap/bundle")
We have added support for this in the 1.1beta1 release, so to automatically rewrite the image urls, you can add a new ItemTransform which does this rebasing automatically.
bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
"~/Static/Css/bootstrap/bootstrap.css",
"~/Static/Css/bootstrap/bootstrap-padding-top.css",
"~/Static/Css/bootstrap/bootstrap-responsive.css",
"~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));
I had the same problem. The solution:
Open CSS file and delete the current font-face section and replace with these:
#font-face {
font-family: FontAwesome;
src: url('/Content/fonts/fontawesome-webfont.eot'), /*for IE */
url('/Content/fonts/fontawesomewebfont.svg'),
url('/Content/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */
font-weight: normal;
font-style: normal;
}
(change the font-face values as you want)
Copy your ttf font file on your desktop then convert to eot
http://www.kirsle.net/wizards/ttf2eot.cgi
Convert ttf font file to svg
http://www.freefontconverter.com/
Convert ttf font file to woff (optional)
http://ttf2woff.com/
Drag and drop these all fonts (ttf, eot, svg, woff... ) to your file location when Visual Studio 2012 is open.
Publish your project
It depends on this code line in BundleConfig:
BundleTable.EnableOptimizations = true;
if it is true, you have to change your Font files's path;
../ is shows root path, main folder of your project. And then you have to write rest of the path.
Mine. When it's true:
font-family: 'Icons';
src:url('../_include/css/fonts/Icons.eot');
src:url('../_include/css/fonts/Icons.eot?#iefix') format('embedded-opentype'),
url('../_include/css/fonts/Icons.woff') format('woff'),
url('../_include/css/fonts/Icons.ttf') format('truetype'),
url('../_include/css/fonts/Icons.svg#Icons') format('svg');
font-weight: normal;
font-style: normal;
When it's false:
font-family: 'Icons';
src:url('fonts/Icons.eot');
src:url('fonts/Icons.eot?#iefix') format('embedded-opentype'),
url('fonts/Icons.woff') format('woff'),
url('fonts/Icons.ttf') format('truetype'),
url('fonts/Icons.svg#Icons') format('svg');
font-weight: normal;
font-style: normal;
It is also a MIME TYPE problem in the IIS, just add the file extension .woff and it will work
this worked for me :
<
link href="~/Content/font-awesome-4.2.0/css/font-awesome.css" rel='stylesheet' type='text/css' />
I had to link the Directly URl
In my ASP.NET MVC project with bundling enabled in BundleConfig.cs what worked was this:
Open the file font-awesome.css and change #font-face to this:
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
I had to add ../ before each url.
I had the same problem. Fonts were shown on local properly but when I uploded it to server, only blank squares were shown.Sometimes it may happen because the filename mentioned in FontAwesome CSS file src attribute is different from the actual font file name. In my case I found it like this in fontawesome css file:
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),
url('../font/fontawesome-webfont_aea8981c.ttf?v=3.2.1') format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
But the actual font file names wese like these-
font/fontawesome-webfont_2d2816fe.eot
font/fontawesome-webfont_aea8981c.eot
font/fontawesome-webfont_aea8981c.ttf
font/fontawesome-webfont_aea8981c.woff
though the name didn't match properly in css file after underscore, it was working fine on local. So it was hard to tell what was the probable cause for that. When I edited the name of file in FontAwesome css file src to the exact actual names, it worked.
Nothing realy worked for me.
I have a Webform page that hosts an angulular application.
The angular application uses the webfonts.
The trick with CssRewriteUrlTransform() was the right direction, but then I found this extension for bundleing that did the final solution!
AspNetBundling
You don't have to use the hole extension, just copy the CssRewriteUrlTransformFixed class and use it instead of the original.
I have tried all suggestions above, and none of them work. Then I tried to move font CSS file to different CSS file, and magic has happen. Everything start to work without any problems. Note you can later on bundle new CSS file through your bundle file.
I have my own custom font which I use for the website, and I would like it to be declared as the $baseFontFamily the only problem is that since it's a custom font, I want older browsers to fall back to the default twitter bootstrap font family. Is there any way I can do that?
My main .scss file looks like that:
#font-face
{
font-family: Bartley;
src: url('/Bartley.ttf');
}
$baseFontFamily: Bartley, $sansFontFamily;
#import "bootstrap";
body {
padding-top: 60px;
}
#import "bootstrap-responsive";
Thanks!
There is no "default bootstrap font" but it should work like this:
$baseFontFamily: 'Bartley', Helvetica, Arial, sans-serif !default;
and then you could do ...
$sansFontFamily: $baseFontFamily; // Set "SansFontFamily" with value from "baseFontFamily"