How to implement Google Web Fonts to make your website dramatically more stylish

Recently, web font services have been gradually increasing.
On the BOEL Inc. website as well, we use “Noto Sans Japanese” from Google Web Fonts.
Web fonts are defined under CSS3, a newer specification of HTML, and they allow fonts to be displayed directly from a web server.
When used effectively, web fonts help maintain a consistent design tone and manner, while also offering new expressive possibilities that can captivate users. This is why it is a technology that we designers are closely watching.

Today, fonts can be displayed regardless of the user’s device environment.
In the past, designers often had to compromise depending on the system: Hiragino on Mac, Meiryo or MS Gothic on Windows. To achieve a desired look, they had to convert text into images or design around preinstalled system fonts, which often resulted in unintended typography.
This issue became more noticeable as websites grew larger, especially with CMSs, systems, and many pages. Turning text into images also made maintenance difficult, as updates required tools like Photoshop, which limited adoption in real-world operations.

By implementing web fonts, designers can display their intended typefaces regardless of the user’s environment. This allows text to appear crisp without blurring or jagged edges, even on Retina displays, greatly expanding the possibilities of expression.

“Google Web Fonts” can be used even without a Google account.
The “Noto Sans Japanese” introduced here is a Japanese font released by Google in October 2014.
It offers a wide variety of font weights, allowing it to be used flexibly across different design styles depending on the purpose.

1: Choose a font from Google Web Fonts

You can narrow down your selection by category or weight, and even preview your own text by replacing the sample text—similar to using Mac’s “Font Book” application.

2: Add CSS

Once you’ve chosen a font, click the “→” next to it.
Select the font weights you need, then copy the code shown under “3. Add this code to your website” and paste it into the head tag.

<link href='http://fonts.googleapis.com/earlyaccess/notosansjapanese.css' rel='stylesheet' type='text/css'

In this example, the font is implemented using “@import” instead of “Standard.”
*Using “@import” in CSS makes it easy to manage changes even for large pages with lots of content.

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

3: Apply font-family in your stylesheet

Add the font-family specified in “4. Integrate the fonts into your CSS” to your stylesheet.

font-family: 'Noto Sans Japanese'
}

And that’s it—you’re done. It’s that simple.

Advantages

• Improved usability
Since it is not an image, text can be easily copied and pasted.

• SEO benefits
Using text instead of images makes it easier for search engines to index the content, which can be advantageous for SEO.
It also displays clearly and sharply even on high-resolution smartphones such as Retina displays.

• Improved site maintenance efficiency
Editing HTML and CSS makes it easier and more efficient to maintain and update content.

Disadvantages

• Cost
Some fonts require licensing fees depending on the typeface you choose.

• Slower loading time
Since font files are loaded from a web server, performance may be affected depending on the device or network environment.

• Kerning limitations
Unlike Illustrator or Photoshop, fine adjustments to character spacing can be difficult.
In practice, adjustments are usually limited to frequently used characters such as “.” or parentheses “()”.

What do you think?
Today, Google Web Fonts offers more than 600 typefaces, mainly focusing on Latin fonts.
We hope this information is helpful when creating websites.
We’ve also included a reference site that may help you when choosing typefaces.