All posts in “fonts”

Aliasing example

Weebly Tips & Tricks: Importing Fonts | Part 3: Aliasing Remedy

Welcome back for the third part of our Weebly Tips & Tricks: Importing Fonts series. Today we are going to be addressing the issue of anti-aliasing for web fonts.

Have you seen text that turns out like that of the text on the left side of the image above? When the edges of letterforms become pixelated or are no longer smooth like in the example above, this is known as aliasing. As you can see, aliased text does not produce a desirable result for any modern website design.


There are a few different methods of dealing with aliasing text ranging from simple code manipulation, which demonstrate fairly consistent, results to script-based solutions that come from online font services. Since here we have been dealing specifically with importing fonts into Weebly’s interface, I am going to cover the best way that I’ve found to produce the most consistent outcome across all web platforms.


As we looked at importing fonts using CSS3’s @font-face rule, you may have noticed that all of our fonts called by the default “stylesheet.css” file provided by Font Squirrel are in a specific order. This order works well with some, if not most fonts available through their Webfont Kit service. But for some font families aliasing is still an issue. Here is a quick trick to potentially solve those issues.

If you haven’t already completed Part 2 of the Importing Fonts tutorial series, please take a couple of minutes to go ahead and import your font into your Weebly site. Once you have your font loaded, take a look at your current @font-face rule in your main stylesheet. It should look something like this:

Our simple fix is to re-order one of the font files. We will start by selecting the line of code for the SVG version of the font. We will exclude the ending semi-colon as that closes that portion of the CSS.

Next we will cut (Cmd+x – Mac or Ctrl+x – PC) that line and paste it in just below the “iefix” code. Add a comma (,) to the end of the newly pasted ‘SVG’ line and replace the comma (,) at the end of the ‘truetype’ line with a semi-colon (;).

Now save and publish to see your anti-aliased text.

Please note that this may not be the solution to your aliasing issue. Not all web browsers handle anti-aliasing the same way. If you want to ensure that your site has the greatest amount of compatibility across the maximum number of browsers, I suggest using fonts designed specifically for on-screen viewing.

Click here to get more Weebly Tips & Tricks.

Aliasing : Select SVG webfont

Weebly Tips & Tricks: Importing Fonts | Part 2: Using the CSS3 Font-Face Rule

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

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
  • 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!


WHAT: Importing fonts to your website by uploading actual font files and using CSS3’s font-face rule.



So let’s start by opening

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.



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.


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.


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.