Neptune Web | Boston-based digital marketing agency: Website Design, Website Services, SEO, Marketing Automation Neptune Web

Google Font API Gives Web Developers More Typography Options

The Google font API is a simple tool that will let a production developer insert what are traditionally considered 'non web safe' fonts safely into a page's set of styles for a creative twist on what have otherwise become a bland set of options for font faces over the past 15+ years of web page design.  This presents a new method for creating unique, SEO-friendly headlines and text elements. (see this previous post for other SEO-friendly alternative font methods).

The API itself is simple:

  1. Call to the API in the <head> tag of your page with this line:
    <link rel="stylesheet" type="text/css"
    href="http://fonts.googleapis.com/css?family=Font+Name">
  2. Where "Font+Name" is in the <link> tag is where you can choose your font.
  3. Use the font you've chosen as part of the normal font-family property in your CSS. Ex.:
    font-family:'Font Name', serif

Google has even made it easy for you to browse and configure fonts via its Font Previewer that will dynamically output the code you can cut and paste into your own page. Options include standard CSS properties like letter and line spacing.  The font API is compatabile all the way down to Internet Explorer 6, though designers should keep in mind IE6 (and all other browser) CSS support -- for example, no Internet Explorer browser supports the 'text-shadow' property.

The font directory is small right now, but growing.  Be weary, however: all fonts are available under an open source license, so don't expect to see any Adobe or Microsoft fonts.

Neptune Web is a full-service Boston-area interactive web and digital marketing agency with expertise in Website Design, Web Development, Digital Marketing Strategy and Execution.

We look forward to your comments and would be most happy to address and help solve any Digital Marketing or Website Design & Development challenges you may have.

comments powered by Disqus