How To Import a Font Into Your Hub

April 13, 2015 Uberflip Customer Success

Being able to customize fonts is one more way you can make your Hub more consistent with your brand. In this article, we'll go over how to import a font into your Hub.

So you've got a font on your website that you'd like to use in your Hub, or you've found some fonts online that would look perfect on your Hub's Home Page, but you're wondering how to use them in your Hub? Here's how!

 

From an Online Host

The more popular directories of free fonts make it easy to use a font on your Hub. Since Google Fonts is one of the best and easiest to use (in our opinion), we're going to use it as an example for some basic instructions. 

Step One: Choose your fonts.

From the service, choose the fonts you want to use for your Hub and any styles and variations of that font you want to use. 

Most services will have a button that says 'Use' or in the case of Google, 'Add to Collection'.

Step Two: Copy the code.

Google Fonts provides three different ways for you to have the code added to your site: standard, @import and Javascript. 

If you go with the 'Standard' method, copy and paste the code in the HTML area of the Custom Code section in your Hub.

If you go with the '@import' method, copy and paste the code into the CSS area of the Custom Code section in your Hub. This block of code should come first in the CSS section.

And you probably guess that if you go with the 'Javascript' method, you'll need to copy and paste the code into the Javascript area of the Custom Code section in your Hub.

 

Which one's the best?

In case you're wondering which method to go with, the 'Standard' method is the fastest (ie. using a <link> tag). If you use the @import or Javascript methods, the files will have to wait until the resource (either CSS or Javascript) is loaded before getting the font.

Keep in mind...

Other online font providers might not have as many options, or may look very different than this, but the basics are the same. You want to look for the fonts you want to use, and then follow whatever instructions are available for using those fonts.

Usually these services will give you code that you'll have to copy and paste into one of the sections of your Hub. Make sure that you're pasting the code in the right place.

Generally, anything that has script tags should be in the Javascript area (however if your code doesn't have anything inside of script tags, you might have to include it in the HTML area of your Hub). Feel free to send us the code you want to use and we'll help you figure out where it should go.

 

From your Server

By using @font-face CSS rules, you can take a font that you have on your website's server and use it in your Hub!

Step One: Get the link for your fonts.

You'll need one link for the font(s) you want to use. Usually each font will have a few different URLs pointing to each type of file. URLs could look something like: www.yoursitename.com/assets/fonts/fontname.woff.

Copy and paste all the links in a notepad file or somewhere handy - you'll need them for Step Three.

Step Two: Get the @font-face code.

Use the code below by pasting it into the CSS area of the Custom Code section of your Hub:

@font-face {
    font-family: Font-Name;
    src: url(http://www.thisiswherethelinkgoes.com/file/path/to/specific/font-name.extension) format("extension");
}

You'll need to copy and paste this code for each link you got in the previous step.

Step Three: Update the @font-face values.

The values you'll have to update are:

  • font-family - rewrite this for the font you're adding
  • src - change the link inside the parentheses after 'url' to the ones that are specific for your site; if you're using more than one font, you'll have to update the URL on each @font-face code for each file type
    • format - the format will usually be the same as the extension in the URL (for example, the format for a URL that ends in .woff will be "woff")

(If you have access to a server, you're basically free to use any fonts that are uploaded to it in your Hub, assuming you have the usage rights!)

 

How to Use Those Fancy Fonts

Now that you've imported your fonts into your Hub, it's easy to start putting them to use. For this, you'll work solely in the CSS area of your Hub and will need the font-name (value for 'font-family' if you're using fonts that you imported from your server).

Depending on what you want to use your font for, you'll have to add the font name to the CSS styles for the text in your Hub that you want to change.

Don't forget your Fallbacks! With importing fonts, you also want to declare three or four fallback options just in case the font you want to use doesn't work for any reason. Generally if you're using a serif font your fallbacks should also be serif. Same goes for sans-serif fonts. Here's a helpful list of web safe fonts.

For example, let's say I used Google Fonts to import "Lobster" into my Hub. I used the 'Standard' method of importing the font into my Hub. So the code I will include in my CSS could look something like this:

.header-intro h2 {
font-family: Lobster, Brush Script MT, Lucida Sans Typewriter;    
font-size: 6em;
line-height: 2em;
}

Then with a few more modifications, I could have a header that looks like:

Previous Article
The Basics of Hub Branding
The Basics of Hub Branding

Customize the look and feel of your hub with your company's branding!

Next Article
Custom Menu
Custom Menu

Customize your Hub to fit your brand and design tastes with a custom menu.

Ready to Upgrade and supercharge your Hub with Custom Code?

We Can Help