How can I import fonts to use my site?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I have custom fonts that I would like to use on my yola site - how can I import them?
Photo of Ribz & Chips

Ribz & Chips

  • 8 Posts
  • 0 Reply Likes
  • unsure

Posted 8 years ago

  • 1
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Ribz & Chips

It is not possible to upload custom fonts to your Yola Sitebuilder. The fonts that are used on Yola are standard web-safe fonts. Not all fonts are safe for use on the web. Please take a look at this online article which show the font families that are safe to use on the web: List of Web Safe Fonts. You can also take a look at our article about using Custom Fonts on your site.

Hope this helps!

Thank you
Nazlie
Photo of Ribz & Chips

Ribz & Chips

  • 8 Posts
  • 0 Reply Likes
Thank you.... that makes perfect sense.
Photo of Daniel Harris

Daniel Harris

  • 6 Posts
  • 0 Reply Likes
Has this answer changed since the last comment ?can you now import TTF files?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You can use custom fonts well in Yola sites. see this Tutorial These could be TTF or any other font type.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Official Response
Hi Daniel, Ribz & Chips, and Gop

Thank you for your reply, Gop.

Daniel, yes, this has changed. All users (including Free users) are now able to upload custom fonts as .ttf files.


  • You can either upload your custom font for your page heading which is the easiest way to use it. But this only applies to the font of your page heading.

  • If you want to add your custom font to text on your website, you can just add the font name to your HTML code in the Text widget. The following example uses the font Gentium:
    <p><font style="font-family: Gentium Basic;">This is an example.</font></p> If you have Yola Silver, you can preset the font for any text on your website using the Site CSS feature.



Please note: Even if you upload your custom font to your website – if a user's browser does not support the particular font, it will not be displayed, and the user might see disrupted text. To avoid this you can use your Site CSS to add an alternative, usual font which will be displayed to the user in case their browser (version) does not support your custom font.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
This system works in IE 6 to 9. FF 3 upwards, Chrome and Safari XX?. If you are having problems with IE 6 to 8 then include the statement to your CSS:

@font-face {
font-family: "Font_Name";
src: url(resources/{optional-folder}/Font_Name.ttf);
}

You may also use .svg and .otf font files, these have been reported to successfully work using the method.