ASP.NET Custom Fonts using CSS

ASP.NET Custom Fonts using CSS 02

In this post let’s see how we can use custom fonts in our ASP.NET Website. Fonts are an important part of our website application. Using the right font in our web application will make it look more elegant and appealing to our users. You can also use Google Fonts in your Website directly if you want to.

Also see :

How to use Google fonts in ASP.NET

ASP.NET Styling Dropdownlist using CSS

ASP.NET Custom Fonts using CSS :

In your ASP.NET Web application, create a folder named css and create a stylesheet in it.

StyleSheet.css :

@font-face
{
font-family:"Roboto";
src:url('Roboto.ttf');
}
@font-face
{
font-family:"Raleway";
src:url('Raleway.ttf');
}
@font-face
{
font-family:"OpenSans";
src:url('OpenSans.ttf');
}
@font-face
{
font-family:"Amatic";
src:url('Amatic.ttf');
}
body {
font-family:Arial;
font-size:25px;
}

.span1
{
font-family:"Roboto";
}
.span2
{
font-family:"Raleway";
}
.span3
{
font-family:"OpenSans";
}
.span4
{
font-family:"Amatic";
}

I have four different fonts inside my CSS folder with names : Roboto.ttf, Raleway.ttf, OpenSans.ttf, Amatic.ttf . The important thing is, the font are directly inside the css folder and not any other folders in it. So I can directly reference them inside the CSS url tag with its name.

ASP.NET Custom Fonts using CSS 01

Now edit your ASP.NET .aspx page like below :

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
This is sample text.<br />
<span class="span1">This is Roboto font.</span><br />
<span class="span2">This is Raleway font.</span><br />
<span class="span3">This is OpenSans font.</span><br />
<span class="span4">This is Amatic font.</span><br />
</div>
</form>
</body>
</html>

When you run your webpage, you will see fonts in action :

ASP.NET Custom Fonts using CSS 02

Thank You for reading.

Also see :

How to use Google fonts in ASP.NET

ASP.NET Styling Dropdownlist using CSS


3 thoughts on “ASP.NET Custom Fonts using CSS”

  1. Pingback: How to use Google fonts in ASP.NET • ParallelCodes();

    1. Hi Sai, Thank you for commenting.
      Have you checked the font path after the page source or opening up css file directly on your browser or through inspecting elements? It may be because of misconfigured or invalid URL path for the font files.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.