Lifecode

Google Fonts, or more popularly known as Google Web Fonts, provides a great collection of open source licensed (can be used commercially and non-commercially) true-type fonts. My favorite is Droid Sans, the font I’m currently using now sitewide.

Because I love Droid Sans, I want to use it everywhere. Even in my school projects. I just finished a project (that is due tomorrow) that demonstrates HTML frames. And I wan’t (of course) to use Droid Sans as the main font for the web page. And if I used the font as I regularly do:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular&amp;subset=latin' rel='stylesheet'> 

The font won’t be viewable offline. So the solution for this, is to download the font and use the CSS Google recommends. Take a look here.

@media screen {
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/font?kit=s-BiyweUPV0v-yRb-cjciC3USBnSvpkopQaUR-2r7iU') format('truetype');
}
}

But how do we download the font? That’s easy look at the url('...'):

src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/font?kit=s-BiyweUPV0v-yRb-cjciC3USBnSvpkopQaUR-2r7iU') format('truetype');

Just enter that URL to your browser, and viola!

Now that we got our font, we use the CSS, and we modify it a little bit:

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), local('DroidSans'), url('path/to/DroidSans.ttf') format('truetype');
}

So this works for the latest stable versions of Chrome, Firefox, Opera, Safari, and.. Wait.. It’s not working in IE8. This is because IE lte 8 only accepts EOT type fonts. So how do we fix this? I’m not an IE user, but a big part of the Internet population uses IE, so we do not have a choice.

Good news is, you can convert TTF fonts to EOT. After that, save the file on the same directory where our TTF font is, and add it in the CSS.

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: url('path/to/DroidSans.eot');
  src: local('Droid Sans'), local('DroidSans'), url('path/to/DroidSans.ttf') format('truetype');
}

Now, you have to remember that you have to place this on the top of your CSS document. Then you can just use this as a regular font in CSS:

body {
	font-family: 'Droid Sans', Arial, sans;
	color: #666;
}

Make sure, that the path to the font is always relevant to the CSS file. And that’s all for now. :)

This is a pretty basic document I coded yesterday night. Basically this is a Web Design homework and the deadline is tomorrow morning. Yes I know it’s easy, but for the sake of the people curious about it, or those who are still starting with web design, I posted this.

HTML Version

In the past few days, while thinking about this, I decided to code this in HTML5 + CSS + JS. But then, because this is just a homework, and to be passed via e-mail, JS + HTML5 won’t be good.

First, because JS won’t automatically be executed locally, which destroys the first impression. I really wanted to do this in JS to add interactivity. Like, answering the crossword puzzle before revealing the answers, or have a button that will reveal the answers right away.

Second, some HTML5 tags will not work on older browsers, and only up-to-date and modern browsers can interpret its new tags. But if you would think, I only have one audience, my instructor. Well the problem is, if the code fails, my grade will fail too. I do not want to risk that, but anyway, XHTML 1.0 works just fine.

Style

I’m a minimalist, I like things simple, and for this one I sticked to one sans font. White background color, and gray text. Here’s the body style:

body {
	font-family: Arial, Helvetica, Verdana, sans;
	font-size: 1em;
	color: #666;
	background-color: #fff;
}

And yeah, for the table and data, I used the same color scheme.

#crosstable {
	margin: 0 auto 0 auto;
	border: 3px solid #666;
}

#crosstable td {
	width: 30px;
	height: 30px;
	border: 1px solid #666;
	border-spacing: 0;
	padding: 5px 5px 5x 5px;
}

The tricky part is the superscript in the cells. It took me some time to remember all about negative margins. Well anyway, it went well.

#crosstable td sup {
	padding: -5px;
	vertical-align: super;
	font-size: 0.5em;
	position: relative;
	top: -6px;
	left: -7px;
	font-weight: normal;
	margin-right: -0.5em;
}

Output

Of course I’ll show it to you. Besides, I already e-mailed my instructor with a zip archive containing the HTML file and the CSS file. See it here.

Validation

The document is valid XHTML 1.0 Strict. You can see for yourself: Click Here.