Category: Weebly Tips & Tricks

Categories
Featured Web Fonts Weebly Tips & Tricks

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

Aliasing example

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.

WHAT CAN WE DO ABOUT IT?

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.

SOME SIMPLE CODE MANIPULATION

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:

[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Add-Font-Face1.jpg” image_popup_url=”” thumb_width=”” title=”@font-face Rule Pasted Into Stylesheet” gallery_name=”font-face-alias” class=”screenshot”]

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.

[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Select-SVG.png” image_popup_url=”” thumb_width=”” title=”Select & Cut ‘SVG’ Font Line” gallery_name=”font-face-alias” class=”screenshot”]

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 (;).

[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Paste-In-SVG.jpg” image_popup_url=”” thumb_width=”” title=”Paste In SVG Line Below “iefix” Line” gallery_name=”font-face-alias” class=”screenshot”]

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.

Categories
Featured Web Fonts Weebly Tips & Tricks

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

Aliasing : Select SVG webfont

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

[az_divider_sh div_type=”normal” margin_top_value=”10″ margin_bottom_value=”20″ class=””]

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!

[az_divider_sh div_type=”normal” margin_top_value=”10″ margin_bottom_value=”20″ class=””]

IMPORTING A FONT USING FONT-FACE

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

HOW:

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.
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Font-Squirrel-Search.jpg” image_popup_url=”” thumb_width=”” title=”Search For Your Font” gallery_name=”font-face” class=”screenshot”]

 

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.

[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Font-Squirrel-Font-Home.jpg” image_popup_url=”” thumb_width=”” title=”Check Usage License – Click Webfont Kit Link” gallery_name=”font-face” class=”screenshot”]

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.
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Font-Squirrel-Webfont-Kit.jpg” image_popup_url=”” thumb_width=”” title=”Select Subset, Files Types & Download Webfont Kit” gallery_name=”font-face” class=”screenshot”]

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.
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Unzipped-Font-Kit.png” image_popup_url=”” thumb_width=”500″ title=”Unzipped Webfont Kit – Select Webfont folder” gallery_name=”font-face” class=”screenshot”]

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.
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Weebly-Add-Files.jpg” image_popup_url=”” thumb_width=”400″ title=”Add Font Files To Your Weebly Site” gallery_name=”font-face” class=”screenshot”]

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:
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/TextEdit-Font-Face.png” image_popup_url=”” thumb_width=”600″ title=”Copy Your @font-face Rules” gallery_name=”font-face” class=”screenshot”]

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:
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Add-Font-Face.jpg” image_popup_url=”” thumb_width=”” title=”Add @font-face Rule – Use CSS Comment For Organization” gallery_name=”font-face” class=”screenshot”]

 

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.
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Font-Face-Family.jpg” image_popup_url=”” thumb_width=”” title=”@font-face Font-Family” gallery_name=”font-face” class=”screenshot”]

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:
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Font-Swap-Font-Face.jpg” image_popup_url=”” thumb_width=”” title=”Replace Your Old Font With Your New Font-Family” gallery_name=”font-face” class=”screenshot”]

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

[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Final-Screenshot.png” image_popup_url=”” thumb_width=”” title=”End Result – Swapped Out Logo Font” gallery_name=”font-face” class=”screenshot”]

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.

Categories
Featured Web Fonts Weebly Tips & Tricks

Weebly Tips & Tricks: Importing Fonts| Part 1: Using Google Fonts

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

[az_divider_sh div_type=”normal” margin_top_value=”10″ margin_bottom_value=”20″ class=””]

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.

[az_divider_sh div_type=”normal” margin_top_value=”30″ margin_bottom_value=”30″ class=””]

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.

[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Screen-Shot-ClickForQuick-Use.jpg” image_popup_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Screen-Shot-ClickForQuick-Use.jpg” thumb_width=”” title=”Screen Shot – Accessing “Quick-use” Page” gallery_name=”link-import” class=”screenshot”]

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.
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/ScreenShot-QuickUse1.png” image_popup_url=”” thumb_width=”” title=”Quick Use Page – Load Time” gallery_name=”link-import” class=”screenshot”]

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.
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/ScreenShot-QuickUse2.jpg” image_popup_url=”” thumb_width=”” title=”Copy Link Code” gallery_name=”link-import” class=”screenshot”]

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.
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/ScreenShot-QuickUse3.jpg” image_popup_url=”” thumb_width=”” title=”Copy The Font-Family Code” gallery_name=”link-import” class=”screenshot”]

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 –
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Paste-Link.jpg” image_popup_url=”” thumb_width=”” title=”Paste Font Link” gallery_name=”link-import” class=”screenshot”]

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:
[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Font-Family-swap.jpg” image_popup_url=”” thumb_width=”” title=”Paste In Your New Font-Family Into Your CSS” gallery_name=”link-import” class=”screenshot”]

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

[az_lightbox_image_sh image_url=”http://fixingweebly.devinwoolery.com/wp-content/uploads/2014/03/Font-Swap-Final-Result.png” image_popup_url=”” thumb_width=”” title=”The Published Site” gallery_name=”link-import” class=”screenshot”]

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.

[az_divider_sh div_type=”normal” margin_top_value=”30″ margin_bottom_value=”30″ class=””]

– 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.