Failed to load ressource in Browser Chrome and IE - css

In my application I am using different fonts and the glyphen-icons of bootstrap.
To see the results in all the browsers, I have put all the neccessary font-types(woff, tft, svg,..) in the font-face.
For the bootstrap icons, I have just put the neccessary types in the font folder.
If I go localhost, everything works fine. In all the browsers, I can see the results.
But now I deployed my application (war) on a real server.
In fireFox i can still see the icons and the font, but not in Chrome and IE.
There I get the following error in console:
http://myTestServer.com/admin-UI/fonts/source-sans-pro/Source_Sans_Pro_400.woff Failed to load resource: the server responded with a status of 500 (Internal Server Error)
...
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.woff2
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.woff
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.ttf
I don´t understand, why does it works local and not on the real server.
Does anybody know this problem?
my Css:
#font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url('../fonts/source-sans-pro/Source_Sans_Pro_300.eot');
src: url('../fonts/source-sans-pro/Source_Sans_Pro_300.eot?#iefix') format('embedded-opentype'),
url('../fonts/source-sans-pro/Source_Sans_Pro_300.woff') format('woff'),
url('../fonts/source-sans-pro/Source_Sans_Pro_300.ttf') format('truetype'),
url('../fonts/source-sans-pro/Source_Sans_Pro_300.svg#SourceSansPro') format('svg');
Thank you!
UPDATE:
the index.html before (worked only in the localhost sever of spring Boot):
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
index.html after (this works in tomcat and also in myServer)
<!-- Bootstrap Core CSS - tomcat-->
<link href="http://localhost:8080/adminUI/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Core CSS -myTestServer-->
<link href="http://myTestServer.com/adminUI/css/bootstrap.min.css" rel="stylesheet">
The main.css I also added the absolute path. My question is now, is there a way to replace the absolute path: "http://..../" with a variable.
If I use the relavtive path that would be the same problem like at the beginning.
I hope you understand what I mean.

Your fonts and style should be in same parent directory directory like this. Look at fonts and style folder and ignore other folders this is an example.
then include the bootstrap css in in your document like this.
<link rel="stylesheet" href="http://example.com/style/bootstrap.min.css">
replace example.com with your domain. bootstrap will automatically find the font file in same parent directory. this is absolute path to bootstrap css file.

Related

#font-face not working, cannot add custom font to a website

I'm facing a problem by adding a font to my website and applying it to the title of the product -
110 DEATH KNIGHT BLOOD 963
https://wowaccounts.eu/product/110dkblood950/
Instead of showing the custom font, it applies the default one.
Here is the link to the stylesheet in my header:
<link rel="stylesheet" href="https://wowaccounts.eu/wp-content/themes/wowtheme/fonts/stylesheet.css" type="text/css" charset="utf-8">
this is what's insite the style sheet:
#font-face {
font-family: 'lifecraftregular';
src: url('https://wowaccounts.eu/wp-content/themes/wowtheme/fonts/lifecraft_font-webfont.woff2') format('woff2'),
url('https://wowaccounts.eu/wp-content/themes/wowtheme/fonts/lifecraft_font-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
and this is how I applied the font:
h1.product_title.entry-title{
font-family: 'lifecraftregular';
}
I wasted hours to find out what's the problem... no result yet. Thank you in advance!
If you inspect console you may notice two things:
1)
Failed to load resource: the server responded with a status of 404
(Not Found)
And 2)
If you open the folder structure in the sources tab, you will not find the font file like you do with stylesheet.css file (hence the 404 error).
You are targeting the text correctly. I just don't think your file is in the correct folder. Re-visit exactly where you placed the files. Is it possible that instead of the wowtheme folder, you placed them both in the default wordpress theme folder by mistake?

Right way to include google font in GWT application

I have installed google font roboto on my machine, I am also including
<link href='http://fonts.googleapis.com/css?family=Roboto:regular,medium,bold,thin' rel='stylesheet' type='text/css'>
in tag of my welcome.html file .
and in css file I am using css like
.mycss{
font-family: "robotoregular","sans-serif","arial";
font-size: 13px;
}
Its working fine in development mode, but when I deploy it on tomcat font size is 2-3px large than development mode. I don't know why its coming. can somebody help me to get out of this? Also how to import Google font in gwt.
Thanks,
First of all, it should be:
font-family: "Roboto", sans-serif;
You can include Google font in your GWT html file the same way as you did for your welcome.html. This is the link that Google recommends (you can choose your own font weights, of course):
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

unable to render font awesome icons from locally placed FA library

I have downloaded the font-awesome library and linked it to my HTML. Here is the simplest version of my code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="font-awesome.min.css">
</head>
<body>
<div id="content">
<i id="search-icon" class="fa fa-search"></i>
</div>
</body>
</html>
But, what is rendered in the browser is:
What am I missing? I need to get this working in Firefox only.
I would try to set encoding of the page first, and then check if all other files are placed in correct directories as "Copy the entire font-awesome directory into your project" in get started page says.
Firstly, when you inspect your page and click on the font-awesome.min.css file, is it linked correctly.
Secondly are the font and supporting files that come with FontAwesome sitting in the correct folder (relative to your font-awesome.min.css file)?
For example, unless you altered the CSS in the files they gave you, you need to place the /font directory that comes with FontAwesome up a directory from your CSS files.
See the following as an example of how the CSS is referencing the font files.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Steps: Change your href to point to:
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
Download the assets for FontAwesome: http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.2.0.zip
Move both the /css and /fonts folders directly next to your HTML file.

IcoMoon App icon fonts are shown as 

Everything is fine but when I use ../ it doesn't work. To call the CSS I use: <link rel="stylesheet" href="../../IcoMoon-App/style.css" /> and it do appears but as . I get the error at MainFolder/Albumes/Clarity_Deluxe_Edition/index.html, but when use the icons at MainFolder/index.html they're displayed well (note that the css location to this one is <link rel="stylesheet" href="IcoMoon-App/style.css" />). This is how my directory is structured:
MainFolder
├index.html
├css
│└index_style.css
├IcoMoon-App
│├IcoMoon-App.eot
│├IcoMoon-App.svg
│├IcoMoon-App.ttf
│├IcoMoon-App.woff
│└style.css
└Albumes
└Clarity_Deluxe_Edition
├index.html
└css
└index_style.css
Yes, because of I changed the location, I also changed the #font-face:
#font-face {
font-family: 'IcoMoon-App';
src:url('IcoMoon-App.eot?xzz47n');
src:url('IcoMoon-App.eot?#iefixxzz47n') format('embedded-opentype'),
url('IcoMoon-App.woff?xzz47n') format('woff'),
url('IcoMoon-App.ttf?xzz47n') format('truetype'),
url('IcoMoon-App.svg?xzz47n#IcoMoon-App') format('svg');
font-weight: normal;
font-style: normal;
}
Am I using wrong the "back folder" (../, don't know the exact name)? Or I did a mistake when changing the location?
One solution to this is using a different way of defining your paths.
In your CSS file, change the path to your IcoMoon font files to:
src:url('/IcoMoon-App/IcoMoon-App.eot?xzz47n');
The / at the very start of the URL makes the browser start from the domain-level of your website and then add the URL exactly as it appears in the example I gave. This will build an "absolute" URL to your IcoMoon font files, regardless of how deep in your folder structure you are.
A drawback to this approach is that the fonts may not appear when you're browsing your site locally (e.g. at http://localhost/~alej27/yoursite) because that would make the browser search for the font files at http://localhost/IcoMoon-App/IcoMoon-App.eot?xzz47n. There are ways around that (hosts file modifying and setting up a virtual domain) but that's outside the scope of this question :)

External CSS font face only showing in Chrome (no IE and Firefox)

I have a font-face CSS:
<style>
#font-face {
font-family: 'museo_slab500';
src: url('/css/fonts/museo_slab_500-webfont.eot');
src: url('/css/fonts/museo_slab_500-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/museo_slab_500-webfont.woff') format('woff'),
url('/css/fonts/museo_slab_500-webfont.ttf') format('truetype'),
url('/css/fonts/museo_slab_500-webfont.svg#museo_slab500') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
Quite straightforward. The problem is:
If I keep this font-face definition alone in its .css file (and the font-family is applied to the various headings, body in another .css file) I don't see the font applied in any browser. I checked with firebug, everything is read, the font is downloaded but is not applied.
If I move the font-face definition from an external .css file and put it INLINE in the HTML everything shows correctly.
If I remove the above code from inline inside my page and put it in an external .css and put this instead of the style tags:
<link type="text/css" rel="stylesheet" href="/adminskin/default/css/font-families.css" />
. Any hint on why this happens? I'm going crazy.
Ok ..... I found the answer to this madness.
It seems that while Google Chrome has no problems at all, both IE and Firefox (didn't try Safari or Opera) can't cope with absolute url pointing to an external .css with a font face definition.
So while this works in all browser (inside the .css is just the font-face definition)
<link rel="stylesheet" type="text/css" href="/skinadmin/default/css/font-families.min.css?v=2.0.0.0" />
This works ONLY in Google Chrome.
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/skinadmin/default/css/font-families.min.css?v=2.0.0.0" />
Isn't this madness? I think it is.

Resources