CODEWITHSUNDEEP
htmlcssasp.netiisfonts
Abhishek Ghosh
Abhishek Ghosh

Reputation: 2706

@font-face embeded in aspx file not working

I am trying to use some interesting font in my website. But somehow the fonts aren't being loaded or not working for some reason .

I have a master page wherein 2 <asp:ContentPlaceHolder> tags are present. One in the head section for similar use like using external fonts , and another <asp:ContentPlaceHolder> in the body section.

I have tried two things :

1) One giving the url of the fonts stored on my visual studio.

2) Other giving the url of my file system.

Here is my HTML file : 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style>
        @font-face{
            font-family:Junction;
            src : url("http:localhost:63183/fonts/Junction.otf") format('opentype');
        }
        @font-face{
            font-family:chunkfive;
            font-weight:bold;
            src : url("f:\practicals7th sem\project docs\templates\temp1\chunkfive.otf") format('opentype');
        }

    </style>
</asp:Content>

And here is my body section content :

<div style="text-align: center; font-family:'Junction.otf' ; font-size: 20px; color: #db2828">
                            <%# Eval("Name") %>

Could find one <code>404</code> error but for a different bootstrap file.

Upvotes: 1

Views: 1431

Answers (1)

hutchonoid
hutchonoid

Reputation: 33306

You need to set the MimeTypes within IIS:

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
        <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        <mimeMap fileExtension=".otf" mimeType="font/opentype" />
    </staticContent>
</system.webServer>

You can then use relative paths to the fonts i.e.

 @font-face{
            font-family:Junction;
            src : url("/fonts/Junction.otf") format('opentype');
        }
        @font-face{
            font-family:chunkfive;
            font-weight:bold;
            src : url("/fonts/chunkfive.otf") format('opentype');
        }

Upvotes: 1

Related Questions