I changed bower.json file to install FontAwesome like below and run npm install.
It installed FontAwesome 4.3.0.
I added the font-awesome.css by using confg/env/all.js. In the browser I can see the font-awesome.css has added to the html. But I can not see fonts on the web page. By inspecting element I could not found any font loaded.
Fonts are already on fonts folder of font-awesome in my source.
Since I can see the fonts exist in your project structure this appears to be an issue with the font path.
As you can see in the first screenshot the font path is pointed to:
#font-face {
src: url ('../fonts/fontawesome-webfont.eot
however if you look at your project structure the fonts actually exist in the following location:
#font-face {
src: url ('../fontawesome/fonts/fontawesome-webfont.eot
You will need to update the font path in your css stylesheet to "../fontawesome/fonts" in order for the font resources to be located and loaded into the browser.
Related
How do I add octicons as font similar to the way atom did it?
Whilst inspecting the atom codebase I discovered that they are using the octicon icon set as font (font-family: 'Octicons Regular' & content: "\f0a4"). How would I implement the set in such a way to my own project? Is there a public release?
The following picture is a screenshot of the atom src showing the styles. (Ctrl+Shift+I)
There are no available CDNs for Octicons Regular so you have to get your own WebFontkit. Then you have to add the fonts using #font-face parameter.
Follow the below steps to add custom fonts to your HTML:-
1. Download the Octicons font:- The Octicons Regular fonts are available in this link. Download the TrueType Font file format (.ttf).
2. Create a WebFont Kit:- Upload the downloaded (.ttf) file to WebFontkit Generator.. Then download the optimal WebFontkit.
3. Extract and Upload the font files to your hosted site:- Edit the stylesheet.css file to update the url. For instance if you have url like, www.example.com. So your .css file after update woluld look like:-
#font-face {
font-family: "Octicons";
src: url("https://example.com/css/fonts/Octicons.woff") format("woff"),
url("https://example.com/css/fonts/Octicons.woff2") format("woff2")
}
4. Use Octicons font in your CSS declarations:- As you have added css fonts to your site you can use this in your CSS declarations. For e.g,
p {
font-family: Octicons;
font-weight:normal;
font-style:normal;
}
I'm hosting a pre-made theme on GitHub pages and generated with Jekyll. The theme works properly in localhost, but the fonts do not display correctly on the actual site hosted on GitHub.
Following the suggestion on this post I've changed the #import line in the style.css file to the following:
#import url("//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic");
Which, for the user in the aforementioned post, seemed to have solved the problem but for my page the wrong font is still used. Thanks in advance for any help.
HTTPS request or external link could be block from Github
But, you can download fonts from Google Font website (on the right) :
After you should be able to upload fonts to Github and easily call your font from your CSS (same folder)
#font-face {
font-family: "My Font";
font-weight: bold;
src: url('myfont.ttf');
}
(or url(github.com/link/to/myfont.ttf))
This link will show you how to properly import custom font in Github Pages :
Adding custom fonts to GitHub pages
When I run my project locally on Visual Studio 2013, Font Awesome Icons work. However when deployed they are absent.
When run from the server, the IE developer tools shows the Css coming in but there is NO CALL to the fonts. No 404 error! No 403 error! Nothing. It's like the Css is skipping over the #font-face declaration because it does not even try to call the EOT file.
Here are the facts:
Mime Types are all added to IIS 7.0 (eot, svg, woff, woff2, ttf)
The File structure to css is -- fonts > font-awesome > css
The File structure to fonts is -- fonts > font-awesome > fonts
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')
format('svg'); font-weight: normal;font-style: normal;
}
There's really not enough here to say for sure, but if I had to hazard a guess, I'd imagine you're including Font Awesome in a bundle, and the bundle path is breaking the font references.
The bundle path, i.e. ~/bundles/foo is a literal path. When the bundler joins and minifies everything it saves the file to that location. Style bundles typically use ~/Content/foo because of the tendency to reference things like images and fonts in ~/Content. Of course, bundling only happens in production, by default, so it won't affect you in development either way. I'm not sure what you're actually using as a bundle path, but that would be the first place I looked.
Another potential problem is that perhaps the bundle is not being loaded at all. This is common when you accidentally create a bundle path that maps to a physical directory. For example, if your bundle path is ~/Content/fonts, and you have a physical folder named fonts under ~/Content in your project, then your bundle will not be loaded and none of the scripts/css in that bundle would be applied to the page. Make sure your bundle path does not reference a physical directory.
UPDATE: FIXED, SEE BELOW
Turns out the server I had the font name as 'Close.otf' in my fonts folder and 'close.otf' in my code, I'm guessing my code worked fine locally because it isn't case sensitive, GitHub's server is though apparentely. Just fixed by changing the C from uppercase to lowercase, now the font shows up fine.
...
I am building a website, and for the header I am using a custom font named "close.otf". Now, before pushing my changes to my GitHub Pages repo, I edit my css and html files locally.
So I added the custom font using the #font-face rule on my local CSS file, opened that file up with Chrome, and it shows up completely fine, as you can see:
However, upon pushing the CSS file and HTML file to the GitHub server where my site is hosted, for some reason, upon loading the site in Chrome, the font shows up as follows:
Here is the code I used:
#font-face
{
font-family:"close";
src: url("../fonts/close.otf") format("opentype");
}
And yes, since the local files are a clone of the GitHub repo, it's not some simple mistake like making sure it's in the same folder as the adress etc.
It's also worth noting all other custom fonts I've added to the site have worked completely fine, like the one below the header used in the nav links.
Anyone know how to fix this?
Have you used the developer tools in your browser to see what the server is sending? Your browser is requesting a font file, but the server may be returning forbidden, not found or some other error that will help you troubleshoot.
I'm trying to use some Font Awesome Icons in my nav. Just some simple down arrows next to each list item. If I hotlink to the Font Awesome CDN, it works fine, Whenever I try to copy the files locally and upload them to my server, I just get the square boxes. I'm pretty sure all my paths are correct, just can't figure out where I'm going wrong.
http://builderpreviews22.com/
any help is appreciated.
If you are using sass or scss, make sure that the path to the font library is relative to the compiled css file and not the _variables.scss file.
A network error 500 in your site:
"NetworkError: 500 Internal Server Error - http://builderpreviews22.com/font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3"
This happens when the browser tried to load an inexistent content, in this case the fontawesome-webfont.ttf.
You have a property in your CSS that gets the fontawesome-webfont.ttf?=4.0.3 file:
url('../fonts/fontawesome-webfont.woff?v=4.0.3')
Check if you have that file inside your font-awesome folder.
This is also happens to me in my MVC project when deployed to production.
src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
change it to
src: url('../../Content/fonts/fontawesome-webfont.eot?v=4.0.3');
Registering the mime types in your web.config is not enough. Actually the solution is dumb:
After registering the mime types in web.config the application will look for .woff and .eot files extensions. The files extension in your case are actually .eot?v=4.0.3. Just rename the files to be .eot and .woff and replace their includes in other css files by removing the version and it will work like charm :D :)
If all your paths are correct make sure your static files server has CORS enabled and sets the Access-Control-Allow-Origin header. Hope that helps somebody!