CODEWITHSUNDEEP
csstwitter-bootstrapgoogle-chromeinternet-explorerfirefox
trap
trap

Reputation: 2640

Failed to load ressource in Browser Chrome and IE

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.

Upvotes: 0

Views: 1156

Answers (1)

Khurram
Khurram

Reputation: 695

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.

enter image description here

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.

Upvotes: 1

Related Questions