New Post

New Post

What Are Google Fonts?

For many of you out that who are still wondering “why should I use Google fonts” or even “what are web fonts?” well this article will go over some of the very basic yet essential reasons to start using them.

For the Longest time the web was lacking when it came to the selection of fonts that could be used safely on the web. When I say safely I mean that you could use only the fonts that someone had installed on their computer on your website. This was a problem that went unsolved for many years and many designers learned to deal with it but were always left wanting.

The main alternative that web designers had when working with non web safe fonts was using images. There are many reasons why using images for font replacement was bound to fail. Images will weigh down your website, will not translate to other languages and are bad for Search Engine Optimization. Designers learned to bite the bullet when using images as font replacement for the sake of beauty. For years this was standard that is until web fonts came into the picture.

There are many different varieties of web fonts and for more of an overview of the options visit this article: How Google Fonts Stack Up With Other Web Font Services To put it simple what Google fonts now allows is for web designers and web developers to create websites, web applications, blogs, etc. with fonts that people don’t need to have installed on their computers. Using a very simple process of linking to one of Google’s fonts in their library, you are able to display a beautiful custom font throughout the interwebs!

Google Web Fonts

Continue reading
New Post

Multiple Google Fonts

Have multiple Google Fonts that you want to use on your site? This is a nice way to use multiple fonts with out making multiple link requests. Making multiple requests can slow down your website loading time. To avoid this, try to use this format: Fonts Name 1 | Google Fonts Name 2 | Google Fonts Name 3


Continue reading
New Post

Google Fonts 2

Google Web Fonts just got so much better!

Google has laid out a very fine tuned process of picking the best fonts for the job. With its new layout you can do so much more with one of the coolest innovations that I’ve seen on the web in a while. Visit the Google Fonts 2 beta by clicking the link at the bottom.

When you first visit the new site you will be presented with so many new features and options for testing and rendering your font choices.

On the left hand side you will see how many fonts are currently available. Below that there is a convenient search box for those who know the name of the font they are looking for. Below that is probably my favorite new feature which is the Filters section. The Filters section lets you search by Serif, Sans-Serif, Display and Handwriting fonts. This will be very useful with the ever growing number of Google fonts to sort through. Below that is another nice shortcut feature that allows you to narrow down your search even more by allowing you to search by thickness, any thickness, Ultra-light, Light, Book…etc.

Google has also increased the number of supporting languages by adding: Cyrillic Extended, Greek Extended, Latin Extended and Vietnamese.

Now shifting your focus the right hand side of the screen you will see three tabs at the top: Word, Sentence and Paragraph. Each of these tabs let you see how your fonts look up-close, in a single sentence and its full context in a paragraph.

You can now preview a user specified word or sentence to see how the font will look using just the content you provide. You can also be very accurate with your font selection by adjusting the font size to match the size that you will be using it at. The last dropdown box offers up some more features for those of us who can’t get enough control. The Sorting dropdown allows you to organize the list of fonts shown by Alphabet, Date added and Number of styles.

Last but not least, Google now allows you to create your own collection of fonts! This will be very useful in helping narrow down your font options without forgetting which ones caught your eye. Also this new feature will make downloading your font stacks a breeze!

There is one more cool feature that you will see once you click the “Use” button. I will leave that for you to discover.

Over all Google Fonts 2 gets a +1 for this new interface!

Continue reading
New Post

Google Fonts Pixelated

Being able to add Google Fonts to any website is pretty awesome. If you are like me though and are working on and viewing websites from a PC, you might have a different view on that. The way that a PC renders a font can be very different from the way a Mac does. If you are on a PC you may have noticed that your fonts look very pixelated no matter what browsers you look at them in. I recently found a way around this by adding this little hack.

h1 {
font-family: “Google Font”, serif;
text-shadow:0 0 1px transparent;
By adding a 1px shadow to your fonts you can easily mask that ugly pixelated look.

Continue reading
New Post

WP Google Fonts

Just came a crossed a pretty awesome plugin for those of you who use WordPress and don’t want to manually add your Google Fonts to the CSS. The name of the plugin is WP Google Fonts and I just used it on and it worked without a hitch.

To Install
While Logged into the back end of WordPress click the plugins link on the left hand side and do a search for WP Google Fonts it should be your first option to download. Click the “Install Now” link below the Title, once you’ve installed it, it will display a screen asking if you would like to activate plugin or return to plugin installer, Click “Activate Plugin”. Once done, you will see the new plugin “Google Fonts” appear on the left hand “Settings” panel.

My take on the Plugin

Well, right off the bat I was pretty impressed by the simple layout and how it let you easily select which elements you want to target with a specific Google Font, using a checkbox. Immediately after, clicking the “Select Font” drop down menu, it had me wishing it displayed the actual Google Font for each font name. Although at the very bottom they do provide a chart of available fonts that you can choose from and that seemed to suffice for me. Although I don’t know how frequently the fonts are updated.

How to Use

Select your font from the “Select Font” Dropdown menu (you can reference the chart at the bottom to see what the available fonts look like).

Select the check box next to the elements you would like to target your font at.
(All, H1, H2, h3, h4, h5, h6, Block quotes, Paragraphs and Lists)

The Last Option is the “Custom Css” box this nice little option will let you target any other element that might not have been available for you to select using a checkbox. To do this, use the proper syntax:
#bodywrapper a { font-family: ‘Coda’, Arial, serif; }

Over all, pretty easy plugin to use and will be great for someone who might not be too familiar with editing the css or php manually. Thumbs up!

Also you can download it from directly and manually upload it.

Continue reading
New Post

Google Font Previewer

Google Font previewer can be a nice quick tool that lets you preview Google’s Fonts in a custom sentence, so you get a better idea of how your exact content for your website will look. Using the font family drop down list you first select your font. Then you are presented with a slick slider that lets you adjust the font size. After that you select your variant i.e. Regular, Bold, Italic. A really nice feature that they offer is the Shadow option which lets you add a nice shadow to all of your text.

They offer some more quick and easy options like Transform, which lets you, set the css properties of text-transform using a quick and easy radio button. Same as The Transform option they offer the Decoration property to set an underline, strike-through or overline. Again, they make things so easy, with these Letter, Word and Line spacing options. Move the sliders until you get your desired effect, kinda awesome!

Once done adjusting, copy the tag and paste that in between the head tags of your Html… …. Then just copy the css styles: body {font-family: ‘Allan’, serif; font-size: 27px;…} and paste that into your css file. Good to go!

Link To Google’s Font Previewer

Continue reading