So I am working on a project. A WordPress theme that I want to try and sell on Themeforest.net, and I ran into a problem. I’m using jQuery to do a drop down menu, and I want the submenu to fly out and have a triangle on the left side showing where it came from. Look at the image and you will see what I mean. I was having a terrible time getting that to do what I wanted it to. Which was look like it does in the image you see. I spent about an hour and a half trying to get the stupid thing to work.

Today, I’m browsing my favorite sites, and I come along Jon Rohan’s website. That isn’t anything special, you say. Well, I disagree, because on his site is EXACTLY what I am looking for.

First though, here is the link to the specific page on his site, dinnermint.org.

This CSS trick basically changes a border on something into a shape do to the div having its width and height set to 0. You also give the border a thickness of like 20. You can make all sorts of crazy shapes using a div and its border styles.

Anyway, this fixes my issue nicely, and hopefully you can find some use for it to.

I used to be afraid of @font-face css. Why, well, because I didn’t know how to use it. Well last night I tried it out on a contest I entered over at css-tricks.com. The CSS-Off. Basically, they give you a psd and you have to build it. Well, I didn’t have one of the fonts they used.

So I went over to this site I saw in a video tutorial over at nettuts. Check the link out if you find my short tutorial not to your liking. You should get the hang of this though, since it really is quite simple.

Once you are over at FontSquirrel.com, click on @font-face kits, choose a kit, and click on its Get Kit link. This will then download the kit to your desktop.

After you unzip the file, copy the font files (you will need the .eot, and the .ttf) to your website folder, and put them in new folder called fonts… or whatever you want to call it. It doesn’t really matter. Open the stylesheet that comes with the kit, copy the @font-face style, which will look like this:

@font-face {
	font-family: 'CloisterBlackLight';
	src: url('CloisterBlack.eot');
	src: local('Cloister Black Light'),
local('CloisterBlack-Light'), url('CloisterBlack.ttf')
format('truetype');
}

See that font-family: there in the style? Change it to whatever you want. Doesn’t matter…could be called font-family: ‘Awesome’;. Then change the src: url to the correct path on your server. So it would possibly be this: src: url(‘../fonts/CloisterBlack.eot’);.

Do that for the second src url as well. The first one is for IE, because Internet Explorer hates true-type for some reason and needs its own font file. The second src is for all the other browsers.

Then, if you want to use that font family, say on an h1 tag you do this:

h1 {
font-family: Awesome;
}

I would add default familys onto the end of that just in case, but this works in most browsers: Original TrueType or OpenType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+,
EOT fonts for Internet Explorer 4+.

Have fun with it, and aren’t you ticked it was easier than you thought? You could have been using this for ages!