Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Darren Wilson 238 posts 646 karma points
    Oct 26, 2011 @ 23:03
    Darren Wilson
    0

    @font-face problems

    Hi Folks,

    I'm trying to get some fonts on my site and I'm having problems - my fonts aren't displaying. Here's what I've done so far:

    Added the fonts directly to the css folder as suggested in an earlier posting and called it with the following:

    @font-face {  
        font-family: Lato ;  
        src: url(lato-regular.eot); /* IE */  
        src: local("lato-regular.ttf"), url( lato-regular.ttf ) format("truetype"); /* non-IE */
        src: local("lato-regular.woff"), url( lato-regular.woff ) format("woff"); /* IE9 */   
    }

    .menu {
      width:950px;
      height:42px;
      font-family: "Lato";
      font-weight:normal;
      text-transform:uppercase;
      font-size:11px;
      background-color:#CCC;

    }

    The font doesn't show up.

    The earlier poster also suggests adding the mime type to the config file - I'm not sure how to do this. Would anyone mind pointing me in the right direction - this could be what's causing the problem.

    Any help will be greatly appreciated.

    Thanks

    Darren

    Copy Link
  • Jan Skovgaard 11280 posts 23678 karma points MVP 12x admin c-trib
    Oct 27, 2011 @ 00:01
    Jan Skovgaard
    1

    Hi Darren

    You can add the mime-type in the web.config file in the

    <system.webServer></system.webServer> section you can add this

    <staticContent>
                <!-- HTML4 Web font mime types -->
                <!-- Remove default IIS mime type for .eot which is application/octet-stream -->
                <remove fileExtension=".eot" />
                <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
                <mimeMap fileExtension=".otf" mimeType="font/otf" />
                <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
    </staticContent>

    I will also recommend that you use the http://www.fontsquirrel.com/fontface/generator service to generate the fonts for you if you have not done so already.

    Hope these pointers help a bit :)

    /Jan

    Copy Link
  • Darren Wilson 238 posts 646 karma points
    Oct 27, 2011 @ 00:03
    Darren Wilson
    0

    Thanks again, Yan. I'll give this a try!

    Darren

    Copy Link
  • Darren Wilson 238 posts 646 karma points
    Oct 27, 2011 @ 00:34
    Darren Wilson
    0

    Hi Yan,

    I get the following error when I insert this code:

    500 - Internal server error.

    There is a problem with the resource you are looking for, and it cannot be displayed.

    It then locks me out of the site.

    Darren

    Copy Link
  • Darren Wilson 238 posts 646 karma points
    Oct 27, 2011 @ 23:59
    Darren Wilson
    0

    Hi Yan,

    I managed to get this working - I was adding all the content, including the <staticContent></staticContent> tags. These were in place already, all I had to add was…

      <!-- HTML4 Web font mime types -->
                <!-- Remove default IIS mime type for .eot which is application/octet-stream -->
                <remove fileExtension=".eot" />
                <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
                <mimeMap fileExtension=".otf" mimeType="font/otf" />
                <mimeMap fileExtension=".woff" mimeType="font/x-woff" />

    Thanks

    Darren

    Copy Link
  • Jan Skovgaard 11280 posts 23678 karma points MVP 12x admin c-trib
    Oct 28, 2011 @ 07:52
    Jan Skovgaard
    0

    Hi Darren

    Yes, and it can sometimes be a bit confusing where the elements should be added but happy to hear you figured it out :)

    Remember to mark the post as solved.

    Cheers

    /Jan

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies