I'm using Font-awesome via the ruby gem (ruby-2.2.2, font-awesome-sass-4.3.2) and the font icons look fine locally, but are broken when viewed remotely or when deployed on a server.
I have followed the instructions laid out here but when I look at my compiled CSS the expected unicode numbers have been replaced by boxes:
.fa-glass:before {
content: "";
}
instead of
.fa-glass:before {
content: "\f000";
}
I have already tried including #charset "UTF-8"; at the top of my SASS file which imports font-awesome.
Ideas anyone?
Edit: 17/06/15
I've raised this issue with Font-awesome themselves. Hopefully they'll shed some light on it.
The problem isn't that the escaped chars are replaced with unescaped chars in the CSS.
The problem is that the font file hasn't loaded and that is why you see black boxes instead of the correct glyphs.
When looking at the CSS sent to the browser from your example site that you linked from Font-Awesomes github I can see invalid urls for the font.
font-family: 'FontAwesome';
src: url(font-path("font-awesome/fontawesome-webfont.eot"));
This means that the scss hasn't been properly parsed in your application.
Related
I am using the jPlayer example in a create-react-app. Here is a CodeSandbox showing the issue of font-awesome icon's rendering as boxes.
The icons render via css rules specifying content as unicode for <i> tags with the fa class.
I installed the font-awesome dependency which was in the jPlayer example's package.json. Then, I implemented an AudioPlayer component and used the skins provided by jPlayer. The component renders but the icons are all boxes, and I can see the unicode content in the source.
Here's an example of the project architecture. This is the play button in /src/AudioPlayer/AudioPlayer.jsx.
<Play><i className="fa">{/* Icon set in css */}</i></Play>
Then, the AudioPlayer is imported into App.jsx. App.jsx imports a stylesheet which has this relevant rule:
.fa, .fas, .far {
font-family: FontAwesome !important;
}
App.jsx is then rendered by index.js. Inside index.js, we import the audio player's stylesheets:
// Styles the jPlayer to look nice
import 'react-jplayer/dist/css/skins/sleek.min.css';
// Styles Play/Pause/Mute etc when icons (<i />) are used for them
import 'react-jplayer/dist/css/controls/iconControls.min.css';
The rule for the play button in iconControls.css looks like this:
.jp-jplayer .jp-icon-controls .jp-play i:before {
content: "\F04B";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
then within index.html's head I include the font-awesome CDN as a final attempt at fixing the boxes being rendered instead of font-awesome icons.
I think in the styles.css there is FontAwesome !important as shown below which is overriding the FontAwesome 5 Free font. You could remove this style to see the fonts coming up.
fa, .fas, .far {
font-family: FontAwesome !important;
}
Font characters show as open squares when:
The Unicode character specified doesn't exist in the font file.
The requested font file can't be found and there's no fallback specified.
Since its's Font Awesome, there's no fallback font AND the requested character doesn't exist in most fonts. So you get a double problem.
This almost always happens when the browser can't find the font file due to path issues. I'd look through your CSS to find where #font-face is requested and fix the path to match your project. I would guess this is in the player CSS file AND that it expect's a local file not from the CDN.
Also, be aware that Webpack sometimes moves files and updates paths found in CSS so you may need to move those to a "static" directory and change paths as needed.
Finally, you should check the name of the font to make sure it matches what you have available in your system. According to Font Awesome's Docs, it should be font-family: "Font Awesome 5 Free"; your's seems to have an extra back slash.
I'm using the following css:
#font-face {
font-family: 'bariol_regularregular';
src: url('Bariol_Regular.otf');
}
The font is being used and there are no errors on the page. When I add this custom font to text on the page it is visibly different to the default styling.
This is how the font should show:
However, this is how it is showing:
Pay particular attention to the apostrophe (') and the letter'g' where the most noticeable differences occur.
If I use a native app then the font shows correctly. The demo lettering on the site where I downloaded the font also displays correctly - https://www.dafontfree.net/freefonts-bariol-f64170.htm
Is there something I'm missing/not doing correctly?
The typeface has multiple glyphs available for various characters so you'll need to find the character codes.
I was browsing a website earlier with a family of fonts that I didn't recognise as being available for web.
You can view them on this page http://www.etq-amsterdam.com/collection/mid-1-white
According to inspect element, the fonts are:
#font-face {
font-family:AvenirNextLTPro-Demi;
src:url(fonts/28C41E_0_0.eot);
src:url(fonts/28C41E_0_0.eot?#iefix) format("embedded-opentype"),url(fonts/28C41E_0_0.woff)format("woff"),url(fonts/28C41E_0_0.ttf) format("truetype") }
#font-face {
font-family:AvenirNextLTPro-Regular;
src:url(fonts/28C41E_1_0.eot);
src:url(fonts/28C41E_1_0.eot?#iefix) format("embedded-opentype"),url(fonts/28C41E_1_0.woff) format("woff"),url(fonts/28C41E_1_0.ttf) format("truetype") }
I tried using the "font-family:AvenirNextLTPro-Regular;" line as I would do with other typefaces but it didn't work. Is this easily achievable or are they likely to have bought a license to use the font (if that's even possible)?
The font-face tag loads the fonts from files, in this case, from http://www.etq-amsterdam.com/css/fonts/28C41E_0_0.woff, so you would need to also have those fonts loaded on your server in order to access them from the CSS
[REVISED]
My custom icon font is not rendering in Mobile Safari on iOS 5. I've confirmed that the problem must be with my CSS.
The font works fine on iOS 6 and on desktop versions of Safari, Chrome, Firefox, and IE9 when using the corresponding eot and woff formats generated by http://www.fontsquirrel.com
#font-face
I'm currently using the following simplified #font-face declaration (SASS):
#font-face
font-family: 'Boundless'
src: asset-url('boundless.ttf', font) format('truetype')
font-weight: normal
font-style: normal
The following HTML works (it renders the desired icon character in Mobile Safari on iOS 5.1:
<h1></h1>
However, I see a <?> glyph if I try to render it in the way that Font-Awesome does:
SASS
i.bicon-biology:before
font-family: "Boundless"
content: "\f0000"
HTML
<h1><i class="bicon-biology"></i></h1>
Yet Font-Awesome icons render fine on the site.
Does anyone know what might be causing this issue?
I should also add that I tried all the recommendations made here: #font-face not embedding on mobile Safari (iPhone/iPad) and none worked. This includes adding the smiley-face hack, making sure my font urls are absolute, and trying svg fonts (which shouldn't be neccessary for iOS 5 anyway).
Mobile Safari apparently just doesn't like the utf-8 addresses I was using (/0f0000-/0f001e).
I edited the font to move the characters to the same positions that Font-Awesome uses (/00f000...), and presto, it works!
I also checked whether adding/removing 0's padding the left made a difference, and it works either way. There's just something about the other address range. :\
AGAIN: This is only an issue when the codes are used in pseudo element content. As you see above, (and ) rendered just fine when it was directly in the HTML.
I'm trying to add a custom font to a site, and I'm not sure where I'm going wrong.
In my SASS (bourbon) file, I have
#font-face {
font-family: "officina";
src: url("../fonts/officina/OfficinaSansStd-Book.otf") format("opentype");
}
body {
font-family: officina;
}
pretty basic. I have looked at the source for the page, and I don't see the officina font-file link anywhere. Should there be one? I'm concerned that the path may be the issue I'm having, but I'm not sure how to check this. I'm using rails, but I don't think I need to create a route to the font directly.
I'm also using backbone, and I've placed the font in my assets directory, which is why it is one level up from my css.
Ok, I got this resolved. The problem was that ruby wanted a route. Rather than keep the font in a separate font path, I put it in the media path which already existed, but using the stylesheets path itself in theory would have worked as well.