Import a Custom Font Into Your Hub

Want to use a custom font on your Hub? Here's how to import and use it in your content.

Before You Begin

• To follow the instructions in this article, you will need to use the Custom Code feature in Uberflip. To use this feature, and therefore to import a font, you need to be an Account Admin or Content Manager.
• You should also be generally familiar with the Custom Code feature, and comfortable with using it and working with custom code in your Hub.
• While not required, a basic understanding of HTML and CSS is helpful for following this guide.

About Importing Fonts

Uberflip comes with a variety of fonts for you to use in your Hub, so there's usually one for most tastes. But if there's a specific font you want to use that's not among the standard fonts, you can also import custom fonts into your Hub.

If you want to import a custom font, that font needs to be hosted online. This could either be as part of a font library like the excellent (and free) Google Fonts, or simply on your own server — as long as it's available on the web, you can import any font you like. You can even import multiple fonts, such as if you want to use different fonts for headers and body text.

Import a Custom Font

To import a custom font into your Hub, you will use Custom Code to download the font and specify where it should be used. To do that, you will need to first get the URL where the custom font can be downloaded. This can either be from a font library on the web (like Google Fonts), or from your own web server. Once you have the URL, you can create a Custom Code Block to import the font into your Hub using HTML/CSS.

The instructions below will look at importing a single font, but you can also import multiple fonts by simply repeating these steps.

Option 1: Import the Custom Font From a Font Library

For this example we'll use Google Fonts, but the basic principle is the same if you use any other font library.

1. Visit Google Fonts at https://fonts.google.com/.
2. Find the font you want to import, and click on the + button to add it to your selection.
   
   
3. You'll see your selection appear in a black bar at the bottom of the screen. Click on this bar to expand it.
   
   
   
   
4. In the menu that appears, scroll down to the Embed tab (it should already be selected) and look at the Embed Font section. Here, you'll find two tabs: Standard and @Import.
   
   
   
   
5. These refer to the two methods you can use to get the URL for the font and therefore import it into your Hub. Both methods will work; we recommend using Standard, as it's faster. For either method, copy the code snippets from the boxes underneath Embed Font and Specify in CSS, then paste them somewhere you can get them again later (or just leave the Google Fonts browser window open).
   
   
   
   
6. Now that you have the URL for the font, you can import it into your Hub with Custom Code. To begin, log in to your Uberflip account, click on Hubs (and select your Hub, if you have multiple), then click on Appearance > Custom Code in the sidebar menu on the left.
7. Click on the +Add Code button and give your new Custom Code block a name and description, then click the blue Add Code button to create the block.
   
   
8. On the next page, scroll down and click on the Code tab.
   
   
9. Using the Placement dropdown menu, select the option specified by the font vendor. For the Google Fonts Standard option, for example, you would choose Head.
10. Paste the embed code you copied earlier into the code field. For Google Fonts, for example, we need the code from the Embed Font field, like this:

    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 

11. Click on Save to save your Custom Code Block.
    
    
12. Lastly, don't forget to switch the toggle under Enable Custom Code to the on (green) position!
    
    

Option 2: Import the Custom Font From Your Web Server

The custom font you want to use might already be hosted on your web server, for example if it's also used on your website. If that's the case, you can simply import it from there using the CSS @font-face rule.

1. First, you'll need to get the URL to download the font. Your website admin should be able to provide it to you. The URL needs to point specifically at the font file, and will usually look something like this:

   http://www.mywebsite.com/assets/fonts/fontname.woff

2. Once you have the URL, you can import the font into your Hub with Custom Code. To begin, log in to your Uberflip account, click on Hubs (and select your Hub, if you have multiple), then click on Appearance > Custom Code in the sidebar menu on the left.
3. Click on the +Add Code button and give your new Custom Code block a name and description, then click the blue Add Code button to create the block.
   
   
   
   
4. On the next page, scroll down and click on the Code tab.
   
   
5. Using the Placement dropdown menu, select Head.
6. Paste this @font-face code template into the code field:
   

   <style>
   @font-face {
    font-family: Font-Name;
    src: url(http://www.mywebsite.com/assets/fonts/fontname.woff) format("extension");
   }
   </style>

7. Use the code field to edit the bolded parts shown in the snippet above as follows:
   • Font-Name: Replace with the name of the custom font you're importing.
   • http://www.mywebsite.com/...: Replace with the URL where the custom font is hosted on your web server (the URL you got earlier).
   • extension: Replace with the file type of the custom font, which should be visible in the URL. For example, for fontname.woff enter woff; for fontname.ttf enter ttf, etc.
8. You should end up with something that looks like this:
   
   
9. Click on Save to save your Custom Code Block.
10. Lastly, don't forget to switch the toggle under Enable Custom Code to the on (green) position!
    
    

Use a Custom Font in Your Hub

By following the steps up to this point, you have specified where your custom font can be downloaded. You can now use the font anywhere in your Hub by simply referencing it, and a visitor's browser will know where to download that font so that your content displays properly.

To use your custom font in your Hub, you need to create Custom Code that tells your Hub where it should override the default font with your custom font.

Start by creating a new Custom Code Block (Appearance > Custom Code > +Add Code button > Type in name/description > Add Code button). Open it up and switch to the Code tab, then set the Placement dropdown to Head.

Now, type CSS into the code field to specify where you want to use the font. You can be as general or specific as you like. The exact code you'll use will depend on what exactly you're trying to achieve, but in general:

• You will use the CSS font-family property to specify the font to be used
• The value you will use for font-family will be the font name specified in your import code. For example, Google Fonts provides a snippet you can use:
  
  
  
  
• You can specify exactly where the font should be used as follows:
  • Define particular HTML elements referencing HTML tags, like h1, p, etc.
  • Define particular parts of the Hub by referencing CSS classes, like .header-intro
  • Combine both tags and classes to narrow it down further
• Also, don't forget to include fallback fonts for compatibility! Declare two or three web-safe fallback fonts along with a generic family (e.g. serif, sans-serif, cursive, etc.), just in case a visitor's browser doesn't support your custom font.

Below, we've provided some code examples for general cases to get you started:

Example 1: Same Custom Font for Everything

If you just want to use the one custom font for all text in your Hub, you can use this snippet. Don't forget to replace the name of the custom font and the fallbacks with the appropriate values.

<style>
body {
      font-family: 'Raleway', Arial, sans-serif; 
}
</style>

Example 2: Different Custom Fonts for Headings and Paragraphs

If you want to use different custom fonts for headings and paragraphs, you can use this snippet. Remember that you must have also imported all custom fonts that you're referencing. Don't forget to replace the name of the custom font and the fallbacks with the appropriate values.

<style>
h1, h2, h3, h4, h5, h6 {
      font-family: 'Roboto Slab', Times New Roman, serif;
}
p, a, li, ul {
      font-family: 'Roboto', Arial, sans-serif;
</style>

<style>
body, .cta .cta-button {
 font-family: 'Raleway', Arial, sans-serif; 
}
</style>