panel.jpg Follow us on Twitter and Facebook

/// Blog

June 9, 2013
Category: Design Written by: Tagged: css design twitter bootstrap

Modifying Font on Twitter Bootstrap Template

I will use the concepts from Design for Hackers over the next couple of posts to make some custom changes to the twitter bootstrap template.

Let us look at one of the most important components of design Typography

Let us make some simple use of web fonts to see the difference on the marketing sample page!

In its original form, the Twitter Marketing Template looks like this:

Original TWBootstrap Marketing Template


Now let us make few changes to the template and notice the effect on the output!

Embed a Google Font above the </head> tag using:
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>

Adapt the CSS to use the font with:

body{ font-family: 'Special Elite', cursive; }

Note the colossal difference with this small change!

Modified Font on the TWBootstrap Marketing Template

/// Our Twitter Feed

Find out what's happening, right now, with the people and organizations you care about.

Twitter
Copyright 2012 MyPad.in