Search Engine Marketing Blog

Monday, December 6, 2010

Embedding Fonts into Your Website...including Internet Explorer

So you have a website and like most sites, you have a navigation bar. You're thinking about the SEO of the site and would love to use text links instead of an image-based navigation system.

But due to the design of your site, you don't want to be limited to just using the few fonts that are populated into everyones browser.




Sample Embedded Font



You might create a CSS code on your site and make you page live via upload to your server. But while it will look great on your computer, the reality is that unless every person viewing you website has that same special font installed on their computer, they will not be viewing the same looking site as yours.

But there are a few things you can do change that.

Using a simple piece of CSS code called @font-face, you can embed the specific font into your webpage. So everyone viewing your page will get the same experience using the same font...in theory.

The code is fairly simple:
save image





The problem that exists is that while modern browsers like Firefox and Chrome accept all the CSS coding you might include, such as adding things like "text-shadow" to give sharpness to your fonts, the dinosaur that is Internet Explorer wont' accept these text effects.


Luckily, there is a workaround.






Embedding Fonts Walk-Through:


Here's a walk-through to embed fonts into your webpages, regardless of the browser being used and be able to use that you'll also be able to use some of the text effects.


1)  Play it safe...use .EOT font files instead of .TTF
You can use the code above and just point the font URL source to your .TTF font on your server. But since we're attempting to make your site look the same on Firefox, Chrome and Internet Explorer, we'll go through a few extra steps.




2) Locate the font you want to use.
Go through your fonts folder to find the specific font you want to use on sections of your site.




3) Convert your .TTF font to .EOT.
Using Miscosoft's free software "Microsoft Weft", you can can convert your fonts to .EOT. The software is very clunky though. If you have many fonts that the software is trying to review, the program will routinely crash. This usually happens when it encounters a font on your system that it is unfamiliar with or is overly complicated.


And alternative to converting your .TTF font to .EOT is to just find one that has already been converted. There are a few sites out there that can provide .EOT fonts for free.




4) Upload your font to your server.
This will be the URL address you reference when trying to load the code.




5) Create your CSS code with Text Effects:
You'll need to create CSS code to be included on all pages where you are looking to embed a specific font.
The example below if one I've used for a client. They wanted a text link navigation bar using a specific font. But the font, like many, needed to have a border in order to appear crisp on the page and the background color.



Sample CSS Code:
.sample {
font-family: 'xxx;
src: url('xxx.eot');
src: local('?'), url('xxx.woff') format('woff'), url('xxx.ttf') format('truetype'), url('xxx.svg#webfontAOJTPlzn') format('svg');
font-size: 22px;
color: #ffffff;
text-shadow: 3px 3px 7px #111;
filter: glow(color=#666666,strength=1); /* IE */
}
In this code below, there are a few references:

font: xxx (this is just the name of the font in the example)

font-family: name of the font minus the extension

url: wherever the "url" appears, that is where you have the filed uploaded to your server

text-shadow: this is the text effect that give a small border to your font. This is also the effect that does not display in Internet Explorer.

filter: glow: this is the effect that will somewhat mimic the Chrome/Firefox text-shadow effect. Instead, it gives a small border that is very similar to the text-shadow effect. This works in Internet Explorer. So if the user is viewing via Chrome/Firefox they will see the text-shadow effect. But if they are using IE, they will see the "glow" effect.  

Other Font Extensions: You'll notice there are a few other font extensions being used int he sample code. If you download a .EOT font from here then you will be given all these versions of the font. 



Now just reference the class in your page, and you'll have the specific font embedded into your site for all your visitors...even if they don't have the font installed on their computer.

And note that as I'm not altering the CSS of ClearStage.com just for a working example in this post, the "glow" effect will not likely work on IE. My apologies for not providing an example.

Friday, November 26, 2010

Netfirms.com Domain Sale

Netfirms is having a Black Friday/Cyber Monday domain sale. Free basic hosting is included, with domains costing only $4.95 This weekend only, register any .COM domain name using coupon code CYBER495 and the price you pay is only $4.95!

Register a new .COM domain and save $3.  Act now!  Offer expires at 12:01am on November 30, 2010. *

Looking for hosting too?  Add on our PLUS hosting package at checkout and receive it for only $29.99 for the first year and save $30!

Friday, November 12, 2010

Facebook Email Is Coming On Monday

Today’s rumor-and-speculation zone features a report that Facebook, at a press event scheduled for Monday, will announce a web-based email service - basically @facebook.com email addresses for everyone.

It makes sense. An email-like service already exists within the Facebook network but isn’t open to non-Facebookers.


Wednesday, October 27, 2010

MSN adCenter & Yahoo Search Marketing Transition Complete

All of us search marketing professionals received this email today, although most of us knew the transition was about final. But the big question will be how long they can hold onto that 33.8% market share. With the rapid decline of Yahoo, it might not be long before that 33.8% figure drops to 25% or lower as we don't know how long Yahoo will even be around. All signs point to them being bankrupt within 4 years if they don't turn things around.

Microsoft Advertising Bing | Yahoo! Search - 33.8% of U.S. Search queries are on Microsoft and Yahoo!
Dear Matt,

The transition of Yahoo! Search ad serving to Microsoft Advertising adCenter is now complete. Thanks for everything you‘ve done to prepare for this transition. Your Microsoft Advertising adCenter ads can now reach 163 million unique searchers using Microsoft and Yahoo! sites (including Yahoo! Search, Bing, and partners), providing a sizable volume of 5.7 billion monthly searches.1

Your ads are now reaching potential customers on Yahoo! Search and Bing. As more and more Yahoo! advertisers join the auction, it’s important to actively monitor your campaign performance. Take an active role in monitoring and modifying your campaigns to achieve optimal performance results on Yahoo! Search and Bing. To learn more, visit our Transition Center.

We would like to hear about your transition. Share your feedback by completing this quick survey and help us improve.

We hope you enjoy all the benefits of bringing Yahoo! Search and Bing together. Thank you for advertising with us.

Sincerely,

Your partners in the search alliance, Microsoft and Yahoo!
Microsoft
1. comScore Core Search (custom), August 2010.

Microsoft respects your privacy. To learn more, please read our online Privacy Statement.

You have received this service email message in relation to your Microsoft Advertising adCenter account. Microsoft Advertising adCenter sends important product notifications and service-related communications to the email address that is associated with your Microsoft Advertising adCenter account. If you have questions about this service message or believe that you have received it in error, please contact a Microsoft Advertising adCenter customer service representative. You can update your email address by clicking the My Settings link after you sign in to Microsoft Advertising adCenter.

Please do not reply to this email message. It was sent from an automated account that is not monitored for responses. To ensure that you continue to receive Microsoft Advertising adCenter communications, please add our domain (@microsoftadvertising.com) to your safe senders list. 

Monday, October 18, 2010

AOL-Yahoo Deal: Good Idea or Double-Down on Fail?

http://adage.com/digitalnext/article?article_id=146476

Friday, September 17, 2010

Tips: Sync Google Chrome Bookmarks with Google Account Bookmarks

Well, not exactly. But here's a quick workaround.

As I started using Chrome more than Firefox over the last year, I realized I had abandoned Delicious completely and was no longer using Google Bookmarks. Instead, I was just using Google Chrome Bookmarks.

A friend of mine recently asked what I used for bookmarks as Delicious has seemed to go the way of the dodo. I explained to him that I was now using Chrome Bookmarks. He in turn was just copy/pasting links to a Google Doc.

Unfortunately, the technology used for Chrome Bookmarks at this time is not compatible to do a true "sync" with Google Bookmarks.

But there is an easy workaround:

1) In Chrome, click the settings button (wrench) and click "options":

2) After clicking "options", click on "Personal Stuff"

3) You'll see the 1st option is "Sync". Click here and select "customize".


4) Input your Google account info here.

5) Now, when you're on any computer and sign into your account on that computer, your Chrome interface will be identical across all computers.

So if you click the "star" icon in the Chrome address bar, it will add your new bookmark to the desired Chrome Bookmark folder...on all computers.


Not always using Chrome and still want access to your bookmarks? No problem!...

6) In addition to syncing your Chrome settings and bookmarks across all computers you login to your Google account on, Chrome Bookmarks sync will ALSO create a Google Document with all your bookmarks.

Simply....

7) Visit http://docs.google.com

8) Look down in the "My Folders" section and you will see a "Google Chrome" folder, complete with the Chrome logo.



9) Click on the Google Chrome folder and you can navigate all your bookmarks via IE, Firefox, Safari, Opera, etc.