Custom Fonts

Made Daily can use web fonts for any website. A web font is a font design specifically for use on websites and requires a font license.

A web font is a resource that is downloaded when a guest views your website, like an image the font must download. When your page has lots of fonts and images it can become slower to load the page. When using custom web fonts, we recommend not using more that three individual fonts to keep page load times fast.

An individual font would be the typeface name (Trade Gothic) and the weight (bold). If you wanted Trade Gothic Regular, that would be a seperate font. Web Fonts are also identified by a number designating their weight (normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900).

A web safe font is a font that is pre-installed on many operating systems making it available across browsers.

Web safe fonts have varying formats: EOT (Embedded OpenType Fonts), WOFF (The Web Open Font Format), SVG (Fonts/Shapes), TTF (TrueType Fonts a font standard developed in the late 1980s, by Apple and Microsoft).

A fallback font is a font chosen to be the back-up if a display system or browser encounters an issue with the webfont. Fallback fonts will appear if your custom web font is not appearing.

To access the Custom Fonts go to the Main Menu and click on Custom Fonts.

Adding Web Fonts

You can add web fonts from a font house or upload your own. Some of the font houses we integrate with are: Google Fonts, Fonts.com, Adobe Typekit, Typography.com

Upload your own Custom Font

Click on Custom, from the CUSTOM FONTS page in the main menu, under DESIGN.

Give your new font a name and select a Fallback font. Then click CREATE WEB FONT.

Next, upload your web font files, Click SELECT OR UPLOAD FONT FILES. You will need to upload a set of files for your font that include: EOT, WOFF, SVG, TTF.

Click PREVIEW. You should see a display of your fonts, if you don’t read troubleshooting tips.

Then PUBLISH THE WEB FONT.

Troubleshooting

If the font doesn’t appear go into pages and click CLEAR PAGE CACHE. You may also need to reupload the font files again.

Upload from Google Fonts

Click on Google Font, from the Custom Fonts page in the main menu, under Design.

Next, go to fonts.google.com and select the font you'd like to use on your site. Do this by clicking the red "+" button in the upper right-hand corner of the font family. Once selected the "+" will switch to a "-" symbol and a Family Selected tab will pop up in the bottom right-hand corner.

Click the Family Selected tab in the bottom right-hand corner, this will bring up the font family with embed and customization options.

Click the Customize tab and begin customizing your web font by selecting multiple weights, we recommend limiting to three weights, this will help keep load times to a minimum.

Once you have finished customizing your font, switch back to the Embed tab and copy the link under the Embed Font headline. We will be using the standard link, not the @import link.

From here, go back to the admin and paste the standard embed link into the Google Font URL field. This will automatically load in the Font Name and Font Styles of your web font.

Set a fallback font and click Create Google Font in the upper right-hand corner.

Fallback fonts are used if your font choice(s) aren't usable. Some display systems may encounter a character that is not part of its collection, in cases like this a fallback font is used. Pair your fallback font accordingly with your font choice style, in this case, we chose 'Roboto' which is a sans-serif font, so we would pair that with a sans-serif fallback font.

Check that your font looks correct, if it doesn't match your font selection, double-check the URL embed in the previous Info step.

Finally, publish your web font by clicking Publish Web Font in the upper right-hand corner.

Upload from Fonts.com

Click on Fonts.com, from the Custom Fonts page in the main menu, under Design.

Next, go to fonts.com and select the font you'd like to use on your site. Do this by navigating to the "Your Account" menu and click on "Web Font Projects."

From here find your web font project or create a new one. First, click "Add & Edit Fonts," add a new font or edit an existing font.

Next click, "Add & Edit Domains." A window will pop-up prompting you to add a domain.

Open up a new tab or window in your browser and go to the made daily admin. Navigate to, "Website Domains" in the main menu.

You will see your website domain, or your temporary website URL if you have not yet added a domain. Copy your domain and paste it in the domain field back on fonts.com and click "Save Domian."

Now click on "Publish Options," this will pop open a window where you will see a string of code and the name of your font family.

Copy and paste the string of code from fonts.com into the "Font Stylesheet URL" field back in the Made Daily admin.

Go back to the Publish Options window on fonts.com, now we'll copy and paste the font name from fonts.com into the "Font Stylesheet URL" field back in the Made Daily admin, just as we did before.

Back in the admin, you will also give your font a label, most of the time this should be the same as the font name, but give it a label that makes the most sense to you.

Then set a fallback font, fallback fonts are used if your font choice(s) aren't usable. Some display systems may encounter a character that is not part of its collection, in cases like this a fallback font is used. Pair your fallback font accordingly with your font choice style, in this case, we chose 'Helvetica' which is a sans-serif font, so we would pair that with a sans-serif fallback font.

Click Create Web Font in the upper right-hand corner. Check that your font looks correct, if it doesn't match your font selection, double-check the URL embed in the previous Info step.

Finally, publish your web font by clicking Publish Wed Font in the upper right-hand corner.

Upload from Adobe Typekit

Click on Adobe Typekit, from the Custom Fonts page in the main menu, under Design.

Next, go to fonts.adobe.com/fonts and select the font you'd like to use on your site. Do this by clicking "View Family" on the font you'd like to use.

From here find the style or weight font you'd like to use (you can add multiple weights) and click the "</>" button in the bottom left-hand corner of the font.

A window will pop-up, instructing you to, "Add fonts to a Web Project." Click the arrow in the pulldown field and select an existing project (if you've already made one for your site), or create a new web project by clicking "+ Create a new project" and typing in your new project name, then click "Create" in the bottom right-hand corner.

Now click on "Edit Project," this will take you to the project detail.

Here you can customize your web projects, like adding multiple weights. Click the checkbox to the right of the weight you want to add, we recommend limiting to three weights, this will help keep load times to a minimum.

Once you have finished customizing your project, click "Save Changes" in the bottom right-hand corner.

Next copy and paste the Project ID and the Font CSS name from Adobe Typekit back in the Made Daily admin.

Back in the admin, you will also give your font a label, most of the time this should be the same as the font name, but give it a label that makes the most sense to you.

Then set a fallback font, fallback fonts are used if your font choice(s) aren't usable. Some display systems may encounter a character that is not part of its collection, in cases like this a fallback font is used. Pair your fallback font accordingly with your font choice style, in this case, we chose 'Sweet Sans Pro' which is a sans-serif font, so we would pair that with a sans-serif fallback font.

Click "Create Typekit Font" in the upper right-hand corner. Check that your font looks correct, if it doesn't match your font selection, double-check the URL embed in the previous Info step.

Finally, publish your web font by clicking Publish Wed Font in the upper right-hand corner.