Help get this topic noticed by sharing it on Twitter, Facebook, or email.

Using Custom Fonts on Your Yola Website -- A Yola Silver Tutorial

Would you like to use a different font than the usual web-safe fonts like Arial, Verdana or Times Roman? You can, by embedding a custom font in your website. Please see a sample of custom fonts here: Font Samples

What you will need to begin this tutorial:

Yola Silver
A Custom Font: Please check the license with the font that you have the right to use it and embed it in a website.

Preparing the Font for Embedding

1) Navigate to FontSquirrel.com
2) Click "@Font-Face Generator" on the main menu
3) Click the button marked +AddFonts
4) Select your custom font on your computer. It will be uploaded to Font Squirrel
5) Check the box "Yes, the fonts I'm uploading are legally eligible for web embedding (check the license included with your font)
6) Click "Download Your Kit"
7) Find the downloaded kit (i.e. webfontkit-20110612-013554.zip) on your computer and unzip it
8) Open the webfontkit folder
9) Upload the four font files to your Yola File Manager. These are the files with the following extensions: .eot, .svg, .ttf, .woff

Adding the Code for Your Custom Font

1) From the webfontkit folder, open the file called "stylesheet.css" in Notepad (Text Edit for Mac)
2) Add the word "resources" to all of the urls. For example: src: url ('franchise-bold-webfont.eot'); should look like this: src: url ('resources /franchise-bold-webfont.eot');
3) Copy the changed code.
4) In the Yola Sitebuilder, go to Site >> Site Properties >> Site CSS Edit
5) Paste the code into the left side of the editing box called "Site CSS Overrides"
6) Click on the tab called Site CSS on the right side of the editing box
7) Find and copy the code for the type of text you want to use with your custom font. For example, using Heading 2 for the custom font, you would find the code labeled "h2" like this example: h2 { font-size:180%;} (This code will vary depending on the style you have chosen for your site.
8) Paste this code on the left side of the editing box (Site CSS Overrides)
9) Change this code so it looks like this example: h2 { font-family: 'WebFont', Arial, sans-serif; font-size: 180%;} Replace WebFont with the name of your custom font. Please note: the name is case-sensitive
10) Uncheck the box at the bottom "Disable Site CSS Overrides"
11) Click OK

Using the Custom Font on Your Website

1) Drag and drop a Text Widget on your page where you want the custom font
2) Type your text
3) Highlight your text
4) Click on the 6th icon on the text-editing toolbar that looks like a T on top of an A (called Font Format). Choose Heading 2 (or whatever heading you chose for the custom font)
5) Save and Publish

Notes:
Most custom fonts should be used for display text rather than large blocks of text.

You can add as many fonts as you like using this method.

The choices under the Font Format icon on the text editing toolbar include paragraph and Heading 2 through 6. You can use others but you will need to use HTML code rather than just highlighting and changing the text.

Please consider a donation to Font Squirrel--they provide a great free service but they have expenses too.

We'd love to see what you do with this on your sites!
Reply