Loading and previewing fonts from files in ASP.NET

Few weeks back I created a free fonts preview and download site www.freedownloadablefonts.net. There are around 6000 fonts in .ttf files and I needed to display a preview of the fonts. All the fonts were copied to a folder “~/Fonts”. Then I created a http handler “GetFontImage.ashx” to which the font path and text to display was passed as query strings . It created an image using the font specified. The code for “GetFontImage.ashx” is as follows

<%@ WebHandler Language="VB" Class="GetFontImage" %>
Imports System
Imports System.Web
Public Class GetFontImage : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "image/png"
Dim fontpath As String = context.Request.QueryString("fontpath")
Dim Text As String = context.Request.QueryString("Text")
Dim FontImage As System.Drawing.Bitmap = clsUtility.GetFontPic(fontpath, Text)
Dim ms As IO.MemoryStream = New IO.MemoryStream()
FontImage.Save(ms, System.Drawing.Imaging.ImageFormat.Png)
Dim FontImageBytes() As Byte = ms.GetBuffer()
End Sub
End Class

GetFontImage.ashx calls another function clsUtility.GetFontPic(fontpath, Text) whose code is as follows. clsUtility.GetFontPic(fontpath, Text) uses the privatefontcollection class to load the font from file

Imports Microsoft.VisualBasic
Imports System.IO
Imports System.Drawing
Imports System.Drawing.Text
Imports System.Drawing.Imaging
Imports System.Drawing.Drawing2D
Public Class clsUtility
Public Shared Function GetFontPic(ByVal Fontpath As String, ByVal Text As String) As System.Drawing.Bitmap
Dim width As Integer = 620
Dim height As Integer = 30
Dim FontImage As New System.Drawing.Bitmap(width, height, PixelFormat.Format24bppRgb)
Dim g As Graphics = Graphics.FromImage(FontImage)
g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias
g.SmoothingMode = SmoothingMode.AntiAlias
Dim pointF As New PointF(10,0)
Dim FontSize As Integer = 24
Dim solidBrush As New SolidBrush(Color.Black)
Dim privateFontCollection As New PrivateFontCollection()
privateFontCollection.AddFontFile(Fontpath) ' load font from file
Dim thisFont As FontFamily = privateFontCollection.Families(0)
Dim regFont As New Font(thisFont, FontSize, FontStyle.Regular, GraphicsUnit.Pixel) ' Create a new font
g.DrawString(Text, regFont, solidBrush, pointF) ' Using the font write the text using the font style
Return FontImage
End Function

All the font information were stored in a database in a table with the following columns
1. FontID
2. FontName
3. Path
4. AddedDate
A script can be easily created to add all the font information to the table using the privatefontcolection class as above
The home page displays the 10 latest fonts in a gridview. The code is as folows

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="FontID" DataSourceID="SqlDataSourceFonts" ShowHeader="False" Width="100%" GridLines="None" BorderStyle=None BorderWidth="0">
<asp:TemplateField ItemStyle-BackColor="White" HeaderText="Image" ItemStyle-BorderWidth="0"> <ItemTemplate>
<asp:Image AlternateText='<%# Eval("FontName") %>' ImageUrl='<%# GetImageURL(Eval("path"),Eval("FontName")) %> ' ID="FontImage" runat="server" />
<asp:SqlDataSource ID="SqlDataSourceFonts" runat="server" ConnectionString="<%$ ConnectionStrings:FontsConnectionString %>"
SelectCommand="SELECT TOP 10 * FROM [Fonts_Fonts] ORDER BY [AddedDate] DESC">

The code is pretty straight forward with a Gridview bound to an SQLDatasource. The code for GetImageURL() is as follows

Public Function GetImageURL(ByVal Path As String, ByVal FontName As String)
Return "GetFontImage.ashx?FontPath=" & Server.MapPath(Path) & "&Text=" & FontName
End Function

kick it on DotNetKicks.com

Comments are closed.