can i split the font in the title?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
hi, i want to write a bird name in my title and then its latin name in italics, can't seem to split the font tho, is this possible in an upgrade from the free wepage? thanks
Photo of mick cain

mick cain

  • 5 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello mick,

This would be the same free or paid. You can do this with page header titles.

I'm not sure where you are referring to so if you could let me know I can have a look with you. A screen shot is a great tool to communicate this.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
You can use several different fonts in your title, but you need to use HTML to do it. Select the section of the header text you want in a different font , and in front of it write the line below <!--
<div style="font-family:
-->
and the name of a font from those listed below it, then
;"> (semi-colon, quotes, greater-than sign).
Now after the text add <!--
</div>
-->
The selected text will be in the new font.

(It will only apply to that page unless you click Apply to All Pages, below it).
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I would be very careful with the above fix. This is an unmatched tag < /div > and without a closing < / style > tag. This could have an effect of either breaking your page (personal experience) or giving you an endless style where you don't want it applied.

I'm still not sure of what you mean by title as there have been many interpretations of this not necessarily the definition by the Yola sitebuilder.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
Sorry, I deleted the opening div when I wrote it. I have edited the entry to correct this. This provides the matching div, and makes the closing /style tag unnecessary.

<!--
<div style="font-family:
-->
and the name of a font from those listed below it, then
;"> (semi-colon, quotes, greater-than sign).
Now after the text add <!--
</div>
-->
It is safe, and it works, as I have used this on my own (free) website.

Phil Taylor
Website: http://thegoodolddays.yolasite.com E-mail: sandphil@optusnet.com.au
Of all the places on this planet, and all the planets in the universe, I'd rather live here -
God's favourite holiday resort: Perth, Western Australia.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Philip

Can I give you a hint? If you want to provide HTML code, include your code between code tags. If I type it here, it will be displayed, so I need to describe it to you: So you type an opening bracket, then the word code, then the closing bracket. Afterwards you add your code. When you're done, type an opening bracket, the / key, the word code, and a closing bracket. If your code has multiple lines, you can add the pre tag in the same way around the code tags.

You will find more information on this by Get Satisfaction if you click on "Some HTML allowed" next to the heading "Reply to this topic". ;-)
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes

<div style="font-family:Helvetia">the text here</div>


Ah yes, that's tidier - and obviously the correct way. Thanks again Stefan.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The code for the Page Heading:

<font style="color: #xxxxxx);">Downy Woodpecker<br><sup><sup><i>Picoides pubescens </i></sup></sup></font>

#xxxxxx is a selectable hex code for your font colour.
The <br> moves the following text onto a new line. If you wish to keep your text on the one line then don't include the <br>. Similarly if you don't want your italicised text to be smaller omit the <sup> tags
The double <sup> makes the following text smaller but by a pre-dictated amount (it's a shortcut and a trick to easily create a smaller font on the one line only).
The <i> is the tag for italics font and the </i> is the closing italics tag
The </sup> is a closing tag which returns the font to normal size

Photo of mick cain

mick cain

  • 5 Posts
  • 0 Reply Likes
ok Gop, that worked great, but the italics words are sitting higher than the others, i've tried everything to get it straight. when i type it normally it all goes straight again, any ideas?

thanks very much
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
As mentioned the < sup > tag only works seamlessly on text on a line by itself. It's a shortcut to superscript and superscript is a smaller font size than regular font. It's simply a shortcut for a single line of text where you may wish to have the text in a smaller size and reduce the apparent line spacing. These can be removed for same line text.

It's most appropriate for Page heading or Navigation menus where there is often a limit to the amount of space allowed for formatting code and no additional lines of space for extra words..
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Mick

You will need to remove the <sup> and </sup> tags from the code Gop has given you.

If you want the first bird name and the Latin bird name in one line, please use this code:
<font style="color: #000000;">First name <i>Latin name</i></font>
Adjust the color code if you wish, it is set to black in this and the following code snippets.

If you want the Latin name to be shown smaller, use this code:
<font style="color: #000000;">First name <font size="5"><i>Latin name</i></font>
Adjust the number behind font size to your liking.

If you want the Latin name to be shown below the first name, use this code:
<font style="color: #000000;">First name</font><br><font size="5"><i>Latin name</i></font>
I have created a test page in your account and successfully tested all the three above options. Don't worry, the test page is not in your navigation and not published, and you can delete it yourself at any time.

Hope this helps!