Goodbye, Georgia…For Now.

The headlines and body font of my Philadesigns site used to be Georgia, but it is now another serif-based font called Vollktron, which is free to use commercially under the OFL (Open Font License).

Font Squirrel: Loads of Fonts and Font Format Generator

Under the OFL, there are tons of fonts to choose from, many of which can be found at Font Squirrel. Font Squirrel also has a kickass @font-face Generator that creates all of the font formats needed to support all major browsers (yes, even IE7 and IE8), allowing you to get nuts. Font Squirrel also gives you the CSS code to paste, with everything ready to download in a .zip file. Supah.

Font Formats

Depending on the browser, different font format files are needed to display the font. So, you’ll need to call a bunch of fonts in the CSS like this example with the Vollkorn Regular font:

@font-face {
	font-family: 'VollkornRegular';
	src: url('vollkorn-regular-webfont.eot');
	src: local('Vollkorn'), 
	local('Vollkorn-Regular'), 
	url('vollkorn-regular-webfont.woff') format('woff'), 
	url('vollkorn-regular-webfont.ttf') format('truetype'), 
	url('vollkorn-regular-webfont.svg#webfontGeigTbV2') format('svg');}

As stated earlier, Font Squirrel provides you with the CSS and fonts. You just need to add this to the CSS, copy over the font files (in a suitable directory), and then add the following to your whatever element tag you want to apply the font:

body {font-family: VollkornRegular, Georgia, Baskerville, Garamond, "Times New Roman";}

If the browser can’t read any of those fonts, then it will jump to Georgia. I’ve successfully tested @font-face in the following browsers:

• IE7 (PC)
• IE8 (PC)
• Safari 5.0 (Mac)
• Safari Mobile (iPhone)
• Firefox 3.6.6 (Mac)
• Chrome 5.0.375.99 (Mac)
• Opera 10.60 (Mac)

Learn more about what font formats are loaded by browser type.

Updated!

Due to a lag in load time, I have removed @font-face and have reverted the body font back to Georgia.]]> http://www.philadesigns.com/2010/07/18/font-face-nice/feed/ 0 http://www.philadesigns.com/2010/07/13/christmas-in-july/ http://www.philadesigns.com/2010/07/13/christmas-in-july/#comments Wed, 14 Jul 2010 03:08:44 +0000 Carl http://www.philadesigns.com/?p=2182 Been finally getting some code wet with HTML5, especially after reading HTML5 For Web Designers by Jeremy Keith. Below is a video of Santucci during Christmas of ’09, using the new video element.

The Video

Within the video element, two video files are served up: .MP4 for the latest versions of Safari and Chrome, .OGV for the latest versions of Firefox and Opera. Latest versions supported are listed here.

Unfortunately, if you are using Internet Explorer, you won’t see this video. I could have been a saint and created a Flash version, but I wasn’t feeling Flashy at the time.

Poster Attribute

The poster attribute is very cool and allows you to put a placeholder image for the video, as shown with Santucci above. This allows for some beautiful web design, as opposed to the typical middle frame image that YouTube displays.

File Types And What Is Going On With Them

Unfortunately, there isn’t a single video file type that all browsers can display. So, you have to serve up a series of video files for the video element to display, depending on the browser. For Safari and Chrome, you serve up a .MP4 file. For Firefox and Opera, you dish out a .OGV file. For Internet Explorer 7 and 8, you have a Flash version ready or an embedded YouTube, Vimeo, Viddler or other 3rd party hosting file embedded and ready to showcase.

So, yeah, that’s a lot of versions to make just to play a video in all modern browsers. Kind’ve sucks, I know.

Hosting Hurdle

You may need to alter your .htaccess file to allow your server to play .OGV files.

With my BlueHost.com hosted site, I had to add the following to .htaccess: AddType application/ogg .ogv

Creating A .OGV File On The Mac

If you were like me and never heard of a .OGV file, you may be wondering how the hell to create a such a file. Well, if you use iMovie on a Mac, you can export to an MP4 video file. Then, to create a .OGV, download and install a free app called ffmpeg2theora that allows you to just drag a movie file into the Terminal after a command line of: ffmpeg2theora. Trying to convert a QuickTime .MOV file doesn’t work with this method though.

Firefogg

With the Firefox browser, you can use the Firefogg Make Web Video plugin. This will connect you to the online app that allows you to simply upload a file and export it as an .OGV file. Again, QuickTime .MOV could not be converted with this app.

Vimeo Version

You Internet Explorer people can watch this version:

Click here to view the embedded video.

This the first time I’m using the “thumb” option with Vimeo, which allows you to add a placeholder image, or a “poster” image to display before the visitor starts. YouTube still doesn’t have this feature.

The time has come to buy Photoshop CS5 and this jar is getting too massive to carry. Time to cash it in. My guess is $485.00. Loads of quarters here.

This blog post was written laboriously on the WordPress iPhone app. Whew!

The Big Web show also sticks to solely one topic per show, as opposed to bouncing around like an RSS reader in your ear. “Episode 6: Mobile First” discusses the importance of designing for the mobile web, sometimes even BEFORE desktop versions, and how smart phones are surpassing desktop computer sales more increasingly every year.

These videos allow you to “hang” with leading web authors and designers in a very laidback and languid moment in a time that is off the cuff and highly revealing. Many of these videos feature authors that I have read in book form or via RSS feeds for years, and it’s nice to put a face and a personality to the name.

Here is an example of one of the videos, starring Sarah Parmenter talking about the beginnings of her company You Know Who Design.

These videos are solid gold for web designers of all experiences ranges. Take a break from coding, grab a coffee, and watch one of these great videos.

Well, the answer is: “I don’t.” But, at the same time, it’s nice to have a place that puts all 5 of those above mentioned social networking and content storage services in one continuous “lifestream”. A stream of life…a never ending posting delight, that is until you do eventually die and stop posting. But, that’s a whole different story, and there’s services for that as well. Yes, people acutally back up their tweets with services such as TweetBackup.com.

Posterous

Posterous is not a lifestream. It only allows you to post on Posterous. You can’t even import your blog to it. But what you can do is post to all of your favorite social media outlets via the @posterous email services. They have a boomarklet as well that allows you to easily comment on a web page, post it to your Posterous and external blog, and have it posted immediately. But they toss in loads of HTML break tags, extra divs, and it’s a formatting nightmare, especially when posting to an external blog.

The one thing about Posterous that I find absolutely ridiculous is that there’s no way to delete your account. I would love to delete my half-ass account, but how to do so is not documented on Posterous.com, it’s not in the account settings, and loads of people on forums are questioning the same thing.

Tumblr

Tumblr allows you to import up to 5 different RSS feeds into your stream of content. I currently have it set up to display my most recent:

• Flickr photos
• Delicious links
• Tweets
• Blog posts
• YouTube videos

Other great features of Tumblr include:

• iPhone App (free)
• Loads of preset themes that can be customized
• Ability to add more pages and have them instantly appear in the navigation
• Beautiful and easy to use interface
• Custom domain setup
• Audio posts — just call the number and report the scene!
• Oh, and if you don’t like Tumblr, you can actually delete the account

Stocks

Watch your money go down the drain live as it happens. The Stocks app that comes with the iPhone is one of my favorites, as I’ve gotten back into the Stock Market again recently. You can select which stocks you want to always immediately appear. Upon highlighting a particular stock, you receive the latest links to articles related to that stock and its competitors, as well as comparisons on the stock’s performance.

All Countries

Scroll through all of the countries of the world and scan their national flags. Then, select a country to gain info on their population, monetary units, ethnicity, religions, economic summary — everything. Very useful on the train when you suddenly want to find out what national resources Chad provides.

The New York Times

The New York Times news stories categorized by latest and most popular. Select an article and kick back and enjoy. You can really lean back because the text is massive.

Restaurants

I really don’t eat out at many fast food or chain restaurants, but I find this app absolutely eye-opening. Click on a restaurant, such as McDonald’s, and you’ll find all of the food that McDonald’s offers. Select an entree, appetizer, dessert, and get the nutritional (or lack of) information. For example, a Big Mac has 540 calories, 29g of fat, 10g of saturated fat, 1.5g of trans fat, and 1040mg of sodium!

Facebook

Update your Facebook status and post photos that you’ve taken with your iPhone camera. A must-have for Facebook addicts. You can also view a stripped down version of friends’ profiles.

Evernote

I use Evernote.com to organize all of my “to do” lists and projects. The Evernote app allows you to seamlessly tap into your account, update content, and view all of your Evernote wonders. I highly recommend this app if you’re looking to organize your projects and need to check up on them over multiple computers.

Flickr

If you use Flickr for photo management, this app will come in handy. Upload photos you’ve captured with your iPhone straight to Flickr, name it, select the set, and boom, you’re done. Browse your Flickr contacts’ photos as well.

Dub Siren

If you dig reggae and dub music, get this jawn. Dub Siren brings you all of the reggae and dub internet radio stations all in one finger scroll, and also allows you to add your own effects to the streaming songs! Add your own twist on songs with cool spin, tempo, delay, mute, pitch, and sine wave effects. Lock in your effects as well. The graphics on this app bring a 1970s Lee Perry studio panel feel to the app.

Stitcher

Stitcher categorizes podcasts, easily allowing you to find as well as search for podcasts that might be up your alley. Star a podcast to add to your favorites. Your favorites will always be ready to listen to in succession upon loading the app. I highly recommend the Adam Carolla (for celebrity interviews and good laughs) and Boagworld (for web designers).

Phone Flicks

If you have a Netflix account, Phone Flicks allows you to update your Netflix queue as well as browse movie titles to add to your queue. If you have queue battles with your spouse, this will give you the upper hand in getting the movie that you want to watch to the top of the queue.

Nambu

There are a bunch of Twitter apps out there. Nambu is how I prefer to update my Twitter status and read the feeds of the people that I follow. On launching the app, you’ll see a number indicating all of the updates that you haven’t read yet. The chill gray / black background works nicely with the white text for enhanced readability. Click on the profile links for more individual info.

Flixster

Watch the latest movie trailers on your iPhone, get movie reviews, and check out what movies are coming out deep into the future. For example, I can see that Scary Movie 5 is coming out in 2011 and Spiderman 4 is coming out in 2012. Check local theatre listings and find out when movies come out on DVD as well.

ESPN Score Center

Get live scores from the MLB, NHL, NFL, NBA and loads more. Customize it to receive only the sports that you care for. Tap into the score zone for play-by-play scoring information. An amazing app that I see pop-up in bars all the time during NFL games. A must have for sports nuts.

Whole Foods Recipes

Say you have a chicken in the fridge, but you want to cook it differently than you always do it. Tap into the Whole Foods Recipes app, enter in “chicken”, and receive chicken-based recipes immediately. This also comes in handy when you’re at the grocery store and you draw a blank on how to spice up your dinners.

Word Press

Have a WordPress based blog? With this app, you can edit and create posts straight from your iPhone. Take photos of a show and write about it live as it happens. Faux photo journalism at your fingertips.

It enables you to add text and photos taken with your iPhone, bringing realtime faux photo journalism as a new arsenal to your bag of tricks. You can add custom formatting as well, although coding on the iPhone is cumbersome.

Here is a closeup of the Memphis Tap Room menu. The Suicide Rings are very good. Give ‘em a go next time you’re there.

Askimet

Akismet checks your comments against the Akismet web service to see if they look like spam or not. I once didn’t have this plugin installed for a couple months and literally got hundreds of spam comments.

Get Aksimet

All-In-One SEO

Let’s you customize the title tag, META descriptions, META keywords and more for each post or page.

Get All-In-One SEO

Breadcrumb NavXT

If you have many child and sibling pages, you might want to keep your user in the know as to where the heck they are within your web site. This highly customizable plugin allows you to easily add a simple Breadcrumb link trail anywhere on your site.

Get Breadcrumb NavXT

Classy Body

This will add page ID specific classes to the body tags of all pages and posts. This is extremely useful if you want so stylize a particular page.

Get Classy Body

Disable-WPAutoP

Certain versions of WordPress add a lot of random <p> tags all over the place when writing or editing a post, even in HTML mode. This plug-in gets rid of this nuisance.

Get Disable-WPAutoP

Google XML Sitemaps

This plugin will generate a special XML sitemap which will help search engines better index your web site. With such a sitemap, it’s much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently.

Get Google XML Sitemaps

Head-Meta

This allows you to add anything to the head of an individual post or page. This is very useful if you have to insert some javascript on a particular post for something exclusive to that page, such as an audio player. Ordinarily, you would have to put the script in the header.php file, but this plugin comes to rescue for this scenario.

Get Head-Meta

Search Everything

Typically the search feature of WordPress searches just the blog posts. With this plugin, you can expand the searchability to include tags, categories, comments, and pages.

Get Search Everything

Sociable

With this little nugget, you can add a subtle “Share This” section to your blog post. Simply check off which of the 99 (yes, 99!) different social network, news, and feed based sites you want to allow people to choose from. The logos that will appear at the bottom of the blog posts are about the size of a favicon and have a transparency of about 60%. When you hover each one, they increase to 100%.

Get Sociable

WP Super Cache

WP Super Cache speeds up your blog by generating html files that are served directly by Apache without processing the comparitvely heavy PHP scripts.

Get WP Super Cache

Viper’s Video Quick Tags

If you like to add videos to your blog posts, then this plugin is for you. Now, when grabbing the “source code” from sites like YouTube, the code is often inflated and definitely not valid (X)HTML. This plugin inserts YouTube, Vimeo, Google Video buttons — whatever video source you want — into your editor. You can then just click “YouTube”, paste in the URL, and the video gets embedded with cleaner and valid (X)HTML. You can even specify the default widths for all of your videos so that you don’t have to keep readjusting them.

Get Viper’s Video Quick Tags

Back when I went to Kutztown university, I was one of the lucky ones fortunate enough to have a Brother word processor that clanked out 5-page reports in about 20 minutes and featured a tiny black display with bright yellow text. Sure, we had a computer lab in the library with about 25 Apple computers, but there was always a line or a wait and we hardly knew how to use those damn things back then.

My first computer was an bondi blue iMac, the first iMac that was ever released, back in 1998 I believe. My friend John Roberts hooked me up with Photoshop 4.0 and something called Dreamweaver and I was well on my way into the murky confusion of table based web design, and then the eventual dreaded “DHTML”. I clearly remember designing sites that stated “Click Here for Internet Explorer or Click Here for Netscape Navigator”.

In celebration of the past, here’s a look at some old school computers and diligent workers: