Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I showed you how to change typography on your site using the Theme Builder and the forty or so fonts that come built into Drupal Gardens, but you can do much more by gaining access to external font libraries. Drupal Gardens comes with settings for two such popular libraries: Fonts.com and Typekit. The first thing we do is to turn on the Font Management module. You go up, click Modules, then scroll down to Font management, which is in the other group, down toward the bottom. Check its box, go to the bottom, and click Save configuration.
Now you have to sign up for those font libraries, then configure them within your Drupal Gardens site. Don't worry about the sign up phase; both libraries have a free subscription level. I'll show you how it works with Fonts.com, because the system is similar for both it and Typekit. We go up to Configuration and then down to Font management. First thing we'll do is enable our Fonts.com web fonts. Then you'll notice that there are links all around here for where to go in order to get your Fonts.com account, and the same is true for Typekit down at the bottom.
I'm going to Ctrl+Click, since I'm on Windows, to open that in a new tab; if you're on Mac, Command+click. Then I'll switched to that tab. I'm already signed in for this account, so I'll click Enter; otherwise, you would go through the normal account-creation process. And, again, there is a free level, as well as some more premium levels. For Project name, I'll call it Explore California, and then I'll paste in my domain, then click Save project.
The next step is to select a font, but first I'm going to save my changes. Once that's done, I click Choose fonts. You'll notice that some of them simply say Add to project. These are the free fonts. The ones you have to pay for say Upgrade. I'll just pick the first one, Albertus, click Add to project, and it's done. All I have to do is publish it. Now I'll go back to my site, Before I can continue, I have to get my authentication key.
The text down here explains how that works. You go to My account and then click the Account summary tab. I can do that, go back to Fonts.com, My account, and Account summary. Then down here I see my authentication key. I just copy the entire thing and go back to my site and paste it in that field. When I click outside that box, it looks up all the information from that account, and in fact fills in with the project that I have. If I had multiple projects, of course I would select the one that I wanted here.
Then I go down and save. Now I'm ready to use my fonts. I'll close out this overlay, and then go to Appearance to launch the Theme Builder. You'll notice this new link, configure professional fonts. That leads us back to the Configuration page. We don't have to go there since we've already set it all up. To use a font, you simply select some text that you want to style, and as usual, choose the font from here. At the top we have all of the Drupal Gardens fonts and then at the very bottom we have the one we chose from Fonts.com.
If I select it, we immediately see the change. I'm actually not going to keep it, so I'll just close this out. And yes, I'll discard. There is one downside that I don't like about using these external font libraries. We give this little ad for the libraries down here in the corner. To get rid of it, I'm going to go up to Modules and turn that off. We just scroll back down to the Font Management module, uncheck it, scroll all the way down, and Save configuration, and we're back the way we were.
Once the screen reloads, that ad disappears. The magic that Fonts.com offers is in the wide selection of fonts that it has. The same is true for Typekit.com. I'll just go to that site as well, so you can see what it's like. Ultimately, it's very similar to Fonts.com, and your decision may be based on which ones you actually want, if there are specific fonts that you like. Both have a huge selection within their free plans and allow enough page views for most small personal sites. If your site grows, you'll have to upgrade your subscription, because it limits you not only on the fonts available, but also on the number of page views.
There's one other thing I want to warn you about: using these external font libraries might slow down your site, as it will call that outside library every time a user visits the page for the first time. If that's a concern, try it out for a little while and see if the slowdown is onerous. Chances are you won't even notice it. The other thing I have to warn you of is to be judicious in your use of fonts, because designs can get pretty ugly if you use too many on a single page. But when you select smartly and use them with a keen eye, these additional fonts can really dress up your site.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66403 Viewers
61 Video lessons · 96859 Viewers
56 Video lessons · 110556 Viewers
82 Video lessons · 105176 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.