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

  • Announcement
  • Updated 2 years ago
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!
Photo of diane

diane

  • 1238 Posts
  • 121 Likes

Posted 4 years ago

  • 3
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 13 Likes
You can also use Google Web Fonts! You can find this service here.

All you would do is add html like this to every page that you would want it on.


<link href='http://fonts.googleapis.com/css?family=Ubuntu&v1' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Ubuntu', arial, sans-serif !important;
}
</style>


See the results on my website!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 303 Likes
Hi Michael Cooke,

Yes, I use Google Web fonts also and it's great! There are so much fonts to choose from. But Font Squirrel is awesome too, they're both great.

Here is a test page I made, as you can see I used a Custom Font in the header an footer: http://tester3.yolasite.com/resources... (It's just a quick page that I made in Notepad)
Photo of diane

diane

  • 1238 Posts
  • 121 Likes
Hi, Michael,

The Google Web fonts is easy to use. Thanks for adding it. The nice thing about the Font Squirrel method is that it allows for a wider variety of fonts. I have also heard that Google sometimes has problems in Internet Explorer (but then again who doesn't!).
Photo of Andi North, Mangopear MediaAN

Andi North, Mangopear Media

  • 789 Posts
  • 110 Likes
Hi Diane,

The only problem with IE and Google Web Fonts is that in IE9 you have one of the many selection boxes appear at the bottom of the screen, asking you whether you would like the Web Fonts (in not so obvious terms).

When you click Yes it works. Or click Compatibility View and be done with it! I have tested in IE6, IE7 and IE8 and it works perfectly! You can visit http://sitebuilder.mangopearmedia.com in any browser and Web Fonts will work! (The font used is Ubuntu).

Kind Regards,

Andi
Photo of Brianna

Brianna, Community Support Team Lead

  • 2041 Posts
  • 87 Likes
Thanks for your input, Andi!
Photo of Andi North, Mangopear MediaAN

Andi North, Mangopear Media

  • 789 Posts
  • 110 Likes
I have created a tutorial on my blog for adding Google Web Fonts to any Yola website - http://sitebuilder.mangopearmedia.com...

Take a look if you're interested!

Andi
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Likes
Thanks for posting this Diane! I'll put it on one of my sites and then post a URL to it.

Nathan
Photo of diane

diane

  • 1238 Posts
  • 121 Likes
Hi, Nathan,

Is the above url your example or are you planning something different? I like that glowy font.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Likes
Hi Diane,

Thanks, I like the glowy font too. The font is called Indie Flower. I actually added the glow effect to it myself using CSS3. I just used the CSS3 "text-shadow" property:


text-shadow: 0 0 10px white;
-webkit-text-shadow: 0 0 10px white;
-moz-text-shadow: 0 0 10px white;


Also, that URL is just a test page, but that's my example too - I used Google Web Fonts for that though. I'm going to put another font from Font Squirrel on another test page on my Yola site and post the URL here.

Kind regards,
Nathan
Photo of Jornes 佐诺斯

Jornes 佐诺斯

  • 71 Posts
  • 3 Likes
The text shadows effect not supported by stupid IE browser. Is there any solution for this?

Regards,
Jornes
I'm also using text shadow effect on my website.

Web Design

Photo of diane

diane

  • 1238 Posts
  • 121 Likes
I would suggest doing a search for "text shadow and IE" and see what comes up.
Photo of Jornes 佐诺斯

Jornes 佐诺斯

  • 71 Posts
  • 3 Likes
Ya...must find out the solution for this issue as all my h1 to h6 heading also using text-shadow-effect.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 304 Likes
Jornes, I also agree with you - IE is a bad browser, yet the users of it don't understand what it does to us website owners. But, it is possible to get CSS3 to work in IE8 and below. (CSS3 is supported in IE9) There is something called CSS3Pie and it makes the awesome CSS3 features work in IE. You can either use the JavaScript way or upload a .htc file to your file manager and add it in your CSS rules. (instructions on the CSS3Pie website, the .htc way is better as you don't need JavaScript enabled for it, but I don't know if .htc files will upload to Yola)

You could also just use PhotoShop or GIMP to make your headings and add shadows/glows there, and then use them as a background-image on your page, or just a regular <img> tag. (but background-images are better for that kind of stuff)

Hope this helps.

Nathan
Photo of Jornes 佐诺斯

Jornes 佐诺斯

  • 71 Posts
  • 3 Likes
Ya...i would rather give css pie a try. I don't want to use image for it to make the effect. As images would make the website load slower. Because my website is heavy enough now. =)
Photo of ThePunisher

ThePunisher

  • 80 Posts
  • 10 Likes
Can you make avideo please of how to do it... thanks!!!!!!!!!!!!!!!!!!!!!!!!!
Photo of reyansh8R

reyansh8

  • 2 Posts
  • 0 Likes
hey is here any way to add a sign up and sign in form in yola bcoz i am going to make a website on hacking and i think to the users come in my site they have personal accounts
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4169 Posts
  • 163 Likes
Further to Gop's reply, hacking is prohibited by our terms of service. Please review those terms before proceeding further.
Photo of reyansh8R

reyansh8

  • 2 Posts
  • 0 Likes
i wnat to knew that if i have add form to my site how i knew that who is sign up in my site and their passwords and other information
Photo of Gop

Gop

  • 7154 Posts
  • 2012 Likes
Hello reyansh8,

Yola do not have a sign up membership facility for people to sign up for your site as members. There is a third party application at http://authpro.com which does allow for this.

Authpro has a free application that can be added to your yola built site. It is free for 10 members and after that it is a paid for subscription. It allows you to have login ID's and Passwords for your members and for you to have administrator control.

Please read the Terms of Service for Yola subscriptions as some hacking activity is not allowed by subscribers to Yola.
I will posting many website and post memorable events I hope in this time the set up of mine is more beautiful than I expected.
Photo of Sami_960

Sami_960

  • 17 Posts
  • 2 Likes
How can a "Yola Free" user use Custom Fonts on his/her website...? :)
Photo of Stefan

Stefan, Official Rep

  • 4326 Posts
  • 167 Likes
Hello Sami_960

See my reply on your other thread, thanks.