Search code examples
asp.netvb.net

How I can Use a font in asp.net server

I have a probleme, the font "Segoe UI" doesn't work on an other device after publishing in asp.net server, but it work on my device, So I want a solution and thank you

II searched a lot, but I didn't find any solutions (I found solutions for C#, not vb.net), and unfortunately I'm just a beginner.

Solution

  • To use some custom font, you don't need (or have to) use code. So it does not matter if you using VB.net, or using C#.

    The first step is to add the font file to your project.

    Almost for sure, your web application should have a font folder (and if you using master pages, then this may well change a bit).

    However, let's assume we only need the font on the current page.

    So, let's assume we want to use a calculator LED-like font.

    So, assuming you added the font to the fonts folder. Say like this:

    enter image description here

    So, right click on your font folder (create one if you don't already have one).

    Then choose add existing item, change file selector to all files (.), and then add your font.

    In this example, the font was "calculator".

    So, now on a web page, we can add the font like this:

        <title></title>

    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="../Scripts/jquery-3.6.4.js"></script>
    <script src="../Scripts/bootstrap.js"></script>


    <style type="text/css">
     @font-face
     {
          font-family: 'myCalculator';
          src: url('../fonts/Calculator.ttf');
     }
</style>


</head>
<body>
    <form id="form1" runat="server">

        <div style="padding:35px">

            <asp:Label ID="lblTime" runat="server" Text="123456789" 
              style="font-size:32px;font-family:myCalculator"
               ></asp:Label>

        </div>

    </form>

    So, above looks like this:

    enter image description here

    But, we could make the font bold, make it red, add a solid black border.

    So, say this:

                <asp:Label ID="lblTime" runat="server" Text="123456789" 
            style="font-size:32px;font-family:myCalculator;
                font-weight:bold;color:red;
                border-style:solid;
                border-color:black;padding:4px"        
               >

    And now we get/see this:

    enter image description here

    So, the font I used for above example, can be found here:

    https://www.dafont.com/theme.php?cat=302