Font-Swap-Final-Result

Welcome to the first part of the Weebly Tips: Importing Fonts series. Today we are going to take a look at using Google fonts to create a more customized user experience and design a truly custom feeling website using Weebly’s WYSIWYG interface.

WHY: Need for specific font, not already available in Weebly.
DIFFICULTY: Easy to moderate (Some coding required)
PRE-REQUISITES: Basic knowledge of HTML/CSS

Weebly has come a great ways from where they started in all facets of development. One of the best improvements has been the utilization of Google Fonts of open source fonts. Although, for very practical reasons, Weebly does not load all of the fonts available through the Google database, they have done a good job compiling some of the better fonts for use in website design. But there are times when in the process of developing a website to fit a particular aesthetic that the basic selection of fonts are not enough. This is when importing fonts becomes necessary.

For this part of the tutorial here’s a glimpse at what we are going to be looking at:

  • Finding fonts using Google Fonts
  • Using the “Quick-use” option to generate the link code necessary for importing our font
  • Implementing our font’s “Quick-use” code to display our linked font on our Weebly site

To begin, let’s look at how to get the font files into Weebly for use.

LINKING TO A FONT IN GOOGLE FONTS

WHAT: This method is essentially the same as linking a stylesheet into an HTML document. For those familiar with creating an HTML-based website, this will be a breeze. For those with little to no HTML/CSS experience, this will probably be the easiest method for you.

HOW:

1. OPEN GOOGLE FONTS

Open Google Fonts and locate the font you would like to import. – For this example I will use the font, “Audiowide” since it is not in Weebly’s already available selection of fonts.

2. FIND YOUR FONT

There are various ways to find the font you want to use. For instance, since I am looking for a unique titling font for my logo, I can select the categories drop down from the menu on the left and uncheck all but the “Display” style of font and browse only “display” fonts. Since I already know the font that I want, I will use the search field. After finding your font, you will notice a couple of buttons in the lower, right-hand corner of each font. The one that we want is the button with the arrow pointing right in it (pictured below), linking to the “Quick-use” options.

3. COPY THE CODE

After loading the “Quick-use” options for your font you will notice a few interesting things. On the right side of the page you will see a gauge with color ranges denoting various load times for your fonts. In this case, my font only has one style and weight, therefore it will load more quickly than the complete font family for a more robust font like Open Sans. If your font has multiple weights and styles, you are given the option of selecting which variations you would like to include in your linked library. Keep in mind the more fonts loaded, the longer it will take for your site’s pages to load.

If we scroll down a bit more, we will begin to see the pieces necessary to get our new fonts loaded into our Weebly site. In Box 2 (pictured below) you will see that you can select the character sets you would like to use. Box 3 holds the key to importing our fonts. Make sure that the “Standard” tab is selected, as pictured below. Now you can select the link in the following field and copy it. I suggest opening an new text document, it doesn’t have to be fancy, and pasting this link code in that blank document for easy reference.

Finally scroll all the way to the bottom of the “Quick-use” page and copy the last link in the field in Box 4. You can now paste that code in the same document to keep everything together and easy to find. This also eliminates the frustration of flipping between 2 web pages.

4. PASTE YOUR LINK CODE INTO WEEBLY

We are now done with Google fonts and can head over to our Weebly site. Log in and click on the “Design” tab at the top, then the “Edit HTML/CSS” button on the bottom of the left sidebar to take us into the Weebly HTML/CSS editor. Select one of your page templates and find the <head>…</head> tags (they should be near the top). It should look something like this when you’re done –

One of the final and most tedious portions of this process is that now you will need to repeat this process for all page templates that you plan on using. So in my case, if I plan on using the font on the Tall-Header, Short-Header and No-Header pages, you only need to paste your link code in those page templates’ <head> tags. But if you prefer to be more thorough, you can paste your font link in all of your page templates.

5. Paste Your Font-Family Into Your CSS Rules

Now that we have our font files linked from Google, all that is left is to call our fonts in the CSS. If you are wanting to make a site-wide font change, this will be fairly simple. Just locate all “font” or “font-family” rules and paste in your new font-family that we copied earlier into our text document. If you are like me and have a specific “display” type font that will only be used for titles and the logo, then it will require a bit more work and knowledge of using web developer tools of some sort (I prefer to use Chrome’s built-in developer tools). You will need to locate which div class or id contains your text to change. For me I would just like my “Audiowide” font as the logo text. So I found the div tag that contained the text I wanted to change and then found the corresponding notation within the stylesheet for my theme. Here’s how I swapped out my font-family:

Now save and publish your site to see your new font at work.

VERDICT:

This is by far the easiest way to get external fonts working, but its simplicity can come with an occasional trade off in quality. For many fonts (not all), what is known as “aliasing”, or pixelation on the outer edges of the text, may occur upon display of the font. This has to do with the way that Google loads their font types. Without going into too much detail, a change in the order of font file types can remedy this inconvenience. Which we will cover in part 2 of this Weebly Tips: Importing Fonts tutorial – Using CSS’s @font-face rule.

– It is important to note that with the method mentioned in this article you will not be able to select your font(s) via Weebly’s “Change Fonts” menu. All editing of font-size, font-weight and line-height will need to be done within your theme’s stylesheet.

Thank  you for reading and I hope this is a help to you as you continue to keep FixingWeebly.

Click here to get more Weebly tips & tricks.

Leave a Reply