Applying Customized Fonts to Web Pages

Wednesday, 22 February 2012
Fonts are always the essential part of web design. Sometimes, we need to use some font that is not built in popular operating systems, therefore we may not be able to deliver the original design to website visitors. In this case, graphic designers may use images instead, but it's apparent not a good alternative because:
  • You are not able to use the font text-heavily;
  • Compared to texts, images are hard to change;
  • Not SEO-friendly, even you put relevant keywords to the image alt tags, etc.
Step 1 - Fetch font files of all 3 formats.
  • .TTF or .OTF, compatible with Firefox 3.5+, Safari and Opera.
  • .EOT, compatible with Internet Explorer 4.0+
  • .SVG, compatible with Chrome and iPhone
Basically, we have at least 1 of the 3 formats when we are doing design, so what we need do is simply convert it to other 2 formats. Here we recommend using FontsQuirrel, because it allows us to convert fonts based on the characters we need, thus dramatically shrinking the size of the font file and make this scheme more practical. Step 2 - Claim the ideal font in CSS. After fetching the font files of all 3 formats, we need to claim the font in CSS wherever we need to use it.
@font-face {
	font-family: 'fontNameRegular';
	src: url('fontName.eot');
	src:local('fontName Regular'),
	url('fontName.woff') format('woff'),
	url('fontName.ttf') format('truetype'),
	url('fontName.svg#fontName') format('svg');
Remember to replace fontName with the real font name you are willing to use. Use the font wherever on the webpage by specifying CSS:
p {
	font: 13px fontName Regular, Ariel, sans-serif; 
	font-family: fontNameRegular;
Check this out and hopefully it would do some help. :)

Add new comment

Filtered HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Target Image

Recently posted

  • We are going to lunch a new extension of Chrome here for web proxy that works with Twitter, Facebook and Youtube. 2 years 11 months ago
  • Pluton - Free Single Page Bootstrap Html Template 2 years 11 months ago
  • Thanks Michael 2 years 11 months ago

Get a quote now

Don't deply your growing business. Contact us today to find out what we can help.

If you’re considering outsourcing your project development, need to update an existing website or simply need some good advice from someone who listens, get in touch with JoomlaCreator today.