ASP.NET Custom Fonts using CSS

ASH

6 years ago

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.

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 :