Fonts are everywhere these days, and they come in just about every sort of style you can imagine (and some you probably can’t imagine)! The world of free fonts has never provided more choice than it does today, and they’ve never been easier to access. One excellent source for fonts is the Google Fonts website, which has an extensive repository of 915 font families as of early 2019. This repository of open source fonts is a huge, easily accessible, and easily browsable resource for anyone using typography. While intended for use in the Google Docs word processing program and on HTML websites, the Google Fonts repository is open for anyone to use however they wish. In this article I will show you how to use the Google Fonts repository in your Google Docs documents, as well as how to install them to a Windows 10 machine for local use.
Also see our article How to Embed a YouTube Video in a Google Docs
Add New Custom Fonts to Google Docs Documents
Quick Links
- Other Cool Font and Text Effects in Google Docs
Before you install any new fonts on Windows, preview them in a Google Docs document first, just to make sure you like the way it looks. If you have been living under an abandoned barn for the past twenty years and don’t have a Google account, you can create a free account here, and you’ll be rolling in no time. Once you have a Google account, visit Google Docs and click Blank to open the word processor as in the snapshot directly below.
Click the Font drop-down menu (it probably says “Arial” on your document, as that’s the default for Google Docs) on the Google Docs toolbar. Then click More fonts to open the window shown directly below. There you can select a full collection of Google fonts to add to Docs’ Font drop-down menu.
Click the Show button to open a drop-down menu of categories. Then you can search for fonts in more specific categories, as trying to browse through all of them in one lump category would get more than a little be overwhelming. Select a font to add to the document, and press the OK button. Enter some text in the document and format the font to preview it in the word processor.
Add Fonts to Google Docs Using Extensis Fonts
Google’s built-in additional fonts are very useful, but they come with two problems: one, not every Google font makes it into the Google Fonts system, and two, you have to go into Google Fonts every time you want to use a different font. The Extensis Fonts add-on for Docs fixes both of these problems by putting all your fonts in an easily-accessed menu, as well as auto-updating whenever a new font hits the Google Fonts library.
Installing Extensis Fonts is very easy. In an open Google Docs document, select Add-ons and type “Extensis” into the search bar and hit return. Click on the +Free button and it will automatically install after asking you which Google account to install it on and asking for permission to install. After you install Extensis Fonts, activating it is simple. Go to the Add-ons menu and select Extensis Fonts -> Start.
Extensis Fonts will open in the sidebar with a preview of all your fonts and the ability to sort and select them effortlessly.
Add Fonts to Windows from the Google Fonts Website
Using the Google Fonts repository in Google Docs is simple; you just use the fonts as outlined above. However, if you want a little more control over customizing the document as a whole then you may prefer a desktop word processor such as Microsoft Word, and in that case you’ll need to download the fonts you want to use to your local machine. Just navigate to Google Fonts to get started.
Now you can browse through an expansive directory of fonts by clicking Directory at the top of the Google Fonts website. To find some of the fonts you entered in the Docs word processor, click the Show search and filters button at the top right of the page. That will open the search sidebar, as in the shot directly below. Enter the font name in the search box to find it, or select a specific category filter for a more general font search.
Click the Select this font + buttons to choose fonts for download. Then you can click a minimized Families Selected window at the bottom of the page to open your selection of fonts, as shown directly below. Click the Download this selection button to save the selected fonts to your hard drive.
The fonts are saved within a compressed ZIP file. Open the folder you downloaded them to in File Explorer, and click the new font ZIP file. Extract the compressed ZIP folder by pressing the Extract all button, which will open the window shown directly below. Click the Browse button to select a folder to extract the ZIP to, and then press the Extract button.
Open the extracted font folder, and then right-click one of the Google font files and select the Install option on the context menu. To select multiple fonts, hold and press the Ctrl button. Alternatively, you can drag-and-drop Google fonts from the extracted folder into the Windows fonts folder instead. The path for the Fonts folder is: C:WindowsFonts.
Next, open your word processor in Windows and click its font drop-down menu to select the new Google font from there. Note that you can also select the fonts in image editors and other office software.
Add Google Fonts to Windows With SkyFonts
You can also add the Google fonts to Windows with extra third-party software. SkyFonts is free font management software that you can use to install and maintain your fonts. Using SkyFonts is recommended because if a font family changes, SkyFonts will automatically keep you up to date with the new or corrected fonts. That’s one less thing to worry about forgetting. Just visit the SkyFonts site and click Download SkyFonts to add the software to Windows. You’ll also need to set up an account on the SkyFonts website by clicking Sign in.
Thereafter, press the Browse Google Fonts button on the SkyFonts site to open the window shown below. To add one of the listed fonts to Windows, click its SkyFonts button. Then press the Add button to install that font on Windows.
The Google Fonts directory is a great collection of web fonts which anyone can use for their own purposes. Now you can include those fonts in your documents, and even add them to your images, using Windows word processors and image editors. If you’re a Harry Potter fan, this Tech Junkie guide even tells you how to install Harry Potter fonts!
Other Cool Font and Text Effects in Google Docs
There are a lot of other cool things you can do with fonts in Google Docs. Here are just a few of them.
DocTools
DocTools is a free addon for Docs that adds more than a dozen helpful text features to your documents. DocTools lets you change case, adjust font sizes, change numbers to the equivalent words and vice-versa, add and remove highlighting, and more with just a single click.
Magic Rainbow Unicorns
Magic Rainbow Unicorns (really) lets you turn your boring text into a literal rainbow of color. Just select the area of text you want to rainbow-ify (rainbow-ize? imbue with rainbowness?) and pick your starting and ending color range, and Magic Rainbow Unicorns (again, really) will automatically convert the text color into a beautiful rainbow.
Fun Text
Fun Text is an add-on that lets you add all kinds of neat visual effects to your text, including rainbows, random colors, fades, and much more. You can make your letters grow, turn upside down…it’s really quite, well, fun.
Auto LaTeX
OK, this add-on isn’t particularly fun (no rainbows) but it is really powerful and useful for folks doing scientific, mathematical, or engineering work in Google Docs. One of the dominant word processing programs for academic work is called LaTeX, and its main claim to fame is that it handles formulas and equations really well. Wouldn’t it be great if you could do that in Google Docs? Well, you can with Auto LaTeX. This addon takes any LaTeX equation string in your document and turns it into an image that you can work with transparently.
Insert Icons for Docs
One reason people want custom fonts is that many fonts have special characters that can be used in documents. This add-on bypasses that kind of clumsy solution, instead letting you just directly import all the special characters you want. Icons for Docs lets you import more than 900 icons from Font Awesome and 900 icons from Google Material Design, change their color, and resize them directly in the document.
Signature
Signing documents online is usually a pain in the rear. Signature changes that. Install the add-on, activate it in the document, and then draw your signature with the mouse. Done.
Looking for more information on how to get the most out of Google Docs? We’ve got you covered!
Want to communicate with your coworkers? We’ll show you how to send a message in Google Docs!
One common need for Docs users is to export their work to HTML. Here’s how to convert your Google Docs into HTML.
We’ve got a tutorial on how to put an image behind text in Google Docs.
Did you know you can use Google Docs as a source code editor? We’ll show you how to set up formatting syntax in Google Docs.
If you need columnar information, you’ll want to read our guide to creating columns in Google Docs.
Not crazy about Google’s flagship office suite? Check out our guide to five alternatives to Google Docs.
Been working with someone and now need to block their access? Here’s our tutorial on how to kick someone out of a Google Doc.
Also see our article How to Embed a YouTube Video in a Google Docs
Add New Custom Fonts to Google Docs Documents
Quick Links
- Other Cool Font and Text Effects in Google Docs
Before you install any new fonts on Windows, preview them in a Google Docs document first, just to make sure you like the way it looks. If you have been living under an abandoned barn for the past twenty years and don’t have a Google account, you can create a free account here, and you’ll be rolling in no time. Once you have a Google account, visit Google Docs and click Blank to open the word processor as in the snapshot directly below.
Click the Font drop-down menu (it probably says “Arial” on your document, as that’s the default for Google Docs) on the Google Docs toolbar. Then click More fonts to open the window shown directly below. There you can select a full collection of Google fonts to add to Docs’ Font drop-down menu.
Click the Show button to open a drop-down menu of categories. Then you can search for fonts in more specific categories, as trying to browse through all of them in one lump category would get more than a little be overwhelming. Select a font to add to the document, and press the OK button. Enter some text in the document and format the font to preview it in the word processor.
Add Fonts to Google Docs Using Extensis Fonts
Google’s built-in additional fonts are very useful, but they come with two problems: one, not every Google font makes it into the Google Fonts system, and two, you have to go into Google Fonts every time you want to use a different font. The Extensis Fonts add-on for Docs fixes both of these problems by putting all your fonts in an easily-accessed menu, as well as auto-updating whenever a new font hits the Google Fonts library.
Installing Extensis Fonts is very easy. In an open Google Docs document, select Add-ons and type “Extensis” into the search bar and hit return. Click on the +Free button and it will automatically install after asking you which Google account to install it on and asking for permission to install. After you install Extensis Fonts, activating it is simple. Go to the Add-ons menu and select Extensis Fonts -> Start.
Extensis Fonts will open in the sidebar with a preview of all your fonts and the ability to sort and select them effortlessly.
Add Fonts to Windows from the Google Fonts Website
Using the Google Fonts repository in Google Docs is simple; you just use the fonts as outlined above. However, if you want a little more control over customizing the document as a whole then you may prefer a desktop word processor such as Microsoft Word, and in that case you’ll need to download the fonts you want to use to your local machine. Just navigate to Google Fonts to get started.
Now you can browse through an expansive directory of fonts by clicking Directory at the top of the Google Fonts website. To find some of the fonts you entered in the Docs word processor, click the Show search and filters button at the top right of the page. That will open the search sidebar, as in the shot directly below. Enter the font name in the search box to find it, or select a specific category filter for a more general font search.
Click the Select this font + buttons to choose fonts for download. Then you can click a minimized Families Selected window at the bottom of the page to open your selection of fonts, as shown directly below. Click the Download this selection button to save the selected fonts to your hard drive.
The fonts are saved within a compressed ZIP file. Open the folder you downloaded them to in File Explorer, and click the new font ZIP file. Extract the compressed ZIP folder by pressing the Extract all button, which will open the window shown directly below. Click the Browse button to select a folder to extract the ZIP to, and then press the Extract button.
Open the extracted font folder, and then right-click one of the Google font files and select the Install option on the context menu. To select multiple fonts, hold and press the Ctrl button. Alternatively, you can drag-and-drop Google fonts from the extracted folder into the Windows fonts folder instead. The path for the Fonts folder is: C:WindowsFonts.
Next, open your word processor in Windows and click its font drop-down menu to select the new Google font from there. Note that you can also select the fonts in image editors and other office software.
Add My Font To Google Docs
Add Google Fonts to Windows With SkyFonts
You can also add the Google fonts to Windows with extra third-party software. SkyFonts is free font management software that you can use to install and maintain your fonts. Using SkyFonts is recommended because if a font family changes, SkyFonts will automatically keep you up to date with the new or corrected fonts. That’s one less thing to worry about forgetting. Just visit the SkyFonts site and click Download SkyFonts to add the software to Windows. You’ll also need to set up an account on the SkyFonts website by clicking Sign in.
Thereafter, press the Browse Google Fonts button on the SkyFonts site to open the window shown below. To add one of the listed fonts to Windows, click its SkyFonts button. Then press the Add button to install that font on Windows.
The Google Fonts directory is a great collection of web fonts which anyone can use for their own purposes. Now you can include those fonts in your documents, and even add them to your images, using Windows word processors and image editors. If you’re a Harry Potter fan, this Tech Junkie guide even tells you how to install Harry Potter fonts!
Other Cool Font and Text Effects in Google Docs
There are a lot of other cool things you can do with fonts in Google Docs. Here are just a few of them.
DocTools
DocTools is a free addon for Docs that adds more than a dozen helpful text features to your documents. DocTools lets you change case, adjust font sizes, change numbers to the equivalent words and vice-versa, add and remove highlighting, and more with just a single click.
Magic Rainbow Unicorns
Magic Rainbow Unicorns (really) lets you turn your boring text into a literal rainbow of color. Just select the area of text you want to rainbow-ify (rainbow-ize? imbue with rainbowness?) and pick your starting and ending color range, and Magic Rainbow Unicorns (again, really) will automatically convert the text color into a beautiful rainbow.
Fun Text
Fun Text is an add-on that lets you add all kinds of neat visual effects to your text, including rainbows, random colors, fades, and much more. You can make your letters grow, turn upside down…it’s really quite, well, fun.
Auto LaTeX
OK, this add-on isn’t particularly fun (no rainbows) but it is really powerful and useful for folks doing scientific, mathematical, or engineering work in Google Docs. One of the dominant word processing programs for academic work is called LaTeX, and its main claim to fame is that it handles formulas and equations really well. Wouldn’t it be great if you could do that in Google Docs? Well, you can with Auto LaTeX. This addon takes any LaTeX equation string in your document and turns it into an image that you can work with transparently.
Insert Icons for Docs
One reason people want custom fonts is that many fonts have special characters that can be used in documents. This add-on bypasses that kind of clumsy solution, instead letting you just directly import all the special characters you want. Icons for Docs lets you import more than 900 icons from Font Awesome and 900 icons from Google Material Design, change their color, and resize them directly in the document.
Signature
Signing documents online is usually a pain in the rear. Signature changes that. Install the add-on, activate it in the document, and then draw your signature with the mouse. Done.
Looking for more information on how to get the most out of Google Docs? We’ve got you covered!
Want to communicate with your coworkers? We’ll show you how to send a message in Google Docs!
One common need for Docs users is to export their work to HTML. Here’s how to convert your Google Docs into HTML.
We’ve got a tutorial on how to put an image behind text in Google Docs.
Did you know you can use Google Docs as a source code editor? We’ll show you how to set up formatting syntax in Google Docs.
If you need columnar information, you’ll want to read our guide to creating columns in Google Docs.
Not crazy about Google’s flagship office suite? Check out our guide to five alternatives to Google Docs.
Been working with someone and now need to block their access? Here’s our tutorial on how to kick someone out of a Google Doc.
If you depend upon Google Docs for your everyday business usage, you might occasionally run into a situation where you have not been able to find just the right font for a report, invoice, document, flyer, etc. Out of the box, Google Docs does have some decent fonts, but the selection is quite limited. What if you could add more, a lot more? If you're like me, the idea of more fonts is appealing on numerous levels. But this is Google Docs. It's not like you can just install new fonts for your operating system and have them recognized by Docs. That's simply not going to happen.
So how do you add new fonts to Google Docs? With the help of an easy to use add-on called Extensis Fonts, which will give you access to the 1200+ fonts from the Google Font collection. The add-on also allows you to show only specific font families and sort by alphabetical, date added, popularity, and trending.
Let's install and use Extensis Fonts.
Installation
Installing the Extensis Fonts add-on is simple. Just follow these steps:
- Open your browser and point it to the Extensis Fonts add-on page.
- Click the +FREE button.
- Select the Google account to be associated with the add-on.
- Click the ALLOW button to give the add-on the necessary permissions.
- Allow the installation to complete.
That's all there is to the installation.
Usage
Open up a Google document. If you click on the Font drop-down, you won't see any new fonts added into the mix. What gives? You have to first start the Extensis Font add-on. To do that, click on the Add-ons drop-down from the main toolbar and click Extensis Fonts | Start. This will start the add-on and open a new sidebar within your Google document ( Figure A).
Figure A
Using the extension is just like using the Font drop-down from the toolbar. Highlight the text you want to change and then select the font from the Extensis sidebar. It's that easy. If you need to view the fonts at a bigger size, drag the Size bar to the right. If you want to see how they look smaller, drag it to the left. If you want to narrow the font selection down for easier searching, click on the Show drop-down and select the font family you want to view. To make it even easier, click the Sort drop-down and select how you want to sort the fonts.
That's pretty much it for Extensis Fonts. It's a one-trick pony of an add-on that will benefit Google Docs power users. Give it a try and see if it doesn't help make your Google Docs-generated business documents stand out.
Cloud Insights Newsletter
Your go-to knowledge base for the latest about AWS, Microsoft Azure, Google Cloud Platform, Docker, SaaS, IaaS, cloud security, containers, the public cloud, the hybrid cloud, the industry cloud, and much more. Delivered Mondays
Sign up today Sign up today
Also See
- How to integrate Google Keep with Google Docs (TechRepublic)
- 5 tips for getting the most out of Google Docs (TechRepublic Video)
- How to generate a Word Cloud image in Google Docs (TechRepublic)
- How to track Microsoft Office user changes in Google docs (TechRepublic)
- How to extract text from a PDF or image in Google Drive (TechRepublic)
- Google Docs adds collaboration muscle with big update (ZDNet)
This guide explains how to use the Google Fonts API to add fonts to your webpages. You don't need to do any programming; all you have to do is add a specialstylesheet link to your HTML document, then refer to the font in a CSS style.
A quick example
Here's an example. Copy and paste the following HTML into a file:
Then open the file in a modern web browser. You should see a page displaying thefollowing, in the font called Tangerine:
Cool Fonts On Google Docs
That sentence is ordinary text, so you can change how it looks by using CSS. Tryadding a shadow to the style in the previous example:
You should now see a drop shadow under the text:
Making the Web Beautiful!
And that's only the beginning of what you can do with the Fonts API and CSS.
![Google Google](/uploads/1/2/3/7/123717434/596582574.jpg)
Overview
You can start using the Google Fonts API in just two steps:
-
Add a stylesheet link to request the desired web font(s):
-
Style an element with the requested web font, either in a stylesheet:or with an inline style on the element itself:
serif
or sans-serif
to the end of the list,so the browser can fall back to its default fonts if need be.
For a list of fonts you can use, seeGoogle Fonts.
Specifying font families and styles in a stylesheet URL
To determine what URL to use in your stylesheet link, start with the GoogleFonts API base URL:
Then, add the
family=
URL parameter, with one or more font family names andstyles.
Best Fonts On Google Docs
For example, to request theInconsolata font:
Note: Replace any spaces in the font family name with plus signs (+
).
To request multiple font families, separate the names with a pipe character(
|
).
For example, to request the fontsTangerine,Inconsolata, andDroid Sans:
Requesting multiple fonts allows you to use all of those fonts in your page.(But don't go overboard; most pages don't need very many fonts, and requesting alot of fonts may make your pages slow to load.)
The Google Fonts API provides the regular version of the requested fonts bydefault. To request other styles or weights, append a colon (
:
) to the name ofthe font, followed by a list of styles or weights separated by commas (,
).
For example:
To find out which styles and weights are available for a given font, see thefont's listing in Google Fonts.
For each style you request, you can give either the full name or anabbreviation; for weights, you can alternatively specify a numerical weight:
Style | Specifiers |
---|---|
italic | italic or i |
bold | bold or b or a numerical weight such as 700 |
bold italic | bolditalic or bi |
For example, to request Cantarell italic and Droid Serif bold, you could use anyof the following URLs:
Use font-display
font-display lets you controlwhat happens while the font is unavailable.Specifying a value other than the default
auto
is usually appropriate.
Pass the desired value in the querystring
display
parameter:
Specifying script subsets
Some of the fonts in the Google Font Directorysupport multiple scripts (like Latin, Cyrillic, and Greek for example). In orderto specify which subsets should be downloaded the subset parameter should beappended to the URL.
For example, to request the Cyrillic subset of theRoboto Mono font, the URLwould be:
To request the Greek subset of theRoboto Mono font, the URLwould be:
To request both Greek and Cyrillic subsets of theRoboto Mono font, the URLwould be:
The Latin subset is always included if available and need not be specified.Please note that if a client browser supports unicode-range(http://caniuse.com/#feat=font-unicode-range)the subset parameter is ignored; the browser will select from the subsetssupported by the font to get what it needs to render the text.
For a complete list of available fonts and font subsets please seeGoogle Fonts.
Optimizing your font requests
Oftentimes, when you want to use a web font on your website or application, youknow in advance which letters you'll need. This often occurs when you're using aweb font in a logo or heading.
In these cases, you should consider specifying a
text=
value in your fontrequest URL. This allows Google to return a font file that's optimized for yourrequest. In some cases, this can reduce the size of the font file by up to 90%.
To use this feature, simply add
text=
to your Google Fonts APIrequests. For example if you're only using Inconsolata for the title of yourblog, you can put the title itself as the value of text=
. Here is what therequest would look like:
As with all query strings, you should URL-encode the value:
This feature also works for international fonts, allowing you to specify UTF-8characters. For example, ¡Hola! is represented as:
Note: there's no need to specify the subset=
parameter when using text=
asit allows you to refer to any character in the original font.
Enabling font effects (Beta)
When making headers or display texts on your website, you'll often want tostylize your text in a decorative way. To simplify your work, Google hasprovided a collection of font effects that you can use with minimal effort toproduce beautiful display text. For example:
To use this beta feature, simply add
effect=
to your GoogleFonts API request and add the corresponding class name to the HTML element(s)that you want to affect. In our example above, we used the shadow-multiple
font effect, so the request would look like:
To use the effect, add the corresponding class name to your HTML element(s). Thecorresponding class name is always the effect name prefixed with
font-effect-
,so the class name for shadow-multiple
would be font-effect-shadow-multiple
:
You can request multiple effects by separating the effect names with a pipecharacter (
|
).
Here is a complete listing of all the font effects that we offer:
Effect | API Name | Class Name | Support |
---|---|---|---|
Anaglyph | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
Brick Sign | brick-sign |
font-effect-brick-sign |
Chrome, Safari |
Canvas Print | canvas-print |
font-effect-canvas-print |
Chrome, Safari |
Crackle | crackle |
font-effect-crackle |
Chrome, Safari |
Decaying | decaying |
font-effect-decaying |
Chrome, Safari |
Destruction | destruction |
font-effect-destruction |
Chrome, Safari |
Distressed | distressed |
font-effect-distressed |
Chrome, Safari |
Distressed Wood | distressed-wood |
font-effect-distressed-wood |
Chrome, Safari |
Emboss | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
Fire | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
Fire Animation | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
Fragile | fragile |
font-effect-fragile |
Chrome, Safari |
Grass | grass |
font-effect-grass |
Chrome, Safari |
Ice | ice |
font-effect-ice |
Chrome, Safari |
Mitosis | mitosis |
font-effect-mitosis |
Chrome, Safari |
Neon | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
Outline | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
Putting Green | putting-green |
font-effect-putting-green |
Chrome, Safari |
Scuffed Steel | scuffed-steel |
font-effect-scuffed-steel |
Chrome, Safari |
Shadow Multiple | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
Splintered | splintered |
font-effect-splintered |
Chrome, Safari |
Static | static |
font-effect-static |
Chrome, Safari |
Stonewash | stonewash |
font-effect-stonewash |
Chrome, Safari |
Three Dimensional | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
Three Dimensional Float | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
Vintage | vintage |
font-effect-vintage |
Chrome, Safari |
Wallpaper | wallpaper |
font-effect-wallpaper |
Chrome, Safari |
There are many more ways to style your fonts, and many things are possiblethrough CSS. We are simply providing a few ideas to get you started. For moreideas, try Google searching 'css text effects'and browse through many of the ideas that are already on the web!
Further reading
- See a complete list of font families provided by the Google Fonts API onGoogle Fonts.
- Learn how to use the Web Font Loaderto have more control over loading fonts.
- Learn more about how the Google Fonts API works on theTechnical Considerations page.