Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Fonts usage in CSS

Tuesday, October 14th, 2014 by Servage

Right selection and implementation of Fonts in your website make superb user experiences. Therefore, learning about web fonts and their coding in CSS may help you to bring the best on the table.

Web Fonts in CSS

In our modern mobile era, web fonts are vital components in the success of responsive web designing. Readability is the biggest issue on various devices and screen. Therefore, addressing it upfront is nothing but a smart move.


In due course, I have decided to give you some elementary, but useful knowledge of web fonts in this post. Before telling you anything about web font, I would like to mention that Apple and Microsoft, both computer giants, have done true endeavors to make various formats of the web fonts. First of all, they have developed True Type Fonts (TTF) in 1980s. Based on TTF, Microsoft has made Open Type Font format as scalable computer fonts and today they are widely acceptable on all computing devices.


Later on Web Open Font Format (WOFF) came in the pictures and now W3C has accepted is as standard format for the web. It contains addition compression data as well as additional Meta data needed to offer support the font distribution from a server to a client device by overcoming the network and bandwidth constraints. Due to involvements of W3C and its standards, this format is universal and ubiquitous on all sorts of web browsers, OS and screens.


There are some other font formats such as Embedded Open Type (ETO) and SVG fonts, but they neither popular nor much acceptable on modern browsers.


@font-face Rules

Today, we are highly concentrated on the content and user experiences with them. Therefore, we are selecting our own web fonts and families and would like to use them for our responsive web pages instead of different types of default fonts on various devices.


Here keeping consistency and user experiences including readability intact is our final target, thus, it is imperative to have fonts defined in our CSS documents as well as should be available on the devices of the users. In short, you have to embed the fonts with the web pages or point their availability on your server so device/browser can download prior to display of any texts.
Pointing the font availability in CSS code is easy as you have to defined the font-family first and give its URL on the server. For instance, you want to use Times New Roman” font family and embedded WOFF font format on server, you should do coding in CSS in following ways:

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);

Besides these font-family and src, there are other font descriptors used in CSS3 and later versions such as:


font-family — Defines a name for the font

src — Defines the URL of the font file

font-stretch — Defines how the font should be stretched.

font-style — Defines how the font should be styled.

font-weight — Defines the boldness of the font.

unicode-range — Defines the range of UNICODE characters the font supports. Default is “U+0-10FFFF”


CSS Font Properties

Before looking at the rest of @font-face rules, let’s have insights of CSS fonts properties so we can easily define them in our CSS sheet. Usually, CSS font properties include tags for


  • font family
  • font style
  • font size


If we look at them in a sequence, font families comes first.


Font Family:

There are two kinds of font families, first is Generic Families, which contain fonts families of similar look for instance, Serif and Sans-serif where Serif has extended lines at tail portions of the fonts that decorates them while sans-serif and bald and easy to read. Other kinds of font families are include the simple fonts and contains individual font families with their specific properties for instance, Times New Roman fonts.


Fonts Styles:

Font style contains fonts with different styles like:


  • bold,
  • italics,
  • oblique, and
  • normal


Fonts Size:

Whereas font size are defined in absolute ways or in relative ways. For instance, giving pixels, cm, or inch as the unit of font size makes fonts absolute. Against these, Em and Percentage leave fonts flexible in responsive designing and acceptable on all modern browsers.



References & More Reading

CSS Font
CSS3 Web Fonts

Fonts usage in CSS, 5.0 out of 5 based on 3 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.