Fonts in editor..

by faerycharmjulie April 5th 2021, 2:57 pm

Hi, I have been trying to find where the fonts for the posts editor are located.
I'd like to add in a couple of my own; like - Bookman Old Style, Candara.

Is this possible to do?

by **Ape** April 5th 2021, 5:08 pm

Hello @faerycharmjulie

Sadly there is not a way to do this by your ACP unless you use a JavaScript
Here is a really good forum post you can follow that will help you.

I use this my self.
https://fmdesign.forumotion.com/t220-add-more-font-choices-to-the-editor.

Any problems please let me know here as the forum is no longer used for support.

Regards.

Ape.

by faerycharmjulie April 5th 2021, 5:12 pm

Thanks so much @Ape
I will go check that out.

faerycharmjulie wrote:
Hi, I have been trying to find where the fonts for the posts editor are located.
I'd like to add in a couple of my own; like - Bookman Old Style, Candara.

Is this possible to do?

by **Ape** April 5th 2021, 5:24 pm

Just to let you know that some font's will only work if you have them installed on your Computer, laptop, Tablet, phone, so it is best to use a google site to find your fonts and are basic to everyone.

by faerycharmjulie April 5th 2021, 6:37 pm

Thanks for the help @Ape it was worth a try. I didn't get it to work.

It sure seemed simple enough.
I got the scrollbar to work on the font menu.
But when I select the fonts they don't do anything.
And a couple I added in myself don't show at all.

by **SLGray** April 5th 2021, 8:49 pm

Please post the JavaScript you used on your forum. Please post it in the code tags.

by **Ape** April 5th 2021, 11:53 pm

faerycharmjulie wrote:Thanks for the help @Ape it was worth a try. I didn't get it to work.

It sure seemed simple enough.
I got the scrollbar to work on the font menu.
But when I select the fonts they don't do anything.
And a couple I added in myself don't show at all.

Please give me your JavaScript you used and the names of the font's you want and I will take a look for you.

It maybe the font you are using is not a basic font

I use this site for my font's as they should all be installed on basic computers already
https://fonts.google.com

by faerycharmjulie April 6th 2021, 3:43 am

Code:: $(function(){$(function() { $('.sceditor-button-font').click(function() { addFont('Calibri'); addFont('Papyrus'); addFont('Avantgarde'); addfont('Bookman Old Style'); addfont('Candara'); addFont('Baskerville'); $('.sceditor-font-option.new-font').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[font='+$(this).attr('data-font')+']','[/font]');$('.sceditor-font-picker').remove();e.preventDefault()}) }); function addFont(font){$('.sceditor-font-picker div').append('<a unselectable="on" class="sceditor-font-option new-font" href="#" data-font="'+font+'"><font unselectable="on" face="'+font+'">'+font+'</font></a>')} })});

I really want Bookman Old Style so that I don't have to edit my code in my posts to use it.
I don't care about Baskerville. I was just seeing if it would show up. Only Calibri, papyrus and avantgarde show up. But they don't actually work when selected...

by **SLGray** April 6th 2021, 3:53 am

Do you have those fonts installed on your computer?

by **SLGray** April 6th 2021, 3:55 am

Ange Tuteur wrote:Attention : If the font is not installed on a users computer they will not see the font you added to the Editor when used !

by faerycharmjulie April 7th 2021, 4:13 am

Avantgarde is the only one I don't have.
I know that people have to have a font installed on their
own system to see it. I just want to have the choice of using it.

Most of those are pretty default aren't they?
Bookman Old Style has always been on all of my computers over the last 20 years.

by **Ape** April 7th 2021, 2:55 pm

Okay I see the problem
The following Font's are not working

Code:: addfont('Bookman Old Style');

I made a small change to your code Give it a try Wink

Note: Candara is a light Grey so this may not work if not installed on your computer.

Code:: $(function(){$(function() { $('.sceditor-button-font').click(function() { addFont('Calibri'); addFont('Papyrus'); addFont('Avantgarde'); addFont('Bookman'); addFont('Candara'); addFont('Baskerville'); $('.sceditor-font-option.new-font').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[font='+$(this).attr('data-font')+']','[/font]');$('.sceditor-font-picker').remove();e.preventDefault()}) }); function addFont(font){$('.sceditor-font-picker div').append('<a unselectable="on" class="sceditor-font-option new-font" href="#" data-font="'+font+'"><font unselectable="on" face="'+font+'">'+font+'</font></a>')} })});