Using Web Fonts In Your ASP.NET MVC Application
Typography in Web Design
For many hardcore developers, the design of a web application may be no more than an afterthought. Unless they have the luxury of working with a designer, or they themselves have a keen sense for design, the developer can easily overlook the need or importance of typography and focus on only the basic visual or graphical design elements that go into building a web application.
This may be why HTML/CSS Frameworks like Twitter Bootstrap, HTML5 Boilerplate and 52 Framework are becoming more and more popular today. These frameworks can provide a quick and easy way to build nice looking web applications without spending much time on the design process. But even beyond making a website or application visually appealing, typography is most likely the last thing many developers think about.
Typography can be a great way to enhance the visual appearance of your application and improve the overall user experience. Selecting the appropriate font types, weights and stylings can help convey ideas, importance and emotion to the user. It can also improve the readability and comprehension of your content and greatly enhance usability and the overall quality of your design.
Choosing and Using Fonts
The challenge with selecting fonts for the web is knowing how they’ll actually render for the user. For the fonts to render as intended by the designer, the browser must have access to the dependent font files which may or may not be available depending on the operating system in which the browser is running.
For many years, web designers focused on using only the fonts which were likely to be present on a wide range of computers. Those considered ‘web-safe’ were:
- Arial
- Courier New
- Helvetica
- Times New Roman
- Trebuchet
- Georgia
- Verdana
This short list offered little variety to the designer. Work arounds for this limitation included using images of text or embedded replacement techniques which required a browser plug-in (can you say Flash?). The problem with both of these methods was that the text in this form was not semantic, selectable or searchable.
Enter Web Fonts
One solution to this limitation was the development of web fonts, which could be available on any platform and served from an http request. In addition to having accessibility to a much wider range of typefaces, web fonts are also semantic, selectable, searchable and translatable into other languages. And because most all of today’s browsers support the use of web fonts, they can be reliably rendered on most any platform.
Integrating Web Fonts in Your ASP.NET MVC Web Application
So, how can you use web fonts in your ASP.NET MVC application? Here’s a simple, step-by-step procedure for adding web fonts to a generic ASP.NET MVC Internet application.
1) Choose a font service. There’s a growing list of web font services and providers which offer a wide array of free and paid for services. A few of the more popular services, in no particular order, would be:
I have a subscription to Typekit which I use for all of my web projects. For the purposes of this demonstration I’ll be using Typekit, but know that most all other font services work basically the same way.
2) Select the desired font. Typekit has a large library of available fonts and a rich user interface which allows you to see how the font will render. You can easily browse the font families by properties, classification or recommended use. For this demonstration, I’ve selected Bistro Script Web.
3) Generate your JavaScipt code provided by your font service:
4) Copy the JavaScript snippet into the <head> tag of your view engine’s _Layout.cshtml (Razor) or Site.Master (ASPX) file.
5) Generate your css selectors for the desired font families:
6) Add the css code into the Site.css file. For this example, I’ll change the font-family for the entire application by adding my “bistro-script-web” font to the css selector for the body tag:
NOTE: The generic ‘cursive’ font is set as a fallback font in the unlikelihood the primary font is unable to render correctly.
And that’s all there is to it. Now, instead of the default font-family: ”Segoe UI” which renders the page like this:
You can see the web application now uses the Typekit “Bistro Script Web” font which renders like this:
Now of course in the real world, I’d never recommend using a script font like this for an entire application. The point of this exercise is to easily show the difference between how the default font and web font render in a browser and to demonstrate how easy it is to implement web fonts into your projects.
Conclusion
The availability of web fonts opens up a wide range of possibilities for web designers and developers to use typography to enhance their web designs and to clearly deliver content and improve usability. As I hope you can see from this simple demonstration, implementing web fonts in an ASP.NET MVC web application is quick and easy.
Update: This article has been translated toSerbo-Croatian by Anja Skrba from Webhostinggeeks.com
