I'm trying to include FontAwesome into my project but I cannot get the letter little "o" to work,
My font-awesome.css.scss.erb
#font-face {
font-family: "FontAwesome";
src: url('<%= asset_path('fontawesome-webfont.eot') %>');
src: url('<%= asset_path('fontawesome-webfont.eot') + '?#iefix' %>') format('eot'), url('<%= asset_path('fontawesome-webfont.woff') %>') format('woff'), url('<%= asset_path('fontawesome-webfont.ttf') %>') format('truetype'), url('<%= asset_path('fontawesome-webfont.svg') + '#FontAwesome' %>') format('svg');
font-weight: normal;
font-style: normal;
}
// Other stuff,,,,,,
my own css
body {
font-family: "FontAwesome"
}
What happens is that the text changes to some serif font, soo something is changing, but the letter "o" is not displayed, I tried various gems but none seems to work.
I also tried different browsers (Chrome, FF, Safari)
As OS I Use Lion 10.7.5
I have also configured the assets path.
FontAwesome requires you to use the font-awesome.css stylesheet.
Then you will create an element to use the font-face such as:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-download"> Download</i>
See Not using Boostrap?1 at http://fortawesome.github.io/Font-Awesome for directions
1. This exists in the Old 3.2.1 documentation.
You shouldn't be using FontAwesome as the font face for your body. You'll want to restrict it to a particular class or something like that.
Related
So I am working on a WordPress website and on each page I have an H1 tag for the title of that page. I am using a special font using #font-face and it works great on windows in every browser, but when I switch over to a mac it won't display the h1 tag its just white space. I have tested this in safari and chrome on multiple mac's and its not working on any of them. If I change the font to let say Arial it works great, if I setup to have a fall back font it does not work. If I change the h1,h2,h3 tags to use NorthBergen-Light it works great, its just the NorthBergen that doesn't work and the code for both of them is the exact same. In my research I have found that some people say they have had success when they remove all of the quotes but when I do that it just breaks everything. I can't figure out why NorthBergen-Light works great but NorthBergen does not.
#font-face {
font-family: 'NorthBergen';
font-style: normal;
src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot');
src: local('NorthBergen'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009064915ufonts.com_northbergen-regular.woff') format('woff');
}
#font-face {
font-family: 'NorthBergen-Light';
font-style: normal;
src: url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot');
src: local('NorthBergen-Light'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.eot') format('embedded-opentype'), url('//www.mywebsite.com/op/wp-content/uploads/useanyfont/141009083525ufonts.com_northbergen-light-opentype.woff') format('woff');
}
.services .services-inside .services-title{
font-family: 'NorthBergen' !important;
}
h1, h2, h3{
font-family: 'NorthBergen', 'Times New Roman', 'Times', 'serif' !important;
}
footer.main-footer .widget .widget-title{
font-family: 'NorthBergen-Light' !important;
}
h5, h6, p, blockquote, li, a, .main-container, h4.widget-title, .widget-title{
font-family: 'NorthBergen-Light' !important;
}
So I got it to work by using fontsquirrel and taking all the files and putting them in my FTP and changing the css file to look like.
#font-face {
font-family: 'NorthBergen';
font-style: normal;
src: url('ufonts.com_northbergen-regular-opentype-webfont.eot');
src: url('ufonts.com_northbergen-regular-opentype-webfont.eot?#iefix') format('embedded-opentype'),
url('ufonts.com_northbergen-regular-opentype-webfont.woff2') format('woff2'),
url('ufonts.com_northbergen-regular-opentype-webfont.woff') format('woff'),
url('ufonts.com_northbergen-regular-opentype-webfont.ttf') format('truetype'),
url('ufonts.com_northbergen-regular-opentype-webfont.svg#northbergenregular') format('svg');
}
Dont know anything about Wordpress, but you might need some conversion of font for all browsers:
#font-face {
font-family: 'Min_font';
src: url('../fonts/Min_font/Min_font.eot') format('embedded-opentype'); /* IE9 + later */
src: url('../fonts/Min_font/Min_font.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8 */
url('../fonts/Min_font/Min_font.woff') format('woff'), /* Newer browsers */
url('../fonts/Min_font/Min_font.ttf') format('truetype'), /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini */
url('../fonts/Min_font/Min_font.svg#Min_font + regular, italic, bold) format('svg'); /*IE og iOS earlier than version 5*/
}
Try fontsquirrel: http://www.fontsquirrel.com/tools/webfont-generator
I realize that this question was from several years ago - but I used this thread as a reference when figuring out the solution, so I figured I'd share here to save others future frustration --
For me, all of the fonts were working EXCEPT on my iphone and what I had to do was to remove the ID in the svg portion of the font-face code and leave it as just the uploaded .svg file.
For example in the above code, the svg portion would read:
url('../fonts/Min_font/Min_font.svg, italic, bold) format('svg');
meaning I deleted the "#" and the ID after it.
I tried everything else - fontsquirrel, transfonter, changed the url path numerous ways.
That was the only one that worked - and it took me a week to figure it out :0
It may be the only thing that works for you, too.
My issue was related to something different, so I hope this helps someone. In my case, the font-face code was like:
#font-face {
font-family: 'My Font';
src: url('My-Font.woff2') format('woff2'),
url('My-Font.woff') format('woff');
font-weight: normal;
font-style: italic;
}
and I had all of my heading tags using this:
h1, h2, h3, h4, h5, h6 {
font-family: 'My Font';
}
Most browsers/user-agents apply font-weight:bold or a font-style:normal in some cases.
Even with this, my font still rendered correctly on Chrome/FF/Edge. It was only until I got on iOS did I notice the font didn't render correctly. I guess they are more strict about this.
Changed my CSS to:
h1, h2, h3, h4, h5, h6 {
font-family: 'My Font';
font-weight: normal;
font-style: italic;
}
In my case, the TTF file dictated the font-style and font-weight properties that Transfonter ended up applying. I just had to make sure those were the same in the CSS declaration on the element the font was being applied to. Your case may be different, but it is important to check for those discrepancies.
Started working for me after changing path.
The path fontsquirrel gave didn't had ./
After adding it, it works:
#font-face {
font-family: 'montserratblack';
src: url('./montserrat-black-webfont.woff2') format('woff2'),
url('./montserrat-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I have added bootstrap to my site. Here is the structure I am using. (I cannot whatsoever remove the bootstrap.css file since it I modified it to my liking).
>app
>>assets
>>>fonts
>>>>4 glypicons icon files.
>>>images
>>>>N/A
>>>javascripts
>>>>Bootstrap.js (Jquery is installed in a gem)
>>>stylesheets
>>>>Bootstrap.css
Everything is imported correctly, but the issue is that the glyphicons arent working and I need them!
November 2015 EDIT: I would recommend this gem: https://github.com/twbs/bootstrap-sass It is actively maintained by the Bootstrap community and works really well with Ruby on Rails.
I was having a very similar issue as you but I figure it out! Find this part in your bootstrap.css file:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
and replace ../fonts/ with /assets. This is what your final code will look like.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
I hope this helped!
If you are using bootstrap-sass and you have this issue try to import bootstrap like this in one of your scss files. If you use sass, just convert the syntax:
#import "bootstrap-sprockets";
#import "bootstrap";
For me as a twitter-bootstrap-rails user:
Thanks to take's post # GitHub
Adding this:
/* Override Bootstrap 3 font locations */
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../assets/glyphicons-halflings-regular.eot');
src: url('../assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../assets/glyphicons-halflings-regular.woff') format('woff'),
url('../assets/glyphicons-halflings-regular.ttf') format('truetype'),
url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
to my application.css fixed the issue.
Hope to be helpful.
I was also struggling to make boostrap3 glyphicon work in rails 4.
I solved it by adding
#font-face {
font-family: 'Glyphicons Halflings';
src: url(asset_path('glyphicons-halflings-regular.eot'));
src: url(asset_path('glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'), url(asset_path('glyphicons-halflings-regular.woff')) format('woff'), url(asset_path('glyphicons-halflings-regular.ttf')) format('truetype'), url(asset_path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg');
}`
to application.css.scss file
and
config.assets.paths << "#{Rails}/vendor/assets/fonts"
to application.rb file.
I think you might be having a problem with the asset pipeline
You want to change bootstrap.css to bootstrap.css.scss and then replace where it uses
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
with font-path (look at section 2.3.2 - CSS and Sass)
#font-face {
font-family: 'Glyphicons Halflings';
src: font-path('glyphicons-halflings-regular.eot');
src: font-path('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
font-path('glyphicons-halflings-regular.woff') format('woff'),
font-path('glyphicons-halflings-regular.ttf') format('truetype'),
font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Also in your config/environments/production.rb
# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )
In your config/application.rb
# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Check out another SO post for a similar problem
Hope this helps
Bootstrap 3 icons look like this:
<i class="glyphicon glyphicon-indent-right"></i>
whereas Bootstrap 2 looked like this:
<i class="icon-indent-right"></i>
If the code you are using isn't up to date (check for a b3 branch), then you may have to fork and change the icon names your self.
Apparently Chrome has been broken for months re this issue.
This worked for me when I put it in the top of my customization_css.css.scss file
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
You can also try this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('<%= asset_path("glyphicons-halflings-regular.eot") %>');
src: url('<%= asset_path("glyphicons-halflings-regular.eot?#iefix") %>') format('embedded-opentype'), url('<%= asset_path("glyphicons-halflings-regular.woff2") %>') format('woff2'), url('<%= asset_path("glyphicons-halflings-regular.woff") %>') format('woff'), url('<%= asset_path("glyphicons-halflings-regular.ttf") %>') format('truetype'), url('<%= asset_path("glyphicons-halflings-regular.svg#glyphicons_halflingsregular") %>') format('svg');
}
You just need to convert your your_css.css file to your_css.css.erb
You can copy all the bootstrap font files to public/fonts and it will work. No need for imports or changes in the application.rb.
I tried with suggested solution and it did not work for me, here is a generic solution that helps you troubleshoot any problem related to this you might have.
Here is the resulting font face definition with bootstrap-sass:
#font-face {
font-family: 'Glyphicons Halflings';
src: asset-url('bootstrap/fonts/glyphicons-halflings-regular.eot');
src:
asset-url('bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
asset-url('bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'),
asset-url('bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
asset-url('bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
According to Bootstrap 3 Glyphicons are not working, there's a bug with the Bootstrap customizer that messes up the glyphicon fonts. I had the same issue, but I was able to fix it by downloading the entirety of bootstrap from http://getbootstrap.com/, and then copying the font files to the correct location.
In Rails 4, with sass, Bootstrap 3.2.0, and the bootstrap-sass gem use:
#import "bootstrap";
#import "bootstrap/theme";
When i use bootstrap in my rails apps i use the bootstrap-sass gem.
https://github.com/thomas-mcdonald/bootstrap-sass
You can override it. Simply import it as the docs explain. Then Import or paste your modified files.
In a php project, the glyph weren't working, i download the classic bootstrap zip and i extracted the glyph files to replace them in the project. In my memories the bug appears when you generate a custom bootstrap style from their site (the source of the bug can be wrong).
Hope this helps!
In my index.html.slim file, I replaced span.glyphicon.glyphicon-calendar with span.fa.fa-calendar and it worked.
Make sure you have set
# config/environments/production.rb
config.assets.compile = true
And add fonts to precompile list
# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)
In my case I used this <i class="icon-plus"></i>, which I took from oficcial site of Bootstrap and didn't see anything. But instead, it is neccessary to use this <i class="glyphicon glyphicon-plus"></i>
Provided that you have the glyphicons files in app/assets/fonts (if you don't, you can download them from the bootstrap-saas repo), create app/assets/stylesheets/fonts.scss and add the following:
#font-face {
font-family: 'Glyphicons Halflings';
src: font-url('glyphicons-halflings-regular.eot');
src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
font-url('glyphicons-halflings-regular.woff') format('woff'),
font-url('glyphicons-halflings-regular.ttf') format('truetype'),
font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
I'm trying to embed a Persian font (BYekan) on my responsive website, and currently using the code below I've been able to achieve my goal in Chrome and Desktop Safari:
#font-face {
font-family: 'BYekan';
src: url('/font/BYekan.eot');
src: url('/font/BYekan.eot?#iefix') format('embedded-opentype'),
url('/font/BYekan.woff') format('woff'),
url('/font/BYekan.ttf') format('truetype'),
url('/font/BYekan.svg#BYekan') format('svg');
font-weight: normal;
font-style: normal;}
However, it doesn't work in iOS Safari except for numbers. I've already tried BBC Persian website's font (BBCNasim) with no luck. Any suggestions?
Edited:
This is the the website that I'm working on. And here I uploaded the font that I'm using (I downloaded them from a Persian site, and don't know how they've created the different formats of the font. Maybe they used onlinefontconverter cause it's recommended in their website). If you check my site on Desktop and iPhone, will see the difference.
Your #font-face rule looks fine.
I think you might be encountering a lack of support for characters.
Try setting the unicode range for your font to all possible unicode characters.
#font-face{
font-family: 'BYekan';
src: url('/font/BYekan.eot');
src: url('/font/BYekan.eot?#iefix') format('embedded-opentype'),
url('/font/BYekan.woff') format('woff'),
url('/font/BYekan.ttf') format('truetype'),
url('/font/BYekan.svg#BYekan') format('svg');
font-weight: normal;
font-style: normal;
unicode-range: U+00-FFFF;
}
Your font file is problematic and is not designed for Web.
Refer to this link for full description and web-friendly version download: http://www.wedesign.ir/css/css3-font-face-methods-and-optimized-font-firefox6
I'm trying to use the glyphicons provided by bootstrap in my rails 4.0beta1 app. Everything works fine in development, but in production nothing gets rendered, and in the heroku logs I get the following error:
ActionController::RoutingError No Route Matches [GET] "/assets/glyphicons-halflings.png"
This is how I'm calling the image file in boostrap.css:
[class^="icon-"],
[class*=" icon-"] {
background-image: url("/assets/glyphicons-halflings.png");
}
This is how I'm rendering it in the view:
<i class="icon-user"></i>
When I run rake assets:precompile and start up the production server with rails s -e production, then I can no longer see the icons. I'm not sure why this is the case. I'm not using any gems associated with bootstrap, I just have the plain bootstrap.css file and the image file under assets/images.
EDIT:
I also added a .erb extension (bootstrap.css.erb) to use the asset_path helper, but I still only see the icons in development, not production.
Anybody have any ideas?
Well, oddly, background-image did not seem to work in production. I was loading other background images using just the background: property, so I tried that and now it (magically) works in production:
background: url(<%= asset_path 'glyphicons-halflings.png' %>);
with bootstrap.css.erb as the filename.
Still confused as to why background-image was working in development but not production ...
Try this simple approach:
background-image: url('gliphicons-halflings.png')
EDIT: glyphicons.scc.scss.erb
#font-face {
font-family: 'Glyphicons';
src: url('<%= asset_path('glyphicons-regular.eot')%>');
src: url('<%= asset_path('glyphicons-regular.eot?#iefix')%>') format('embedded-opentype'), url('<%= asset_path('glyphicons-regular.woff')%>') format('woff'), url('<%= asset_path('glyphicons-regular.ttf')%>') format('truetype'), url('<%= asset_path('glyphicons-regular.svg#glyphicons_halflingsregular')%>') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="glyphicons-"]:before {
display: inline-block;
font-family: 'Glyphicons';
font-style: normal;
font-weight: normal;
text-decoration: inherit;
*display: inline;
*zoom: 1;
}
how to emebed a font using #font-face on rails:
my fonts are located in:
/vendor/assets/stylesheets/fonts/custom-font-lists-here.eot
my stylesheet that contain a #font-face is inside:
/vendor/assets/stylesheets/fonts.css
I am using this right now
#font-face {
font-family: 'ArimoRegular';
src: url('<%= asset_path('fonts/arimo-regular-webfont.eot') %>');
src: url('<%= asset_path('fonts/arimo-regular-webfont.eot') %>'+'?#iefix') format('embedded-opentype'),
url('<%= asset_path('fonts/arimo-regular-webfont.woff') %>') format('woff'),
url('<%= asset_path('fonts/arimo-regular-webfont.ttf') %>') format('truetype'),
url('<%= asset_path('fonts/arimo-regular-webfont.svg') %>#ArimoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I wonder if this is right,
Any suggestion are welcome,
Thank you
You shouldn't need the fonts/ portion of the file path. The app/assets/fonts directory should already be included in asset_path, so you should be able to use this:
<%= asset_path('arimo-regular-webfont.eot') %>
I don't know why this happens, but I've heard of people having issues with the assets/fonts directory not being in the asset pipeline so you have to add it manually. If the above doesn't work for you, try added the directory manually by putting the following in config/application.rb:
config.assets.paths << "#{Rails.root}/app/assets/fonts"
While using asset_path helper, you should append .erb to your font.css so it becomes font.css.erb. A better solution would be to use asset helpers from sass-rails or less-rails gems, in your case font-url.
More about it: sass-rails features