How to make non-standard fonts show...

User 3004957 Photo


Registered User
848 posts

I have searched the forums for this, but I can't seem to find a clear answer. Please forgive me if it is there and I missed it.

When I want to use non-standard fonts (fonts not on the short list of recommended web fonts), how do I make sure they will show up properly on the screens of people who don't have those fonts installed on their computers?

Does merely clicking the Allow Advanced Text button make the text an image, thus ensuring that the font will show correctly? Or do I also have to add effects in order to make it an image?

Or...(and this is my preferred method, if it works): If I create a button and put text using a non-standard font on the button, will that font show up correctly on everyone's computer because the button itself is an image?
User 187934 Photo


Senior Advisor
20,190 posts

In VSD paste the code below to the Header html of a HTML box.
<style type="text/css">
<!--
@font-face {font-family: FlowerSketches;
src: url('fonts/FlowerSketches.ttf');}
.customfont { font-family: FlowerSketches; font-size: 20px;}
-->
</style>

Then paste the code below to the Body HTML of the same box.
<div class="customfont">This is my font.</div>

Adjust the FlowerSketches to the actual name of your font and add it to your site with the add files tool to a folder called fonts

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 3004957 Photo


Registered User
848 posts

Thanks for the instructions, Rolly. By doing this, does it mean I can use my non-standard fonts as regular text, and they will actually show up as the correct fonts on others' computers?
User 3004957 Photo


Registered User
848 posts

Oh, and one more question - does this HTML code have to be entered on every page where I use that font?
User 187934 Photo


Senior Advisor
20,190 posts

You can add the Header html code to the head of your page instead then only add an html box with the <div class="customfont">This is my font.</div> in the body html.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 3004957 Photo


Registered User
848 posts

I added the header and body code, then did a preview. The proper font isn't showing up. I even went into the Windows fonts folder to be sure I had the exact file name.

So... back to my original question: Would non-standard fonts keep their look if I put them as button text?
User 187934 Photo


Senior Advisor
20,190 posts

The code will only apply to the text in the HTML box that is inside the <div class="customfont">This is my font.</div>:)
Any text added to the page with the text tool will be what you set it with under the object properties box.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 271657 Photo


Ambassador
3,816 posts

Button fonts will display just fine. Same with Buttonizer. For Advanced Text, add an effect (if you don't want the effect to show, take the slider down to 0).

For blocks of paragraph text, I'd go with Eric's suggestion. You''ll have an HTML placeholder box on your page, but you'll see your text in preview or on the published site. Back in VSD you'll probably have to nudge the box around to get it positioned just right.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 187934 Photo


Senior Advisor
20,190 posts

Here's a break down of the procedure.
Custom fonts without advanced text
And for those who want another way here's a workaround.
Custom fonts VSD override.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.