@font-face doesn't doesn't work on copy of site

StackOverflow https://stackoverflow.com/questions/13332150

  •  28-11-2021
  •  | 
  •  

Question

I have used a custom font in my @font-face tags and it works successfully in my ASP.NET 3.5 website running on a local IIS site (localhost) on all (Windows) browsers. When I copy the site to another IIS site on the same server using a different port (localhost:5000), however, the font no longer renders correctly. The exact same resources are still there, the site still functions as designed, just no fonts. I have pushed the site out to a Hosting Service and the problem persists there as well.

What about the server would prevent the fonts from rendering?

EDIT : ADDED CODE

The fonts are provided in eot, woff, ttf, and svg format and are located in the following folder ...

websiteRoot/_resources/fonts/FontFace/:

FontFace-webfont.eot
FontFace-webfont.woff
FontFace-webfont.ttf
FontFace-webfont.svg

The stylesheet defining the @font-face is located in the same folder with the fonts.

websiteRoot/_resources/fonts/FontFace/stylesheet.css:

@font-face {
    font-family: "FontFace";
    src: url("FontFace-webfont.eot") format("eot");
    src: url("FontFace-webfont.eot?#iefix") format("embedded-opentype"),
         url("FontFace-webfont.woff") format("woff"),
         url("FontFace-webfont.ttf") format("truetype"),
         url("FontFace-webfont.svg#FontFace") format("svg");
    font-weight: normal;
    font-style: normal;
}

My admin_styles.css stylesheet, which lives in a different folder implements the new font:

h1, h2, h3 {
    font-family: "FontFace", Arial, sans-serif;
}

The consuming page references both of the style sheets:

<link href="/_resources/fonts/FontFace/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="/Admin/_resources/styles/admin_styles.css" rel="stylesheet" type="text/css" />

I am confident that this is not a referential issue as styles from the stylesheets are appearing. It appears to be just the font-face that is not rendering. Also this works perfectly on one local site, it's when I copy it to another local site that it does not work.

It may be worth pointing out that it's not a "copy" I pushed the code the new site using the Visual Studio 2010 "publish" feature which is set up to publish to a File System location with "delete all existing files prior to publish" set. The file system location is the directory set up as a web site in IIS 7.5.

Thanks, G

Was it helpful?

Solution

So I figured out the problem, it was kinda stupid (on me), When Visual Studio 2010 publishes, it appears that by default files with EOT, TTF, WOFF extensions are not included in the push. So while the code was published and referenced correctly, the required resource files were not included, hence the fonts could not be loaded. I simply copied the missing resources and voila! It all works again.

Thanks, G

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top