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!
Related
Having a difficult time trying to get the proper .ttf file from the font family and set-up into my website.
https://freefontsdownload.net/free-futura_bk_bt-font-73014.htm
body {
font-family: Algerian ;
}
can i know what is the font-family for the link i provided ? ( does not wanted to download and save it into my server )
You can directly import fonts that can be found on Google Fonts
with tags without needed to download and serves the font files locally. However, there are also fonts that are not available on Google Fonts. For those fonts, you can only download and serve it locally on server there's no way to escape. Or you may try to search and see is there anyone who have the font files on their server and then directly use theirs', but I can say most probably you wont be able to use as you will be blocked by CORS (Cross-Origin Resource Sharing).
It's actually quite simple to setup fonts. After you downloaded the font files, normally there will be font files (eot, ttf, svg, woff...) and a CSS file, just put the font files somewhere on your server (prefer on root folder named "fonts"). Then open the CSS and edit the source to the directory that you store your font files ealier. url("../fonts/your-font.ttf")
simply go onsite of google font choose font then copy meta tag then use font family.
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.
what's the easiest and most effective method for uploading fonts to a wordpress site? I have fonts on my computer I'd like to reference instead of google fonts already embedded in. wasn't sure if ftp (and in what location) or an app works best. danke.
There are several things you need to know before embedding a font in your site. I can walk you through the process here:
Make sure the font you want to upload is allowed to be on the web. Some foundries don't want their fonts embedded because people can steal them from the embedding website. Check who makes your font and what you need to do to satisfy their licensing. All Google fonts are open licenses, so you don't have to worry there.
Find the font file on your system. This is usually a .ttf or .otf file. If it is not one of those, it will be difficult to embed them correctly.
Once you have your font, you need to convert it and package it. This is easy with services like FontSquirrel. They will do all of the converting and packaging for you as well as writing the CSS to embed the fonts.
The method you are using to embed the fonts is known as #font-face. This code should be in your stylesheet. Here is a tutorial on using #font-face. Make sure when you put the code in your CSS file that the fonts are in the right directory that you are targeting in the URLs for the fonts in the stylesheet. FYI the normal stylesheet location for Wordpress themes is in your theme folder under styles.css. I believe that FontSquirrel's generated CSS puts the fonts in the same directory as the stylesheet, so they may need to be in the theme's root to work properly. Though, I would suggest putting them in a fonts folder and updating the URLs in the stylesheet.
That's it! It's a little more difficult than just adding a file, but it should work. If you have issues with spacing or lining things up, I have another answer I wrote that might help you out, there as well.
In my CSS I have
#font-face{font-family:"MyFont";
src:url("MyFont.otf")format("opentype");
on my server, I have in the same folder-
Index.html
mystyles.css
MyFont.otf
but it never pulls it through, is there something I should know about otfs ?
Well, from your code, it seems to be missing a ';', but in any case, you can check this tutorial:
How to use CSS #font-face
Or you can check this very helpful site and it's kits and generator
fontsquirrel
Bye
.otfs aren't a good file type to use. No good example of font-face I've seen uses them.
You should also provide .woff and .ttf file-types, .svg files are also seen in font-face stacks.
See if this tool is any help: FontSquirrel font kit generator
I have a wordpress site here http://itrain.com.my/v3/ as my Home Page
I am wondering why it is not displaying well in Firefox?
Anyone who is good in css?
By the way, try to look at the subpages http://www.itrain.com.my/v3/index.php/about-us/
it display well.
I am really wondering why does it happening.
Any can help me? Any suggestion, recommendations?
I think problem is with URL.
It work http://www.itrain.com.my/v3/ but doesnt work on http://itrain.com.my/v3/
Set on your server redirection (301) from non-www URL to www URL.
I would wager you have the font installed on your local machine. I don't see it on any browser. Instead, I get two 404 errors.
In other words: please make sure the font files are available at the locations their respective locations: http://www.itrain.com.my/v3/wp-content/themes/itrain/img/fonts/big_noodle_titling-webfont.woff and http://www.itrain.com.my/v3/wp-content/themes/itrain/img/fonts/bebas__-webfont.woff.
[EDIT]
I've just looked at the fonts directory listing on your site. The ttf and eot versionf of your fonts are available, the woff and svg are listed, but result in a 404 error. Furthermore, the ttf version (downloaded instead of woff in Firefox, after getting a 404) seems to generate an empty HTTP response.
So... Make sure the fonts are there, make sure they have proper privileges set (like 0644). I can't see any other issues than the font files themselves as the CSS appears to be correct.
[EDIT 2]
#kubedan provides a great tip that seems to fit your concern about the htaccess: the domain the fonts are downloaded from is always preceded with www. Firefox will refuse to download such content, you need to use the same domain.