Welcome back for the second part of our Weebly Tips & Tricks: Importing Fonts series. Today we are going to be taking a look at using the CSS3 font-face rule to import custom typefaces into Weebly for use with your Weebly site.
WHY: Need for specific font, not already available in Weebly.
DIFFICULTY: Moderate (Some coding required)
PRE-REQUISITES: Basic knowledge of HTML/CSS
ESTIMATED TIME REQUIRED: 5-10 Minutes
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 the Google Font library 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 Fontsquirrel.com
- Using Font Squirrel’s webkit option
- Uploading font files into Weebly
- Calling fonts in CSS to display on your site
So let’s get to work!
IMPORTING A FONT USING FONT-FACE
WHAT: Importing fonts to your website by uploading actual font files and using CSS3’s font-face rule.
1. OPEN FONT SQUIRREL AND FIND A FONT
So let’s start by opening Fontsquirrel.com.
Once you have that open let’s go straight to the search and type in “armwrestler”.
Now an interesting thing happens here. As you start typing in the name of a font-family, the search field will begin to use what you’ve already typed in to show you if that font is available in their library with a drop-down menu displaying all available fonts. As I have typed in “Arm” you will notice that the top guess from the search field is the font we are looking for, ArmWrestler.
2. GET THE WEBFONT-KIT
Now that we have found our font through the search field, we need to get to the webfont-kit for the font-family. Select “ArmWrestler” from the drop-down menu generated by our search. This will take us directly to the font’s page.
The page can all be a bit overwhelming at first glance, but take a deep breath and we’ll make it through. Just below the name of the font you will see a series of icons (Click here to learn more about the icons) as well as the author’s name, category tag and the number of styles for the font.
Next is the navigation for the font itself. Font Squirrel has done a great job of giving you several tools to help you decide if a font is the right fit for your situation, including the ability to “Test-drive” the font and make sure that all of the “Glyphs” you need are available. Another necessary inclusion to the navigation is the “License” page. It is extremely important to know what your rights are when using a font. Whether your plans are limited to embedding it on your site or if you are, like myself, a professional graphic artist and plan to use it for other purposes, KNOW THE LICENSE.
Finally we have made it to “Webfont-Kit” page. This is where all of the goods are. You are given options to choose a language subset, as well as which font file formats you would like included in your kit, both are explained to the right. In my experience, it is rare to not need all of the font files. So with all four font files’ boxes checked, we can click on the blue “Download @font-face Kit” button below. A dialogue will open asking where you would like to save your file.
3. UPLOAD FONT FILES TO WEEBLY
Once your file has downloaded, go ahead and unzip the file to reveal the contents of the folder. We want the webfonts folder which contains all of the font files, the font license, a .css file (which can be opened with any plain text editor) and a demo .html file.
Now that we have all of the files located, you can log into your Weebly account. Go to the “Design” tab at the top, then click on the “Edit HTML/CSS” button on the bottom left of the page. Now that we are in Weebly’s HTML/CSS editor, we need to upload our font files.
In the left sidebar, click the “Add new files” link below the “Files” title. This will, again, bring up a dialogue where you can locate your font files. Once you have the font files located, select them all (you can select multiple files by holding “Cmd” on a Mac or “Ctrl” on PC and clicking on each font file. Now click the “Open” button on the dialogue to upload all of the files.
4. ADD @FONT-FACE RULE
Now we need to add in the @font-face rule to allow the font to be imported into our site. If you return to your folder with all of the font files, you will find the “stylesheet.css” file. Open the “stylesheet.css” file (if your computer is unsure what program to use, try TextEdit on Mac or Notepad on PC). The file will contain your @font-face rule to import your font. Copy these lines of code:
Now that we have our @font-face rule copied, return to your Weebly site and select the “main-style.css” file at the top to bring up your site’s stylesheet in the editor. Near or at the very top of your stylesheet, paste in the @font-face code. You may, depending on the organization of the @font-face stylesheet, choose to add in a commented line above it denoting the importation of your fonts, like this:
5. Paste Your Font-Family Into Your CSS Rules
Now that we have our font files uploaded into our site’s files, 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.
When using @font-face, we can designate a font’s “family name” so to speak. In this case the “font-family” for my font is “armwrestlerbold”. This can be changed, but one should use caution and attempt to remember the font-family as it is used to call your font inside of your site’s stylesheet.
For me I would just like my “ArmWrestler” 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: While this method is a bit tedious and somewhat labor-intensive depending on your chosen font, it also allows for more control over items like character sets and necessary file fonts. Another advantage to this method is the ability to manipulate the order in which the font files are loaded for viewing. If you are experiencing some aliasing with your imported font’s text output, try this.
Click here to find more great Weebly tips & tricks.