CODEWITHSUNDEEP
htmlcsswebfont-face
fignoonan
fignoonan

Reputation: 3

@font-face Not Loading In Any Browser

I am a rookie to @font-face. I've gone through all of the posts here, several tutorials and I can't figure out why my fonts aren't loading. I'm activating and deactivating the font to see if it loads via the server with no luck. Weird thing is when it's activated, it works in the browser but not locally.

I have the css file in the fonts folder and all uploaded to the server. I've tested the demo file that came with the font and that works fine.

I'm sure I'm missing something very basic and I'll feel very stupid.

Here is my @font-face css:

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

And here is the page I'm trying to get it to work on: http://takatech.com/index.2.html#

Any help is greatly appreciated.

Upvotes: 0

Views: 545

Answers (3)

Tomatrox
Tomatrox

Reputation: 693

It's because the font-family is capsuularegular and you have in your #main-wide Capsuula

So, change your CSS to this:

#main-wide {
    color: #999999;
    font-family: "capsuularegular";
    font-size: 14px;
    line-height: 30px;
    text-align: left;
}

Upvotes: 1

Ashish Charan
Ashish Charan

Reputation: 2387

Try setting the web.config to allow custom fonts download to client. Example:

<system.webServer>
  ...
  <staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  </staticContent>
</system.webServer>

Upvotes: 0

user3141031
user3141031

Reputation:

Your fonts are located in http://takatech.com/fonts/ but external stylesheets reference directories according to where the stylesheet is. So by specifying fonts/Capsuula-webfont.eot it will look for that font in http://takatech.com/fonts/fonts/Capsuula-webfont.eot

Try this instead:

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

Upvotes: 1

Related Questions