Easily embed web fonts to your web page using Google Font API

I’ve been working on some website design recently. I used fancy fonts in the design sample I made in Adobe Illustrator, forgetting that I have to embed the fonts first to make them display on the visitors’ browsers even if they don’t have those fonts in their computer. I ended up using images on my header menu, making the web page take longer to load, and used fonts on site headings that are less matching to the website theme, making the design less attractive. I didn’t choose to embed the fonts I wanted to use because the procedures seem to take too much time from me.

The designs I’m making are almost done when I found out about the Google Font API and the Google Font Directory. I think that the Google Font API will be very helpful to web designers because its font directory offers good-looking fonts, it works in most browsers, and it saves so much time because of the ease of use.

To use the Google Font API for embedding fonts, all we have to do is insert a call to their stylesheet (depending on which font(s) we choose to use) and then style a web page element with the chosen web font.

See their Getting Started page to see how it’s done.

I’m planning to modify the website designs I’m making, and use a font from the Google Font Directory instead. That way, the pages will load faster without images as header menu items, and the site headings will be more matching to the website design theme. 🙂

Related Posts:

Posts that may be related to "Easily embed web fonts to your web page using Google Font API":


A Filipino programmer and baker. When I have time to spare, I blog, play video games, watch series (usually anime), cook dishes, draw, or spend a little time with pets. When I have the rare luxury of time, I get to travel and record song covers too! Running small-time online dessert shops Cookies PH and Catzie's Cakery.

2 comments on “Easily embed web fonts to your web page using Google Font API


Leave a Reply

Your email address will not be published. Required fields are marked *