Today, we are going to talk about google fonts. As promised in an earlier post.
“The web is the best place for text. Unlike a printed artifact, text at a URL can be searched, copied, translated, linked to other documents. It can be printed. It’s convenient. It’s accessible.” (Brown 2014)
Internet has always revolved around text. While web developers used to be limited to just the pre installed fonts on the users system. The doors for custom typography has been opened not so long ago. (We are not going to talk about the monstrosity’s like cufon and such.)
With @font-face added to the HTML spec, designers and developers now have a large set of fonts to use on their websites. In theory any font can be used, but there are some things to think about.
- Do you have the license? Fonts can be paid, and maybe you only have a paid license to use it on your desktop but not on your website.
- Can you convert the font to a web font? You cannot use a .ttf file and call it a day. Before you can use a font on your website you’d have to convert it with a service or a command line on your computer. I always use Font Squirrel, if needed.
But enough about these custom fonts, we’re here to talk about Google Fonts! Google Fonts is essentially a website with custom fonts pre generated for you. But there is ever more to it. Lets go over it.
Google fonts, a large collection of high quality fonts
Key part of Google Fonts is the large list of fonts available. At the time of writing there are 818 font families to choose from. While some may not be your taste, Google has chosen for a wide variety of styles to match most of the use cases.
You could go for the sleek and modern Open Sans
Or the goofy swirly less serious Lobster
Needless to say, there is a big chance you’ll find a font matching your needs. If not, you can always generate your own with Font Squirrel. Maybe I’ll write a tutorial about that topic in the near future, but don’t hold your breath.
It’s free to use
Yes, I know I gave that away in the title. But still, it’s free. How cool is that. Not only do they have a large set of quality fonts for you to download, they even offer a hosting service. Also free! I know, I sound like a google salesmen. But I can assure you, I am not.
Their hosting for fonts enables users to access your webpages faster. This is done through caching, if a user has visited another website that used the very same font it could be cached(depending on the browser settings) and then it doesn’t need to be downloaded again. Thus speeding up your website.
Variations and combining them
Even one font family can have several styles and weights. The most common weights are:
- Black
- Bold
- Medium
- Regular
- Light
- Thin
All these weight commonly come in italic and regular styles. This can vary on all fonts, but regular and bold are mostly available on all the fonts I have ever used.
The great thing is that you can combine all these variations into one http request. The downside is that if the user has visited a website with a different choice of variations then the cache would not be accessed and the font has to be downloaded. I guess we can live with this as this only needs to happen once every first visit or when the visitor clears their browser’s cache.
Enough, how do I use it?
The blog has gotten a bit longer than anticipated, I’ll add a jump to this section at the beginning.
Each font has a red circle with a plus sign in it. It should look like this:
If you have clicked on the + button, a little bar should pop up at the bottom of your screen. If you click on the new bar at the bottom a small screen should slide up. What you see here are your chosen font(s). On this screen there are several tabs. We need to be in the embed tab. This should be openend by default.
In the tab embed, you have 2 options. @import or standard. The choice of which you need or want to use is up to you. I’ll explain some more about them.
standard
The standard option will be your most likely choice. You can put the tag in between your <head> tags, like below, to make the font work on your site.
<head> <title>Title of your awesome web project</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="css/link-to-my-awesome-css.css" rel="stylesheet"> </head>
@import
The @import method is something you should avoid unless you have no control over the html, which sometimes is the case. It can slow down the painting of your website, so be aware.
If you want to include the font this way, just stick at the top of your css file.
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.header{
height: 200px;
width: 800px;
/*I'm making stuff up now*/
}
Or put it in a style tag in the head of your html. But if you are going to do this, I would advice on using the standard method described above.
<head>
<title>Title of your awesome web project</title>
<link href="css/link-to-my-awesome-css.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
</style>
</head>
Use the font in your CSS
Great! Now you have picked a font, and a preferred way on how to load the font in your website. There is only one thing left. Defining the font family in your CSS on the elements you want this font to appear on. For the sake of this tutorial I am going to apply it to my body and html tags. And I am going to use a bold version for my Header 1 a.k.a H1
Here is a small portion of a CSS file that would use a bold and regular version of the open sans font.
html,body{
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 400; /* Notice me! senpai*/
}
h1{
font-family: 'Open Sans', sans-serif;
font-size: 21px;
font-weight: 700; /* Notice me! senpai*/
}
Noticed the font-weight ? This is a key part in differentiating the font weights. You can use the standard font-weight: bold; and while that still works. The browsers just fattens up the font without taking in account the finer shapes. This is why you have a customize tab when viewing your selection.
Customize
I already said some things about font-weight , that it is the preferred way of selecting a font’s weight. But what about italic text? What if you want to have thinner fonts, it is all possible in the customize tab. Select the variations you need, and the embed tags in this screen should auto update to your desired selection. If you have already inserted the embed codes in your project, but you have now customized this font. You will need to update your tags before you can use the new font weights.
Keep in mind, that even if you aren’t really using the fonts on your website. If you specify them in your css or head , they will download and have the potential to slow down your website.Google even has a nifty speed meter. It is green when you are using a low amount of fonts and variations.
But will turn red if you go overboard.
Download the font
This hosting service is great and all, but Google is known to unplug any of its projects at any given time. So it is wise to learn that there are alternatives. Like hosting it yourself. You can host Google Fonts yourself. Downloaded from Google, hosted by you. You get the point.
Just click on this little button.
It is located in the top right corner of the panel that is all about your selected font families. This will download a Zip file full of .TTF files (at least the ones I ever downloaded).
Like I said before, a .TTF file isn’t enough to get the font to show up in your browser. You need to run it through the previously mentioned self hosted method of Font Squirrel, or a like. But that is something for some other time. I hope this helped, if anybody has suggestions or questions feel free to leave a comment below.
0 Comments