General Information
Here is some information from Monospace about font licensing.
Below are some frequently asked questions about fonts that it is important to keep in mind when finding a font provider.
Does the client need separate font licenses for different uses?
Yes. Even if a brand only uses one typeface (let’s say, Futura Now), the font software needs to be licensed for the different environments where it will be used.
There are a few basic license types offered by Monotype, each pertaining to a different form of usage. Desktop licenses allow you to install a font on a computer for use in print or in static image formats; webfont licenses allow you to embed the font into a website or email; embedded licenses let you distribute fonts in physical products like medical devices, cars, or in software programs; mobile app licenses allow fonts to be embedded in phone/tablet apps; ePub licenses cover usage in commercial publications; and server licenses enable web or cloud-based services and SaaS use cases.
Quick example: If a brand licenses Futura Now for some print materials, then later decides to launch an app also using the same typeface, they’ll need to secure a mobile app license for Futura Now before the app is deployed.
Can the client use a font with a desktop license on their website?
No. A typical desktop license allows you to install the font on your computer for use in design programs like InDesign. Webfont licenses allow you to embed that font in the code for a website or email. So, whereas you might use a desktop license to create a static image (like a .jpeg) you upload to your website, a webfont license facilitates the implementation of the font in the actual code of your website. They will need to provide us the web font files with proof that it has been licensed by them.
Can the client use a free font?
Only if they can provide proof that it is free for commercial use, and they’ll need to show us where it says that.
Provider List & Preferences
The following is a list of font providers with example sites, so we always have something to pull from. They are listed in order from easiest to hardest to implement, with notes on each provider. All examples link to the UAT site. (If this looks familiar, it’s from this pinned item in the web dev slack.)
Highly Preferred
Google Fonts
Link: https://fonts.google.com/
Absolute easiest, takes minimal effort on our part. At least 80% of our sites use it. The ONLY free font provider, I think—the rest are paid.
Examples: TLC Community Credit Union remake, Blue Ridge Bank & Trust
Adobe Fonts
Link: https://fonts.adobe.com/ (previously known as TypeKit)
Thanks to a new update in the way we set up fonts, this is pretty much just as easy as Google Fonts to implement! Quite a few sites use it. However, it’s notorious for causing slow load times, so keep that in mind.
The client should send you a line of code that looks like this: <link rel="stylesheet" href="https://use.typekit.net/tqe2wjk.css">
It will look like this in your fonts.mustache file–replace idgoeshere with the random letters/numbers before .css in the line of code that was provided by the client (in this case, tqe2wjk. It should look like this:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>WebFont.load({
typekit: {
id: 'idgoeshere'
}
});</script>
If you can’t get your font to load in Figma, even though you definitely have it in Adobe Fonts/Creative Cloud, follow these instructions on Slack.
Examples:
Fonts.com / Myfonts.com
Link: https://www.fonts.com/web-fonts
This one is actually weirdly easy! Just go into your fonts.mustache and replace what’s there with the script below.
For the projectId line, you’ll need to find that in the example files provided to you. In the one example I’ve dealt with so far, they provided a zip file called MyFontsWebfontsKit which included a MyFontsWebfontsKit.css file. At the end of a whole bunch of comments there was an import line (ex: @import url("//hello.myfonts.net/count/3b2b7e");). Take the ID from the end of that line and paste it into the “ID GOES HERE” area inside the quotes.
<script type="text/javascript">
WebFontConfig = {
monotype: {
projectId: 'ID GOES HERE',
version: 12345, // (optional, flushes the CDN cache)
loadAllFonts: true //(optional, loads all project fonts)
}
};
</script>
Examples: United Bank of Michigan remake
Neutral
Linotype
Link: http://linotype.com/
A bit of a pain to implement, needed credentials for client account and had to set up the font CSS/files a specific way. But not difficult and appeared to work consistently.
Examples: First Heritage Federal Credit Union, American Bank
Milieu Grotesque
Link: https://www.milieugrotesque.com/
Client needed to provide CSS and font files to us, and an older setup for google fonts was referenced in order to get this to work. But it seems to be working so far!
Examples: Craft Bank
Colophon Foundry
Link: https://www.colophon-foundry.org/
The first thing they provided was a doc telling us to edit the htaccess file, which we absolutely can’t do as per tech ops. Then when we asked for a CSS setup, they told us (paraphrased/translated) that it could be set up the same way as their other font, from Milieu Grotesque noted above. Expected more issues, but it appears to be working.
Examples: Craft Bank
FontAwesome
Not a font, per se, but a set of icons. Here’s a list of sites that use it, so you can reference. Instructions to install will be added later.
- Renasant Bank (No longer a client with us, so use UAT as a reference)
- First Bank (Waverly, IA) (2020 remake)
FontSpring
Link: https://www.fontspring.com/
A bit of a pain because the first site that used it only provided two file types, but otherwise not bad. Client should provide you with 4 font file types: TTF, WOFF, EOT and SVG. These types are necessary to get the webfonts working on our sites.
Examples: MyPoint Credit Union
Only If Client Insists
Typography
Link: https://www.typography.com/
AVOID LIKE THE PLAGUE if at all possible!! Massive pain—involves one setup for UAT, and then in order to go live involves an entirely separate setup that has to be done after the site goes live. Requires dev to log in to do part of the work, then client has to do another piece, then dev has to have something uploaded to the live site by tech ops.
Examples: Camden is supposed to be using this provider, but it’s actually broken/not set up correctly and in spite of multiple attempts to fix it, they never have, because it takes too much effort on their part. So it’s just constantly broken.
(Functional) Examples: Bank Independent
How-To, For Developers
Google Fonts | Adobe Fonts (formerly Typekit) | Fonts.com (aka Myfonts.com)
Bootstrap 4 (current, fully updated sites)
We use the webfontloader plugin for loading fonts from any of these three providers. See their documentation for more information. The short version is that in your partial > fonts.mustache file, you can change the word “google” to be either “typekit” or “monotype” (for Adobe Fonts or Fonts.com, respectively). Google requires no other credentials, but Adobe and Fonts.com requires additional information that you will need to be given by the PC (who should be able to get it from the client).
Then, regardless of where your font is coming from, you’ll need to edit your package.json. You’ll see two lines near the top for baseFont and altFont. List the font and each font weight for these values. Make sure to also include the italicized version by adding an “i” after the font weight, if it exists. For example, this is including weights 300 and 400 of Quicksand for the base font, and weights 400 and 500 (plus their italics) of Mali for the alt font.
baseFont: "Quicksand:300,400,400i",
altFont: "Mali:400,400i,500,500i",
You can find the available font weights for each specific font on the website where the font came from. They will list it as a descriptive phrase (e.g. “bold”, “semi-bold”, “medium”) which you will most likely see in Illustrator and Sketch, as well as a numeric value (700, 600, 500) that you will use as the font-weight in CSS.
FontSpring
Bootstrap 4 (current, fully updated sites)
Their documentation for how to install their web fonts is here. Client should provide you with 4 font file types: TTF, WOFF, EOT and SVG. If they don’t, you should be able to use a font converter to get the missing types, or just have the PC/designer ask the client to get the missing types.
Add the font files to the src > root > files > font folder. Make sure to build your files with gulp so that they are pulled into the assets and deploy folders.
In your fonts.mustache file, add a section below the script for the google font call which will include the styles for your new fonts. The client should have provided a CSS file so you can use this as a base if needed, but your end result should look something like this, with one font section for each weight/different style:
@font-face {
font-family: 'Hurme Geometric Sans 2';
src: url('/assets/font/hurmegeometricsans_no2_6_bold-webfont.eot');
src: url('/assets/font/hurmegeometricsans_no2_6_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/font/hurmegeometricsans_no2_6_bold-webfont.otf') format('otf'),
url('/assets/font/hurmegeometricsans_no2_6_bold-webfont.svg#hurmegeometricsans_no2_6_bold-webfont') format('svg'),
url('/assets/font/hurmegeometricsans_no2_6_bold-webfont.woff') format('woff'),
url('/assets/font/hurmegeometricsans_no2_6_bold-webfont.ttf') format('truetype');
font-weight: 600;
font-style: bold;
}
The “font-family” should be the same for each font-face declaration, and make sure to update the “font-weight” and “font-style” properties for each. Note that the “src” section has a line for each of the font types.
Lastly, remember to go into your variables.scss file and set the font there as needed. You can see the example site(s) noted above if you need a reference point.
Bootstrap 3 and below
For older sites, Google Fonts, Adobe Fonts/Typekit, and Fonts.com/MyFonts.com each have their own separate methods to install the font.