0

I'm serving static content from a separate url on a XAMPP local server running on Windows 8.1.

My HOSTS file defines three URLs that are in use, all resolving to 127.0.0.1:

127.0.0.1 localhost
127.0.0.1 dynamic
127.0.0.1 static

...where dynamic and static are both folders off of htdocs. The relevant directories within XAMPP are: 

c:\xampp\htdocs\dynamic
c:\xampp\htdocs\dynamic\css
c:\xampp\htdocs\dynamic\fonts

c:\xampp\htdocs\static
c:\xampp\htdocs\static\css
c:\xampp\htdocs\static\fonts

My main site is in: dynamic

My static content is in: static

The dynamic site and its content loads without a problem. To access an image from the static site while on the dynamic site, I discovered all I needed was to prefix "//localhost/static/" before the resource. Therefore, this works and the image displays: 

<img src="//localhost/static/images/MyImage.jpeg" />

But something isn't right with CSS style sheets. They are housed in the css subfolders off of each principal folder. And the fonts they reference are likewise housed in the fonts subfolders off of each principal folder. And for testing purposes, the folder contents are identical between the static and dynamic folder structures.

To reference a CSS on the static domain from the dynamic domain, this links to the CSS file without a problem:

<link rel="stylesheet" type="text/css" href="//localhost/static/css/fonts.css" />

And if I view the source of the page and click on the link, it shows the content of the fonts.css file, so it's definitely being read.

The content contains definitions like:

@font-face{font-family:'RobotoSlabRegular';
src:url('../fonts/robotoslab-regular-webfont.eot');
src:url('../fonts/robotoslab-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/robotoslab-regular-webfont.woff') format('woff'),
url('../fonts/robotoslab-regular-webfont.ttf') format('truetype'),
url('../fonts/robotoslab-regular-webfont.svg#RobotoSlabRegular') format('svg');
font-weight:normal;
font-style:normal;}

But the fonts are not being read and applied, even though they are on the static site in the location specified. On the other hand, if I reference the identical CSS and FONTS folders on the dynamic site, like this:

<link rel="stylesheet" type="text/css" href="./css/fonts.css" />

...then it works: the fonts are found (on the dynamic site) and applied.

But in the former case, the //localhost/static URL is found by the site code, but the definitions in the referenced CSS file are not applied. Why would this be the case? I've tried specifying complete paths in the @font-face definition instead of "..", but nothing seems to work. Any clues?

UPDATE: SOLUTION

The solution seemed to be to add to the .htaccess file of the static domain this code:

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
Tom
  • 1,836
  • 4
  • 16
  • 30
  • @Quentin: I cannot find anything on Stackoverflow that addresses and resolves this specific issue. If it is a duplicate, please provide a link to the Stackoverflow discussion that addresses and resolves this. Many thanks. – Tom Sep 21 '15 at 16:21
  • You mean like the link in the big yellow box at the top of the page? – Quentin Sep 21 '15 at 16:21
  • It appeared only after I added the comment. Yes, that does solve the problem...many thanks!!! (Not everyone supplies a link to the appropriate discussion!) – Tom Sep 21 '15 at 16:27
  • However...Other kinds of CSS content other than fonts are not being accessed, specifically styling. Are there other .htaccess commands that should be specified? – Tom Sep 21 '15 at 16:40

0 Answers0