ASP.NET Web form with VB.NET - Wingdings3 font shows in design view but not at runtime in IE11

Hi sqdperu,

How are you embedding the fonts in your web page?

In your CSS(Either inline or external), use the following:

@font-face 
{ 
font-family: The Name given to your font; 
src: url(url to eot font); 
src: url(url to woff font) format(“woff”); 
src: url(url to ttf font) format(“truetype”) ; 
}

Select allOpen in new window

Also you have a TTF(TrueTypeFont) so it should be converted to EOT or WOFF. Please refer to the source article :
https://weblogs.asp.net/sreejukg/using-custom-fonts-in-your-web-pages to understand how to use WEFT tool from Microsoft to do it.

Regards,
Chinmay.

Chinmay,

Unfornately, none of that works.  I tried 4  different online converts to convert the wingdings.ttf to a .woff file and a .eot file.  Windows failed  when I tried to install them in the Fonts folder.  I believe they will have to be installed in the fonts folder so I can see them in the designer font property so I can change it to the converted font.

My code:

@font-face  /* Added so we can use Wingdings3 font.  */
            { 
                font-family: Wingdings 3; 
                src: url(C:\Users\MyUser\Downloads\fonts\WINGDNG3.eot); 
                src: url(C:\Users\MyUser\Downloads\fonts\WINGDNG3.woff) format(“woff”); 
                src:url('fonts/WINGDNG3.TTF') format('truetype'); /* browsers that support true type */ 
           } 

Select allOpen in new window

thanks

Hi sqdperu,

Please never use path for web like this. Whenever you give a path with C:\... it means the same has to be true for your clients so it "might" work on your machine(given security settings of your browser) but will not work for your client (as your site will come from Internet or Intranet zone and security restriction will block such calls to local file system).

Coming to the solution

font-family: "Wingdings 3"; As you have a space in the name
src: url("fonts/WINGDNG3.eot");
src: url("fonts/WINGDNG3.woff") format("woff"),
...
...

Select allOpen in new window

If after fixing the font family and providing proper path it still does not work, I suggest, take a clean project/page and try this technique so if there is some other css error is interfering we can rule that out.

Regards,
Chinmay.

Chinmay,

I am experienced in VB.NET.  The ASP.Net is all new to me and I am still learning it.

There is a space in font-family name because the font name in the property for the label has a space in it and I thought maybe they had to match.

The reason I tried using the C:\... path is because as I said, Windows will not allow me to install the converted fonts.  Therefore, the fonts are NOT located in the fonts folder as normal.  So I used the C:\... as one last try to get it to work.   Also, because I cannot install the converted .woff and .eot fonts, I cannot see them in the designer.  Hence, I cannot choose them in the designer to set the label font property.

I am thinking it is not possible to use the Wingdings3 font on a web form app.   As the doc you referenced says, Windows wants a .woff font for web pages (which is weird because .ttf works everywhere else) so you have to convert the ttf to woff.  I did that, but Windows will not accept those converted files and install them.

Hi sqdperu,

No worries. I will give you step by step guidance to include these fonts on your web page. And I believe you will be able to quickly migrate to ASP.Net as you already know VB.Net.

It is fine that font family has a space in its name. We have to match it in CSS by putting it in inverted comma. that's all.

Fonts in terms of Windows Apps and Web based apps work VERY differently. For Web Apps they don't have to exist on end user's machine NOR you have to install them on your machine. All you have to do is, put them in your web app and define them in CSS so they will be automatically downloaded to your client's machine and it will be used from there - no need of installation.

And when it comes to the Web, please avoid using the designer. Most of the things you can code quickly by writing the HTML behind it - and to tell you the truth, the HTML that you write will be much better than the code the designer generates and will give you more control over your app.

And the idea that I gave you, I never said you have to use those fonts in the designer. You can continue using TTF in the designer, just modify your CSS so that the font is available to the end user and include those font files in your CSS folder.

These are the steps I did
1. I created a standard VB.Net WebForms project.
2. Selected Font WINGDNG3.TTF from local Fonts folder
3. Converted it to WOFF, EOT and SVG
4. Copied these new fonts to my fonts folder(And the TTF one too).
5. Opened default.aspx, I added one label.

<asp:Label ID="Label1" runat="server" Text="SQDPERU" Font-Names="Wingdings 3" CssClass="Wingdings3Label"></asp:Label>

Select allOpen in new window

6. Opened Content\Site.css and added these

@font-face {
  font-family: 'Wingdings3';
  src: url('../fonts/Wingdings3.woff') format('woff'),
       url('../fonts/Wingdings3.ttf') format('truetype'),
       url('../fonts/Wingdings3.svg#Wingdings3') format('svg');
  font-weight: normal;
  font-style: normal;
}

.Wingdings3Label{
    font-family:'Wingdings3'
}

Select allOpen in new window

7. Save and Run the project.
8. Result

Regards,
Chinmay.

Chinmay,

Thanks for the explaination.  To be clear, this is a ASP.NET Web Forms app.  I am using VB.NET as the "code behind" I think they call it.

I need a few clarifiactions:

-  You said "...include those font files in your CSS folder."   I have no idea where the CSS folder is located.  Where do I find it?

- Step "4. Copied these new fonts to my fonts folder(And the TTF one too)."     Where is the "my fonts" folder located.  If you are talking about C:\Windows\Fonts, it will not let me copy the convereted fonts to that folder.  It automatically tries to install them, fails, and does not copy them to the folder.

- Step "6. Opened Content\Site.css and added these ".   I am guessing I can put this in my ASP.NET code / .aspx file instead?

Thanks

Hi sqdperu,

Yes. I understand that you are using VB.Net/ASP.Net WebForms, I used the same project template to do this PoC.

Please let me know how familiar you are with Visual Studio IDE? based on that I can be as detailed as required.

And, now to answer your queries(All those queries are related to Solution Explorer), press CTRL + L and a windows explorer like interface will open in Visual Studio. There is a chance that it is already open though and pressing CTRL + L will bring it in focus. It will show you current project and all the related files.

1. CSS folder is inside Project Root Folder -> Content folder. No need to copy fonts here as it was a typo, just follow the steps.
2. Fonts folder is in your Project Root folder. Do not copy these files to your Windows Folder.
3. No. Please do not experiment with it just yet. Yes you could do it very well but then you have to do it on each and ever page where you need those changes. Also, if you want to include them in ASPX directly, CSS style will be a bit different. You have to put that code between <style></style> element. When you put something in Site.css it is applied universally to all of the pages deriving from your Master page.

Regards,
Chinmay.

I am fairly familiar with IDE , mostly for VB.NET, a little for ASP.NET.  If it matters, I am using VS2013.

As you can see from my Solutions Explorer, I have no CSS folder and I have no Fonts folder.  Even if I expand any of the other folders, those foldes do not exists.   I have also looked for them in Windows Explorer.


Thanks

Great. It makes things a lot easier. It seems VS2015 and VS2013 templates are different but that is fine.

So, you don't have a CSS Folder that is fine as mentioned in previous reply, It was a typo, just follow the steps, in my steps I have not mentioned CSS folder. i have mentioned Content\Site.css, you will add the style sheet in that file.

I do see that you do not have a Font folder in project root so please create a folder called fonts, now copy all the fonts in that folder.
After you copy them, please right click the fonts and do confirm that they are included in your project. You will see an outline of their icon if they are not included in the project.

Chinmay,

I don't think this is going to work.

I added fonts folder and included them:

Added to default.aspx:

Added to Site.css:

... and the same results:

Please post your entire default.aspx.

I don't even have a real default page for this app.   It is whatever VS throws in there.  I have no idea where to put the line in at, but you can see it in there.  It is probably worth noting, I never use this default.aspx page.  I just start my ...asp.vb form in testing.
Here is the code:

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="Glass_Factory_Web_View._Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">

<asp:Label ID="Label1" runat="server" Text="SQDPERU" Font-Names="Wingdings 3" CssClass="Wingdings3Label"></asp:Label>


    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Modify this template to jump-start your ASP.NET application.</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET, visit <a href="http://asp.net" title="ASP.NET Website">http://asp.net</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET.
                If you have any questions about ASP.NET visit <a href="http://forums.asp.net/18.aspx" title="ASP.NET Forum">our forums</a>.
            </p>
        </div>
    </section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <h3>We suggest the following:</h3>
    <ol class="round">
        <li class="one">
            <h5>Getting Started</h5>
            ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
            A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245146">Learn more…</a>
        </li>
        <li class="two">
            <h5>Add NuGet packages and jump-start your coding</h5>
            NuGet makes it easy to install and update free libraries and tools.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245147">Learn more…</a>
        </li>
        <li class="three">
            <h5>Find Web Hosting</h5>
            You can easily find a web hosting company that offers the right mix of features and price for your applications.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245143">Learn more…</a>
        </li>
    </ol>
</asp:Content>

Select allOpen in new window

thanks

And where is your Alert level content in this page?

Also move

<asp:Label ID="Label1" runat="server" Text="SQDPERU" Font-Names="Wingdings 3" CssClass="Wingdings3Label"></asp:Label>

Select allOpen in new window

inside

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<asp:Label ID="Label1" runat="server" Text="SQDPERU" Font-Names="Wingdings 3" CssClass="Wingdings3Label"></asp:Label>
....

Select allOpen in new window

https://www.experts-exchange.com/questions/29117819/ASP-NET-Web-form-with-VB-NET-Wingdings3-font-shows-in-design-view-but-not-at-runtime-in-IE11.html?anchorAnswerId=42684708#a42684708

I have no idea what Alert level is.

Moving the line in default.aspx made no difference.
Sorry

Hmmmm. Interesting. The screenshot that you have shared :
https://filedb.experts-exchange.com/incoming/2018/09_w38/1385231/results.png

Mentions this

Alert Level
No Delay P
....

where is that content on this page?

I'm sorry, I thought you meant in the default.aspx.  

Here it is:

           <asp:Label ID="lblAlertLvl" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small" style="top: 217px; left: 1194px; position: absolute; height: 19px; width: 93px" Text="Alert Level"></asp:Label>
            <asp:Label ID="lblAlertUp" runat="server" Font-Names="Wingdings 3" ForeColor="Green" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 242px; bottom: 542px" Text="p"></asp:Label>
            <asp:Label ID="lblAlertLeft" runat="server" Font-Names="Wingdings 3" ForeColor="#FFD100" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 271px" Text="t"></asp:Label>
            <asp:Label ID="lblAlertRight" runat="server" Font-Names="Wingdings 3" ForeColor="#FFD100" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 299px" Text="u"></asp:Label>
            <asp:Label ID="lblAlertDown" runat="server" Font-Names="Wingdings 3" ForeColor="Red" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 331px; bottom: 453px" Text="q"></asp:Label>
            <asp:Label ID="lblAlertNoDly" runat="server" Font-Names="Arial" Font-Size="Small" style="top: 244px; left: 1227px; position: absolute; height: 14px; width: 103px" Text="No Delay"></asp:Label>

Select allOpen in new window

And yes, it says "Wingdings 3" with a space because that is what VS automatically puts in there when I choose it in the properties:

Please add cssclass attribute as I have added in my label.
Also I never said anything against VS putting a space in fonts name. When we put CSS we have to consider that we name custom classes without space that's why I have winding3label.

Sorry I am posting from my cell hence not able to write the example.

Is this what you mean?

Sorry, it didn't work.

Thanks

Please post your tags from the Aspx. I think there is some conflict here. Or the fonts are not being included. Also one tip, the more you work in Aspx the better results you will get. Designer generally messes things up.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GFview.aspx.vb" Inherits="Glass_Factory_Web_View.GFview" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Glass Factory Web View</title>
    <!-- Hierarchical GridView in ASP.NET script below -->
    <script type="text/javascript">
        function ExpandCollapse(obj) {
            var div = document.getElementById(obj);
            var img = document.getElementById('img' + obj);

            if (div) {
                if (div.style.display == "none") {
                    div.style.display = "block";
                    img.src = "images/minus.gif";
                }
                else {
                    div.style.display = "none";
                    img.src = "images/plus.gif";
                }
            }
        }
    </script>

    <style type="text/css">
        .Grid {
            top: 7px;
            left: 7px;
            position: absolute;
            height: 147px;
            width: 378px;
        }
        <!-- Hierarchical GridView in ASP.NET code below -->
         .InvisibleCol
        {
        display:none;
        }
        .auto-style1 {
            width: 21px;
            height: 21px;
            top: 243px;
            left: 1198px;
            position: absolute;
            bottom: 539px;
        }
        .auto-style2 {
            width: 21px;
            height: 21px;
            top: 271px;
            left: 1198px;
            position: absolute;
            right: 271px;
            bottom: 511px;
        }
        .auto-style3 {
            width: 21px;
            height: 21px;
            top: 300px;
            left: 1198px;
            position: absolute;
        }
        .auto-style4 {
            width: 21px;
            height: 21px;
            left: 1198px;
            position: absolute;
            top: 330px;
        }
        
    </style>
</head>
<body style="top: -4px; left: -6px; position: absolute; height: 803px; width: 1490px">
    <form id="form1" runat="server">
    <div style="height: 796px; width: 1423px">
    
            <asp:Label ID="lblMfgAttnmnt" runat="server" Font-Bold="True" style="height: 19px; width: 150px; top: 464px; left: 256px; position: absolute; bottom: 320px;" Text="Overall Attainment" Font-Names="Arial"></asp:Label>
            <asp:Button ID="btnTest" runat="server" style="height: 26px; top: 14px; left: 928px; position: absolute; width: 50px; margin-left: 422px" Text="Test" />
            <asp:Label ID="lblSchdEnd" runat="server" style="height: 19px; width: 96px; top: 504px; left: 10px; position: absolute; margin-bottom: 2px" Text="Sched End:" Font-Names="Arial" Font-Size="Medium"></asp:Label>
            <asp:TextBox ID="txtOrder" runat="server" style="height: 23px; width: 102px; top: 12px; left: 1229px; position: absolute; right: 151px;"></asp:TextBox>
            <asp:TextBox ID="txtSchdStart" runat="server" style="height: 22px; width: 85px; top: 461px; left: 118px; position: absolute" Font-Names="Arial" Font-Size="Medium" ReadOnly="True"></asp:TextBox>
            <asp:TextBox ID="txtSchdEnd" runat="server" style="height: 22px; width: 86px; top: 498px; left: 117px; position: absolute" Font-Names="Arial" Font-Size="Medium" ReadOnly="True"></asp:TextBox>
            <asp:Label ID="Label4" runat="server" style="top: 135px; left: 1164px; position: absolute; height: 19px; width: 32px" Text="SS:"></asp:Label>
    
            <asp:Label ID="lblSchdStart" runat="server" style="height: 19px; width: 96px; top: 466px; left: 10px; position: absolute; margin-bottom: 0px" Text="Sched Start:" Font-Names="Arial"></asp:Label>
    
            <asp:Label ID="lblActStart" runat="server" style="height: 19px; width: 96px; top: 541px; left: 10px; position: absolute; margin-bottom: 0px" Text="Actual Start:" Font-Names="Arial"></asp:Label>
    
            <asp:Label ID="lblActEnd" runat="server" style="height: 19px; width: 96px; top: 577px; left: 10px; position: absolute; margin-bottom: 0px" Text="Actual End:" Font-Names="Arial"></asp:Label>
    
            <asp:TextBox ID="txtActEnd" runat="server" style="height: 22px; width: 86px; top: 571px; left: 117px; position: absolute; right: 1279px;" Font-Names="Arial" Font-Size="Medium" ReadOnly="True"></asp:TextBox>
            <asp:TextBox ID="txtActStart" runat="server" style="height: 22px; width: 86px; top: 535px; left: 117px; position: absolute; bottom: 240px;" Font-Names="Arial" Font-Size="Medium" ReadOnly="True"></asp:TextBox>
    
            <asp:Label ID="lblMfg" runat="server" Font-Bold="True" style="height: 19px; width: 110px; top: 433px; left: 8px; position: absolute" Text="Manufacturing" Font-Names="Arial" ForeColor="#009530"></asp:Label>
            <asp:TextBox ID="txtMfgAttainment" runat="server" style="height: 22px; width: 50px; top: 497px; left: 291px; position: absolute" Font-Bold="True" Font-Names="Arial" Font-Size="Medium" ReadOnly="True"></asp:TextBox>
            <asp:Label ID="Label5" runat="server" style="top: 17px; left: 1168px; position: absolute; height: 19px; width: 46px" Text="Order:"></asp:Label>
    
            <asp:Label ID="Label6" runat="server" style="top: 63px; left: 1159px; position: absolute; height: 19px; width: 46px" Text="Item:"></asp:Label>
    
            <asp:Label ID="Label7" runat="server" style="top: 94px; left: 1161px; position: absolute; height: 19px; width: 28px" Text="SL:"></asp:Label>
    
            <asp:TextBox ID="txtSL" runat="server" style="height: 23px; width: 33px; top: 96px; position: absolute; right: 218px;"></asp:TextBox>
            <asp:TextBox ID="txtItem" runat="server" style="height: 23px; width: 54px; top: 58px; position: absolute; right: 218px;"></asp:TextBox>
            <asp:TextBox ID="txtSS" runat="server" style="height: 23px; width: 33px; top: 133px; position: absolute; right: 217px;"></asp:TextBox>
    
            <asp:Label ID="Label8" runat="server" style="top: 62px; left: 1286px; position: absolute; height: 19px; width: 46px" Text="Plant:" BackColor="Red" ForeColor="White"></asp:Label>
    
            <asp:TextBox ID="txtPlant" runat="server" style="height: 23px; width: 54px; top: 57px; left: 1341px; position: absolute; right: 87px;"></asp:TextBox>
    
            <asp:Label ID="lblDrawings" runat="server" Font-Bold="True" style="height: 19px; width: 110px; top: 38px; left: 8px; position: absolute" Text="Drawings" Font-Names="Arial" ForeColor="#009530"></asp:Label>
            <asp:RadioButton ID="optQ2C" runat="server" style="top: 108px; left: 1331px; position: absolute; height: 21px; width: 68px" Text="Q2C" />
            <asp:RadioButton ID="optSAP" runat="server" style="top: 147px; left: 1333px; position: absolute; height: 21px; width: 61px" Text="SAP" />
    
            <asp:Label ID="lblDeliveryImp" runat="server" Font-Bold="True" style="height: 19px; width: 197px; top: 195px; left: 8px; position: absolute" Text="Delivery Impact Indicator" Font-Names="Arial" ForeColor="#009530"></asp:Label>
    
            <asp:Label ID="lblGates" runat="server" Font-Bold="True" style="height: 19px; width: 57px; top: 630px; left: 9px; position: absolute" Text="Gates" Font-Names="Arial" ForeColor="#009530"></asp:Label>
          <div style="width: 1132px; top: 63px; left: 7px; position: absolute; height: 122px; overflow:auto">
           <asp:GridView ID="grdDrawings" runat="server" BackColor="#EDEDED" Font-Names="Arial" Font-Size="Small" style="top: 4px; left: 1px; position: absolute; height: 73px; width: 1110px" Height="120px" GridLines="Vertical">
                 <HeaderStyle BackColor="#9FA0A4" Font-Bold="True" ForeColor="Black" Height="22px"></HeaderStyle>
                 <AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px" BackColor="#DCDCDC"></AlternatingRowStyle>
           </asp:GridView>
          </div>
    
            <asp:Label ID="lblPhotos" runat="server" Font-Bold="True" style="height: 19px; width: 139px; top: 712px; left: 9px; position: absolute" Text="Product Photos" Font-Names="Arial" ForeColor="#009530"></asp:Label>
          
        <asp:Panel ID="panDelvImpInd" runat="server" style="top: 219px; left: 8px; position: absolute; height: 202px; width: 1132px; overflow:auto">
            
        <asp:GridView id="GridViewHierachical" runat="server" AutoGenerateColumns="False" CellPadding="0" CellSpacing="2" GridLines="Vertical" DataKeyNames="delay_id" AllowPaging="true"
            BackColor="White" BorderWidth="1px" BorderStyle="Solid" BorderColor="Black" PageSize="10" style="top: 4px; left: 2px; position: absolute; height: 22px; width: 98%; border-right-style: none; border-right-color: inherit; border-right-width: medium;"
            OnPageIndexChanging="GridViewHierachical_PageIndexChanging"
            OnRowDataBound="GridViewHierachical_RowDataBound" Font-Names="Arial" Font-Size="Small">
            <Columns>
                <asp:TemplateField HeaderText=" ">
                    <ItemStyle Width="1.30%" />
                    <ItemTemplate>
                        <a href="javascript:ExpandCollapse('div<%# Eval("delay_id")%>');" style="padding-left:2px;">
                            <img id="imgdiv<%# Eval("delay_id")%>" alt="" style="width:9px; border:0px;" src="images/plus.gif"/>
                        </a>                    
                        <asp:Label ID="lblDelayID" Text='<%# Eval("delay_id")%>' Visible="true" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="status_nm" HeaderText="Status">
                    <ItemStyle Width="10%" />
                </asp:BoundField>
                <asp:BoundField DataField="status_desc" HeaderText="Description">
                    <ItemStyle Width="20%" />
                </asp:BoundField>
                <asp:BoundField DataField="comment" HeaderText="Comments">
                    <ItemStyle Width="20%" />
                </asp:BoundField>
                <asp:BoundField DataField="rec_dt_tm" HeaderText="Record Dt"  DataFormatString="{0:MM/dd/yyyy   hh:mm tt}">
                    <ItemStyle Width="15%" />
                </asp:BoundField>
                <asp:BoundField DataField="rec_by" HeaderText="Record By">
                    <ItemStyle Width="15%" />
                </asp:BoundField>
                <asp:TemplateField>
                    <HeaderStyle CssClass="InvisibleCol" />
                    <ItemStyle CssClass="InvisibleCol" />                                                        
                    <ItemTemplate>
                    </td></tr>
                        <tr>
                            <td colspan="6">
                                <div id="div<%# Eval("delay_id")%>" style="display:none;position:relative;left:10px;overflow:auto;width:99%;">
                                    <asp:GridView id="GridViewDetails" runat="server" 
                                        AllowSorting="false" AutoGenerateColumns="False" Width="100%"
                                        CellSpacing="1" CellPadding="0" GridLines="Both" DataKeyNames="delay_id"
                                        BackColor="White" BorderWidth="2px" BorderStyle="Ridge"
                                        BorderColor="White" AllowPaging="false" ForeColor="#000066">
                                        <Columns>
                                            <asp:BoundField DataField="delay_id" HeaderText=" ">
                                                <ItemStyle Width="1%" />
                                            </asp:BoundField>
                                            <asp:BoundField DataField="reason_nm" HeaderText="Reason">
                                                <ItemStyle Width="30%" />
                                            </asp:BoundField>
                                            <asp:BoundField DataField="reason_desc" HeaderText="Description">
                                                <ItemStyle Width="30%" />
                                            </asp:BoundField>
                                        </Columns>
                                        <RowStyle BackColor="#CBCBCB" ForeColor="Black" Height="20px"></RowStyle>
                                        <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
                                        <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left"></PagerStyle>
                                        <HeaderStyle BackColor="#626469" Font-Bold="True" ForeColor="White"></HeaderStyle>
                                        <AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px"></AlternatingRowStyle>
                                    </asp:GridView>
                                </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#CCCCCC" ForeColor="Black"></FooterStyle>
            <RowStyle BackColor="#EDEDED" ForeColor="Black" Height="22px"></RowStyle>
            <HeaderStyle BackColor="#9FA0A4" Font-Bold="True" ForeColor="Black" Height="22px"></HeaderStyle>
            <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
            <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Right"></PagerStyle>
            <AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px" BackColor="#DCDCDC"></AlternatingRowStyle>
        </asp:GridView>
            
        </asp:Panel>

            <asp:Label ID="lblAlertLvl" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small" style="top: 217px; left: 1194px; position: absolute; height: 19px; width: 93px" Text="Alert Level"></asp:Label>
            <asp:Label ID="lblAlertUp" runat="server" Font-Names="Wingdings 3" ForeColor="Green" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 242px; bottom: 542px" Text="p" CssClass="Wingdings3Label"></asp:Label>
            <asp:Label ID="lblAlertLeft" runat="server" Font-Names="Wingdings 3" ForeColor="#FFD100" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 271px" Text="t"></asp:Label>
            <asp:Label ID="lblAlertRight" runat="server" Font-Names="Wingdings 3" ForeColor="#FFD100" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 299px" Text="u"></asp:Label>
            <asp:Label ID="lblAlertDown" runat="server" Font-Names="Wingdings 3" ForeColor="Red" style="left: 1330px; position: absolute; height: 19px; width: 17px; top: 331px; bottom: 453px" Text="q"></asp:Label>
            <asp:Label ID="lblAlertNoDly" runat="server" Font-Names="Arial" Font-Size="Small" style="top: 244px; left: 1227px; position: absolute; height: 14px; width: 103px" Text="No Delay"></asp:Label>
    
            <asp:Label ID="lblPotEarly" runat="server" Font-Names="Arial" Font-Size="Small" style="top: 272px; left: 1227px; position: absolute; height: 14px; width: 103px" Text="Potential Early"></asp:Label>
    
            <asp:Label ID="lblPotDelay" runat="server" Font-Names="Arial" Font-Size="Small" style="top: 301px; left: 1227px; position: absolute; height: 14px; width: 103px" Text="Potential Delay"></asp:Label>
    
            <asp:Label ID="lblDelayed" runat="server" Font-Names="Arial" Font-Size="Small" style="top: 331px; left: 1227px; position: absolute; height: 14px; width: 103px; bottom: 458px;" Text="Delayed"></asp:Label>
    
            <img alt="" style="border:0px;" class="auto-style1" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/GreenUp.PNG" /><img alt="" class="auto-style2" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/YellowLeft.PNG" /><img alt="" class="auto-style3" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/YellowRight.PNG" /><img alt="" class="auto-style4" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/RedDown.PNG" />
            
            <asp:Panel ID="panGates" runat="server" style="top: 655px; left: 9px; position: absolute; height: 47px; width: 1138px;overflow:auto">
                <asp:GridView ID="grdGates" runat="server" BackColor="#EDEDED" Font-Names="Arial" Font-Size="Small">
                    <HeaderStyle BackColor="#9FA0A4" />
                </asp:GridView>
            </asp:Panel>

    </div>
      
    </form>
</body>
</html>

Select allOpen in new window

Hi sqdperu,

The code you have posted does not utilize master page hence the CSS file is not applied to your current page.

I added the following code in existing style

...
...
  @font-face {
            font-family: 'Wingdings3';
            src: url('../fonts/Wingdings3.woff') format('woff'), url('../fonts/Wingdings3.ttf') format('truetype'), url('../fonts/Wingdings3.svg#Wingdings3') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        .Wingdings3Label {
            font-family: 'Wingdings3';
        }
    </style>

Select allOpen in new window

as you are not using a Master page here, we have to apply style sheet on per-page basis.

Also I would like to know if this is a learning exercise or you are implementing a real-world system?

Regards,
Chinmay.

I added it to the end of the ASP code for my page above the </style> tag.  Sorry, but still same results - shows the letter instead of the wingding.

To answer your question, both.   My experince is in VB6, VB.NET, and MS SQL server.   So I am new to ASP.NET and ASP.NET Web forms app.
My task is to develop this single web page.  I will then hand it off to someone else who will tweak the look of the page and actually implement the page into production.  This will only be use inside our company on the intranet.

Which browser you are using? I used your code in a page and was able to display the green arrow. Can you please check in browser console, do you see any errors? Based on your browser, you have to use F12 or CTRL + SHIFT + I to access browser console.

And yes, if some one is going to take care of the tweaks then we are absolutely fine.

I am using IE 11.  I tried it in Firefox and Chrome and got the same results.

IE11:

Fair enough. Right click on the page in IE and then do a ViewSource, I think the CssClass is not applied but the only way to be sure about it is to check whether we have it in the background or not. Whatever you see in page's view source please post it here.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	Glass Factory Web View
</title>
    <!-- Hierarchical GridView in ASP.NET script below -->
    <script type="text/javascript">
        function ExpandCollapse(obj) {
            var div = document.getElementById(obj);
            var img = document.getElementById('img' + obj);

            if (div) {
                if (div.style.display == "none") {
                    div.style.display = "block";
                    img.src = "images/minus.gif";
                }
                else {
                    div.style.display = "none";
                    img.src = "images/plus.gif";
                }
            }
        }
    </script>

    <style type="text/css">
        .Grid {
            top: 7px;
            left: 7px;
            position: absolute;
            height: 147px;
            width: 378px;
        }
        <!-- Hierarchical GridView in ASP.NET code below -->
         .InvisibleCol
        {
        display:none;
        }
        .auto-style1 {
            width: 21px;
            height: 21px;
            top: 243px;
            left: 1198px;
            position: absolute;
            bottom: 539px;
        }
        .auto-style2 {
            width: 21px;
            height: 21px;
            top: 271px;
            left: 1198px;
            position: absolute;
            right: 271px;
            bottom: 511px;
        }
        .auto-style3 {
            width: 21px;
            height: 21px;
            top: 300px;
            left: 1198px;
            position: absolute;
        }
        .auto-style4 {
            width: 21px;
            height: 21px;
            left: 1198px;
            position: absolute;
            top: 330px;
        }
          @font-face {
            font-family: 'Wingdings3';
            src: url('../fonts/Wingdings3.woff') format('woff'), url('../fonts/Wingdings3.ttf') format('truetype'), url('../fonts/Wingdings3.svg#Wingdings3') format('svg');
            font-weight: normal;
            font-style: normal;
        }
            .Wingdings3Label
        {
            font-family: 'Wingdings3';
        }
    </style>
</head>
<body style="top: -4px; left: -6px; position: absolute; height: 803px; width: 1490px">
    <form method="post" action="./GFview.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="T339/KxWwuQvNHLX6h26Lk2nd4uCZn26+iVXukNpwVwr563QdbL/q9300999sn8IzGSconuRlYxFhXCz6oJWFI+NbIQa4Br8Z2GD7Lt22i6wD8yFqMC/VbYuat9byYhEICWjDR6PS97KoV3hIEyRE5AHfGkIVWDAuF2htscBlYR/jGc4P1qScDM6O6NO+3GCSfGFoUqbYEwPKZ5bTx6cAtNCMJZUXHYlbygxEvboVTjReirTxbIO24Huy4f1Puh0joF/0JcnSGSI5+Ob7uSS9rO1skP52ayEcSp4f/50FGGuMwmiV76imo/InoyT4Xmd+MGA2i5LkUVigqfzMRJTZTXcc+/7xh1DimNMAclrX52gnmAVzFfY2yhSCSWNFKICIAuOtYJpsQKuQm32NI6fmX/Z10tlSTbCydSg+yX+99IJvZHU/1KaML+YBoONz8efu59caT3s/Mv0Viaufe+L6CZel25UBo7Zrv5L9ULHyJu7Zjfe++tr3wo4iFQ8QGA/umA6KsRPrvF9309V08bnX8bpXOEV7DMTIKBIgc+FHjwigtOXljrp+R7XiAQPI+rA2k9aXCBiQycMhvAOBMAequgyZO8wptZEl6EZpA20IHaob8L3FSk5KzS7cU+UEdOw1ISOcf+bBzNTCjsnNm49obx2F7ShScbCNsLbKbfHz66KdfxasD/0mPsoE0L8rnczgfxSskILQhPa0+CcfyQW/oZMCPHB1qfHJJj2LApjg45LvPodvQ6oin2uxuPZMOGg+NB969JSg6PncAr8uuXLhMtxNZHnDfw1Df+S29GKbpGQae3lExdUlUOsZZXscNLpMVRaO6LY9H2r6IQgV+K2OXmNS5fXbIp4YbLYqNQA+MWgOVXLmI62zYYBbnLXhAbbkZMhK5so+eB+AFKmvcZjqIIZIVU/1ef+LJbjB9r6qoGwwAYeHUMKts05ub717tWH" />
</div>

    <div style="height: 796px; width: 1423px">
    
            <span id="lblMfgAttnmnt" style="font-family:Arial;font-weight:bold;height: 19px; width: 150px; top: 464px; left: 256px; position: absolute; bottom: 320px;">Overall Attainment</span>
            <input type="submit" name="btnTest" value="Test" id="btnTest" style="height: 26px; top: 14px; left: 928px; position: absolute; width: 50px; margin-left: 422px" />
            <span id="lblSchdEnd" style="font-family:Arial;font-size:Medium;height:19px;width:96px;top:504px;left:10px;position:absolute;margin-bottom:2px;text-align:right;">Sched End:</span>
            <input name="txtOrder" type="text" id="txtOrder" style="height: 23px; width: 102px; top: 12px; left: 1229px; position: absolute; right: 151px;" />
            <input name="txtSchdStart" type="text" readonly="readonly" id="txtSchdStart" style="font-family:Arial;font-size:Medium;height: 22px; width: 85px; top: 461px; left: 118px; position: absolute" />
            <input name="txtSchdEnd" type="text" readonly="readonly" id="txtSchdEnd" style="font-family:Arial;font-size:Medium;height: 22px; width: 86px; top: 498px; left: 117px; position: absolute" />
            <span id="Label4" style="top: 135px; left: 1164px; position: absolute; height: 19px; width: 32px">SS:</span>
    
            <span id="lblSchdStart" style="font-family:Arial;height:19px;width:96px;top:466px;left:10px;position:absolute;margin-bottom:0px;text-align:right;">Sched Start:</span>
    
            <span id="lblActStart" style="font-family:Arial;height:19px;width:96px;top:541px;left:10px;position:absolute;margin-bottom:0px;text-align:right;">Actual Start:</span>
    
            <span id="lblActEnd" style="font-family:Arial;height:19px;width:96px;top:577px;left:10px;position:absolute;margin-bottom:0px;text-align:right;">Actual End:</span>
    
            <input name="txtActEnd" type="text" readonly="readonly" id="txtActEnd" style="font-family:Arial;font-size:Medium;height: 22px; width: 86px; top: 571px; left: 117px; position: absolute; right: 1279px;" />
            <input name="txtActStart" type="text" readonly="readonly" id="txtActStart" style="font-family:Arial;font-size:Medium;height: 22px; width: 86px; top: 535px; left: 117px; position: absolute; bottom: 240px;" />
    
            <span id="lblMfg" style="color:#009530;font-family:Arial;font-weight:bold;height: 19px; width: 110px; top: 433px; left: 8px; position: absolute">Manufacturing</span>
            <input name="txtMfgAttainment" type="text" readonly="readonly" id="txtMfgAttainment" style="font-family:Arial;font-size:Medium;font-weight:bold;height: 22px; width: 50px; top: 497px; left: 291px; position: absolute" />
            <span id="Label5" style="top: 17px; left: 1168px; position: absolute; height: 19px; width: 46px">Order:</span>
    
            <span id="Label6" style="top: 63px; left: 1159px; position: absolute; height: 19px; width: 46px">Item:</span>
    
            <span id="Label7" style="top: 94px; left: 1161px; position: absolute; height: 19px; width: 28px">SL:</span>
    
            <input name="txtSL" type="text" id="txtSL" style="height: 23px; width: 33px; top: 96px; position: absolute; right: 218px;" />
            <input name="txtItem" type="text" id="txtItem" style="height: 23px; width: 54px; top: 58px; position: absolute; right: 218px;" />
            <input name="txtSS" type="text" id="txtSS" style="height: 23px; width: 33px; top: 133px; position: absolute; right: 217px;" />
    
            <span id="Label8" style="color:White;background-color:Red;top: 62px; left: 1286px; position: absolute; height: 19px; width: 46px">Plant:</span>
    
            <input name="txtPlant" type="text" id="txtPlant" style="height: 23px; width: 54px; top: 57px; left: 1341px; position: absolute; right: 87px;" />
    
            <span id="lblDrawings" style="color:#009530;font-family:Arial;font-weight:bold;height: 19px; width: 110px; top: 38px; left: 8px; position: absolute">Drawings</span>
            <span style="top: 108px; left: 1331px; position: absolute; height: 21px; width: 68px"><input id="optQ2C" type="radio" name="optQ2C" value="optQ2C" /><label for="optQ2C">Q2C</label></span>
            <span style="top: 147px; left: 1333px; position: absolute; height: 21px; width: 61px"><input id="optSAP" type="radio" name="optSAP" value="optSAP" /><label for="optSAP">SAP</label></span>
    
            <span id="lblDeliveryImp" style="color:#009530;font-family:Arial;font-weight:bold;height: 19px; width: 197px; top: 195px; left: 8px; position: absolute">Delivery Impact Indicator</span>
    
            <span id="lblGates" style="color:#009530;font-family:Arial;font-weight:bold;height: 19px; width: 57px; top: 630px; left: 9px; position: absolute">Gates</span>
          <div style="width: 1132px; top: 63px; left: 7px; position: absolute; height: 122px; overflow:auto">
           <div>

</div>
          </div>
    
            <span id="lblPhotos" style="color:#009530;font-family:Arial;font-weight:bold;height: 19px; width: 139px; top: 712px; left: 9px; position: absolute">Product Photos</span>
          
        <div id="panDelvImpInd" style="top: 219px; left: 8px; position: absolute; height: 202px; width: 1132px; overflow:auto">
	
            
        <div>

	</div>
            
        
</div>

            <span id="lblAlertLvl" style="font-family:Arial;font-size:Small;font-weight:bold;top: 217px; left: 1194px; position: absolute; height: 19px; width: 93px">Alert Level</span>
            <span id="lblAlertUp" class="Wingdings3Label" style="color:Green;font-family:Wingdings 3;left: 1330px; position: absolute; height: 19px; width: 17px; top: 242px; bottom: 542px">p</span>
            <span id="lblAlertLeft" style="color:#FFD100;font-family:Wingdings 3;left: 1330px; position: absolute; height: 19px; width: 17px; top: 271px">t</span>
            <span id="lblAlertRight" style="color:#FFD100;font-family:Wingdings 3;left: 1330px; position: absolute; height: 19px; width: 17px; top: 299px">u</span>
            <span id="lblAlertDown" style="color:Red;font-family:Wingdings 3;left: 1330px; position: absolute; height: 19px; width: 17px; top: 331px; bottom: 453px">q</span>
            <span id="lblAlertNoDly" style="font-family:Arial;font-size:Small;top: 244px; left: 1227px; position: absolute; height: 14px; width: 103px">No Delay</span>
    
            <span id="lblPotEarly" style="font-family:Arial;font-size:Small;top: 272px; left: 1227px; position: absolute; height: 14px; width: 103px">Potential Early</span>
    
            <span id="lblPotDelay" style="font-family:Arial;font-size:Small;top: 301px; left: 1227px; position: absolute; height: 14px; width: 103px">Potential Delay</span>
    
            <span id="lblDelayed" style="font-family:Arial;font-size:Small;top: 331px; left: 1227px; position: absolute; height: 14px; width: 103px; bottom: 458px;">Delayed</span>
    
            <img alt="" style="border:0px;" class="auto-style1" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/GreenUp.PNG" /><img alt="" class="auto-style2" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/YellowLeft.PNG" /><img alt="" class="auto-style3" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/YellowRight.PNG" /><img alt="" class="auto-style4" src="file:///C:/SourceCode/VB2013/WebformsASP.NET/Glass%20Factory%20Web%20View/Images/RedDown.PNG" />
            
            <div id="panGates" style="top: 655px; left: 9px; position: absolute; height: 47px; width: 1138px;overflow:auto">
	
                <div>

	</div>
            
</div>

    </div>
      
    
<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="A729DD31" />
	<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="kEA/YaMImvAYj2S0yWLI/+NfRtSHtg3i7JZIGRscUkhCYkdrssJSGngFEuaPdA4OCygZc5S+WOfmm2c24Kb6wJazy9Q13O0ymusRg2rTFiFlMjGWmbxon/4lYZsFiEeiYB2W6ZDouCq1+MnoocYPku+P2mWgHo1A46CcblcSa5drksI0BnFwP/9gv/7Sf9biqjpY++wcE1gKrY3964dEDRpB6Fpt1sM31Iou5c01cLvyZi+zQlW3C41WgdZbehKqDuCnL51P36SD+s+kzwzNF2ZcGKqqvWzfMaHYEstfiM/o0JtqHenykIPPrJn7fT+Xd15q3DU42yymjPK0aEC3H4TL4oIZhclF4qf51EC6bvifLbCGAq660xlqR1CkhLH1" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"1f0e404de8234eb8a1bdca7ac069d6c1"}
</script>
<script type="text/javascript" src="http://localhost:52308/dcd03faff1ea4ad7aa4dcfc468f9d4d8/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Select allOpen in new window

Open the fonts folder in your project via Explorer. Right-click-> Properties. Take a screenshot and paste here please. If possible, do it for all the files. I just used your source that you posted and I could see the Green triangle after I made the necessary changes to the file so it is able to look up my fonts folder(not Windows, the Project) so the code so far is right. Only challenge I think is with the fonts and their lookup. So let's go step by step.

Font folder:

Font (the properties are the same for all the fonts):

Please check in Windows Explorer.

Please show me the General tab.

This looks alright. I don't think I have any more ideas beyond this point.
If it is possible for you, I am more than happy to come on TeamViewer or any other screensharing app to have a look at this. I do not believe that the method I have shared has any issues - I think it is something on your system that is interfering or something that I am not able to pick up from the snippets you have shared so far.

Another idea I had was if you could create a project from scratch and just make the change suggested in default.aspx to see if it is not working for only this project or for everything else.

I'm making a new test app.  I added the 1 line to the default.aspx and that didn't do anything - triangle no showing, only a green "p" shows on the webform.   On my real program, when you had me add the "fonts" folder I just right-clicked on "Add > New Folder".   I went to do that on the test app and noticed these options.   Should I use one of those instead?

I am very happy that you are willing to go extra mile and not give up.

1. Now first thing, use the New Folder option(ASP.Net folders are special folders and our scenario is really really simple - we don't need any of the specialized ASP.Net folders for it to work). -> Rename it to fonts
2. Copy the font files and include them in the project
3. Add CSS to the page
4. Apply the CSS Class. Please do not use the designer. You can directly make changes to the ASPX.

Default.aspx:

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="WebApplicationTEST._Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Modify this template to jump-start your ASP.NET application.</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET, visit <a href="http://asp.net" title="ASP.NET Website">http://asp.net</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET.
                If you have any questions about ASP.NET visit <a href="http://forums.asp.net/18.aspx" title="ASP.NET Forum">our forums</a>.
            </p>
        </div>
    </section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

        <asp:Label ID="Label1" runat="server" Text="SQDPERU" Font-Names="Wingdings 3" CssClass="Wingdings3Label"></asp:Label>

    <h3>We suggest the following:</h3>
    <ol class="round">
        <li class="one">
            <h5>Getting Started</h5>
            ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
            A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245146">Learn more…</a>
        </li>
        <li class="two">
            <h5>Add NuGet packages and jump-start your coding</h5>
            NuGet makes it easy to install and update free libraries and tools.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245147">Learn more…</a>
        </li>
        <li class="three">
            <h5>Find Web Hosting</h5>
            You can easily find a web hosting company that offers the right mix of features and price for your applications.
            <a href="http://go.microsoft.com/fwlink/?LinkId=245143">Learn more…</a>
        </li>
    </ol>
</asp:Content>

Select allOpen in new window

Site.css:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

a {
    color: #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}

    a:link, a:visited,
    a:active, a:hover {
        color: #333;
    }

    a:hover {
        background-color: #c7d1d6;
    }

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        background: url("../Images/accent.png") no-repeat;
        padding-left: 10px;
        padding-top: 30px;
    }

    .featured + .main-content {
        background: url("../Images/heroAccent.png") no-repeat;
    }

header .content-wrapper {
    padding-top: 20px; 
}
    
footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 100px;
}


/* Added so Windings font can be used.   BWM...09//2018
----------------------------------------------------------*/
@font-face {
  font-family: 'Wingdings3';
  src: url('../fonts/Wingdings3.woff') format('woff'),
       url('../fonts/Wingdings3.ttf') format('truetype'),
       url('../fonts/Wingdings3.svg#Wingdings3') format('svg');
  font-weight: normal;
  font-style: normal;
}

.Wingdings3Label{
    font-family:'Wingdings3'
}

/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}


/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}

    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

    #login a.username {
        background: none;
        margin-left: 0px;
        text-decoration: underline;
    }

    #login ul {
        margin: 0;
    }

    #login li {
        display: inline;
        list-style: none;
    }


/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

        ul#menu li a:hover {
            color: #333;
            text-decoration: none;
        }


/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

    .featured .content-wrapper {
        background-color: #7ac0da;
        background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
        background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        color: #3e5667;
        padding: 20px 40px 30px 40px;
    }

        .featured hgroup.title h1, .featured hgroup.title h2 {
            color: #fff;
        }

        .featured p {
            font-size: 1.1em;
        }

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }

        ol.round li.zero {
            background: url("../Images/orderedList0.png") no-repeat;
        }

        ol.round li.one {
            background: url("../Images/orderedList1.png") no-repeat;
        }

        ol.round li.two {
            background: url("../Images/orderedList2.png") no-repeat;
        }

        ol.round li.three {
            background: url("../Images/orderedList3.png") no-repeat;
        }

        ol.round li.four {
            background: url("../Images/orderedList4.png") no-repeat;
        }

        ol.round li.five {
            background: url("../Images/orderedList5.png") no-repeat;
        }

        ol.round li.six {
            background: url("../Images/orderedList6.png") no-repeat;
        }

        ol.round li.seven {
            background: url("../Images/orderedList7.png") no-repeat;
        }

        ol.round li.eight {
            background: url("../Images/orderedList8.png") no-repeat;
        }

        ol.round li.nine {
            background: url("../Images/orderedList9.png") no-repeat;
        }

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

    aside ul {
        list-style: none;
        padding: 0;
    }

        aside ul li {
            background: url("../Images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }

.label {
    font-weight: 700;
}

/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

    #socialLoginForm h2 {
        margin-bottom:  5px;
    }

fieldset.open-auth-providers {
    margin-top: 15px;
}

    fieldset.open-auth-providers button {
        margin-bottom: 12px;
    }
    
/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

    fieldset legend {
        display: none;
    }
    
    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }

    label {
        display: block;
        font-size: 1.2em;
        font-weight: 600;
    }

    label.checkbox {
        display: inline;
    }

    input, textarea {
        border: 1px solid #e2e2e2;
        background: #fff;
        color: #333;
        font-size: 1.2em;
        margin: 5px 0 6px 0;
        padding: 5px;
        width: 300px;
    }

    textarea {
        font-family: inherit;
        width: 500px;
    }
    
        input:focus, textarea:focus {
            border: 1px solid #7ac0da;
        }

        input[type="checkbox"] {
            background: transparent;
            border: inherit;
            width: auto;
        }
        
    input[type="submit"],
    input[type="button"],
    button {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
        margin-right: 8px;
        width: auto;
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
	font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
}

    th a {
        display: block;
        position: relative;
        
    }

	th a:link, th a:visited, th a:active, th a:hover {
		color: #333;
		font-weight: 600;
		text-decoration: none;
        padding: 0;
	}

	th a:hover {
		color: #000;
	}

    th.asc a, th.desc a {
        margin-right: .75em;
    }
    
    th.asc a:after, th.desc a:after {
		display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
	}

	th.asc a:after {
		content: '▲';
	}

	th.desc a:after {
		content: '▼';
	}

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}


/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

        #login ul {
            margin: 5px 0;
            padding: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #login a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }

        #login a:hover {
            color: #333;
        }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

        ul#menu li {
            margin: 0;
            padding: 0;
        }


    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }

            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }

     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

    /* forms */
    input {
        width: 90%;
    }

    
    
    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }

    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }
}
/* END: Mobile Styles */

Select allOpen in new window

WebForm1.aspx:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplicationTEST.WebForm1" %>

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

     <style type="text/css">

         
          @font-face {
            font-family: 'Wingdings3';
            src: url('../fonts/Wingdings3.woff') format('woff'), url('../fonts/Wingdings3.ttf') format('truetype'), url('../fonts/Wingdings3.svg#Wingdings3') format('svg');
            font-weight: normal;
            font-style: normal;
        }
            .Wingdings3Label
        {
            font-family: 'Wingdings3';
        }
      
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 340px">
    
        <asp:Label ID="lblAlertUp" runat="server" CssClass="Wingdings3Label" Font-Names="Wingdings 3" ForeColor="Green" style="left: 33px; position: absolute; height: 19px; width: 17px; top: 48px; bottom: 812px" Text="p"></asp:Label>
    
    </div>
    </form>
</body>
</html>

Select allOpen in new window

Design:


Results:

And Default.aspx? Same result? It looks like Webform1.aspx is not saved. Please save and try again.

Also what happens when you put http://localhost:59220/fonts/Wingdings3.woff in browser's address bar? does it prompt to download the file or gives an error?

I tried the URL you posted and I got this:

Then I noticed the filename is different:

So I changed it in the URL, but it still had the same not found results.   I am going to add the  "i" to all the filenames and see if that makes a difference.

OH MY GOD!!!!....

The file names are

Wingdings3.svg
Wingdings3.ttf
Wingdings3.woff
WINGDNG3.TTF.eot

Super Silly miss from my end.

I went back and removed the fonts from project and renamed them with "i" and case sensative:

And now it works! :

So now to add it to my real code.

Thank you very much for your help, time, and patience.

Made font change in real project and got this weird result:


So off to see what is different in the code for the green arrow as opposed to the others...

Success!

I had to add to the lable property CssClass "Wingdings3Label".

I only added it to the green arrow one when we were testing.

Thanks again

Thanks Chinmay!