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.
Related
I'm developing a basic web page with css file on my local machine and testing by opening the html file in the browser straight from the filesystem.
This works, but now since using the Chrome developer tools to play around with different styles by editing the css file under the Sources tab, whenever I refresh the page none of the CSS loads until I again edit it in the sources tab - just adding a return to the end is enough to load all the CSS.
Also, occasionally when refreshing the page, the Sources tab shows the contents of the css file as corrupt (a load of random characters)
I've run the css through a validator and that says it is all fine and there is no javascript on the page
I'm not a web developer so probably missing something obvious...
This is happening because you are editing css inside the Inspect Element (Chrome developer tools).
This is because the css literally lives on a webpage and it is pulled from your actual css file on your desktop (css file from the folder of your website).
Because of this, you are never actually changing an actual css on your computer, just in the browser, and that is temporary, because the same old css from your computer will load everytime you reload the page (untill you modify the css on your computer).
You should edit your changes in your actual css file on your computer inside your text editor (notepad++, visual studio code, atom, sublime text, etc ...).
That way, it is going to work as you want ! Hope you understood what I meant, if not, just tell me, so I can clarify again :)
Add this to the nginx configuration:
http {
include /etc/nginx/mime.types;
....
}
this solved it for me.
Thanks
I'm developing my wedding's website, and I have a problem I really don't understand: when I browse it on my local machine the site is rendered correctly, but if I browse the site remotely there is a section shown in a wrong way. In order to be sure about the files correctness I just removed on ftp all the site's files and re-uploaded them from scratch. Same problem. It happens on safari only, on all the other browsers the site is rendered fine
this is how I see the site locally
this is how I see the same file remotely
How can it be possible?
For anyone who want to help the link to the site is http://silviaesimone.com
thank you
The server is using the wrong MIME type for the Bebas Neue font. It sends the font as text/plain which, apparently, Safari can't handle.
Solution: make sure that files with extension .otf are served with the correct MIME type, which is font/opentype.
(It depends on the kind of server how you need to do that; see here for IIS or here for Apache).
My first assignment in web programming class is to design a website without browser side and server side script.
I made an HTML 5 document, linked to a CSS file, all of them were validated in W3C validator, everything is good. I test the web page locally on my laptop on Chrome36, Firefox30 and IE11, all good.
But I'm required to upload it to University's server, all good in Chrome and firefox but IE, however I tried to put it on the server on my laptop and access it on IE from University's PC, it behaves all good.
Apache server on my laptop, access from Uni's PC
On Uni's server, access from Uni's PC
My lecturer says I'll lose mark if it behaves so, what could be the problem and how can I solve it? Do server settings affect html's behave? Thanks!
Also, if you want, you can access it via deakin.edu.au/~yshengk/a1
Maybe the html file can't see your css? Check file path's.
The only change I would see is the file and folder path looks different. Check whether you have used correct file/folder path. Try changing the CSS, JS, images folder path between relative folder path or absolute folder path.
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!
I downloaded Font Awesome today and did it a try. In firefox and chrome (latest versions) it appears as blank squares. If a use the CDN link, it doesnt even work, the standard bullets appear instead of the blank squares. But in codepen.io, it just worked fine, using the CDN.
The html i used is just the same as the example of the lists, which is here: http://codepen.io/pietrofxq/pen/BCaoD
Does someone knows the problem?
You are using a schemaless URL to access the CDN.
If you are trying to open the page from your disk (schema being file://) then it will fail is it will use the same schema to access the CDN
Try with a full URL http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css
If you are calling it from a server, then make sure that the font files are delivered correctly. Some servers need to be told to allow the font files to be accessed.
(use the console to see if they load ok)