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

  • Announcement
  • Updated 2 months ago
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Outdated tutorial, no longer supported.

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 Reply Likes

Posted 4 years ago

  • 3
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 13 Reply 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 Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply 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

  • 2045 Posts
  • 91 Reply Likes
Thanks for your input, Andi!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply 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 Anthony Eller

Anthony Eller

  • 12 Posts
  • 0 Reply Likes
Andi the link is not working? thanks,
Tony
Photo of Gop

Gop

  • 7364 Posts
  • 2074 Reply Likes
Hello Anthony,

That link is 4 years old and has probably been taken down by now.

Suggest that you look at the authoritative instruction: Google Fonts: Getting Started
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 305 Reply 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 Reply 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
  • 305 Reply 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 Reply 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 Reply Likes
I would suggest doing a search for "text shadow and IE" and see what comes up.
Photo of Jornes 佐诺斯

Jornes 佐诺斯

  • 71 Posts
  • 3 Reply 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
  • 305 Reply 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 Reply 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 Reply Likes
Can you make avideo please of how to do it... thanks!!!!!!!!!!!!!!!!!!!!!!!!!
Photo of reyansh8

reyansh8

  • 2 Posts
  • 0 Reply 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

  • 4378 Posts
  • 190 Reply Likes
Further to Gop's reply, hacking is prohibited by our terms of service. Please review those terms before proceeding further.
Photo of reyansh8

reyansh8

  • 2 Posts
  • 0 Reply 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

  • 7364 Posts
  • 2074 Reply 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.
Photo of Ciprianojr Demecillo Capote

Ciprianojr Demecillo Capote

  • 1 Post
  • 0 Reply Likes
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 Reply Likes
How can a "Yola Free" user use Custom Fonts on his/her website...? :)
Photo of Stefan

Stefan, Official Rep

  • 4399 Posts
  • 176 Reply Likes
Hello Sami_960

See my reply on your other thread, thanks.
Photo of Gop

Gop

  • 7364 Posts
  • 2074 Reply Likes
Have uploaded a generated web-font through Squirrel Fonts and inserted the modified CSS in the over-rides.

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 14, 2015 */

@font-face {
    font-family: 'webfontregular';
    src: url('resources/evanescent-webfont.eot');
    src: url('resources/evanescent-webfont.eot?#iefix') format('embedded-opentype'),
         url('resources/evanescent-webfont.woff2') format('woff2'),
         url('resources/evanescent-webfont.woff') format('woff'),
         url('resources/evanescent-webfont.ttf') format('truetype'),
         url('resources/evanescent-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'webfontregular';
    src: url('resources/evanescent_p-webfont.eot');
    src: url('resources/evanescent_p-webfont.eot?#iefix') format('embedded-opentype'),
         url('resources/evanescent_p-webfont.woff2') format('woff2'),
         url('resources/evanescent_p-webfont.woff') format('woff'),
         url('resources/evanescent_p-webfont.ttf') format('truetype'),
         url('resources/evanescent_p-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
It doesn't appear in the Font options within the Style Designer. Any thoughts on this?
Photo of Gop

Gop

  • 7364 Posts
  • 2074 Reply Likes
Curators???
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4378 Posts
  • 190 Reply Likes
Hi Gop,

This tutorial is outdated. We no longer support custom fonts as we provide over 500 fonts with Google Fonts. We suggest using a guide like this one or Font Comparer, to help locate comparable fonts we offer within the Sitebuilder. I hope this helps!

This conversation is no longer open for comments or replies.