Bolchalk FReY's Blog


Worry No More of Web Safe Fonts
January 8, 2014, 3:29 pm
Filed under: Design | Tags: , , , , , ,

WebFonts

As a designer in an advertising agency, much of my design skills are focused on print advertisements. However, I am in the beginning stages of a website redesign―my first website since being out of school. That being said, my web knowledge is a bit rusty.

As I began brainstorming for the site design and researching about web trends, I came across a bit of information that was VERY helpful. Though it was only 4 years ago when I was in school, I was taught about “web safe fonts” and how if I wanted to use anything more “fancy” I would have to use it as an image… which isn’t exactly helpful for users searching for your site or SEO.

This bit of information that was so helpful to me was the concept of Google fonts. Now, if you are heavy into web designing then you’re probably thinking this is old news… that may be true, but I wanted to post this as a helpful tip for others (like me) who have been out of the web loop for a while.

So, what is Google fonts?
Google fonts is a directory of fonts released under open source licenses. (English translation: you are free to use these fonts on any commercial or non-commercial project.) It was created to allow developers to use high-quality fonts on their websites.

How does it work?
Rather than relying on fonts installed on the website user’s computer, these fonts are stored on Google’s servers. That means that when you use these fonts on your website, it accesses Google’s servers to display the font on the user’s screen (just as your website accesses your web server to display images on your site).

To use these fonts:

  • Go to google.com/fonts
  • Choose the fonts you want to use and “Add to Collection”
  • Select “Use” and copy the link into your HTML
  • Add to the font by using CSS

Can I download these fonts onto my computer?
Yes, you can download these fonts using the “Download your Collection” button. This will allow you to design with these fonts in Photoshop (or the like) as you design your web pages.

What browsers are Google fonts compatible with?   

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

Will Google fonts work on mobile devices?
Google fonts work on most mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad).

Kristen Oaxaca, Graphic Designer

Advertisements

1 Comment so far
Leave a comment

I am a design student currently and they are still stressing ‘web safe’ fonts. Thanks for this post, its nice to know I have a little more wiggle room.

Comment by Khrystyne Wilson




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: