The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Adding new fonts

5 posters

Go down

Solved Adding new fonts

Post by WizardT October 6th 2023, 7:32 pm

I want to add new fonts to my forum and also add them to the list of all fonts in the editor. I also want to add more sizes to the list of all sizes in the editor (I know it works as a tag).

I used this solution to add new fonts. What I do is: go to Google fonts, find the link to the font, open it in the browser, copy it and paste it to CSS (for example this). I can then use it as a tag in the editor. I encountered a problem though. When I click "preview" I see the text with the new font but the font tag dissapers from the editor and is no longer applied to the text when I click "send". The only way is to directly add the tag and click "send". If I try to edit if after posting, the font tag dissapers.

I tried this for adding fonts and sizes to the list in the editor but it does not work at all. 

Am I doing something wrong? Is there another way to acomplished the abovementioned aims?


Last edited by WizardT on October 15th 2023, 4:50 pm; edited 1 time in total
WizardT
WizardT
New Member

Posts : 20
Reputation : 2
Language : Bulgarian

https://bgmagic.bulgarianforum.net/

Back to top Go down

Solved Re: Adding new fonts

Post by Ape October 6th 2023, 7:39 pm

I am using the same as you https://fmdesign.forumotion.com/t220-add-more-font-choices-to-the-editor?highlight=font
and don't have a problem at all font size is up to 28px after that the system don't work.as for the Font's well this has a problem. Now you can only really use font's that are listed on google or you have problems when posting.

Font's you can use with no problems at all >> https://fonts.google.com/


Adding new fonts Left1212Adding new fonts Center11Adding new fonts Right112
Adding new fonts Ape_b110
Adding new fonts Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19203
Reputation : 2001
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Adding new fonts

Post by WizardT October 6th 2023, 8:17 pm

Ape wrote:I am using the same as you https://fmdesign.forumotion.com/t220-add-more-font-choices-to-the-editor?highlight=font
and don't have a problem at all font size is up to 28px after that the system don't work.as for the Font's well this has a problem. Now you can only really use font's that are listed on google or you have problems when posting.

Font's you can use with no problems at all >> https://fonts.google.com/
Font size solution does not work for me.

I only use Google fonts and it still does not work.

Can you provide an algoritm how to, for example, add this font (cyrilic) to my forum, as well as to the list in the editor. Maybe this way I will see if I did something wrong.
WizardT
WizardT
New Member

Posts : 20
Reputation : 2
Language : Bulgarian

https://bgmagic.bulgarianforum.net/

Back to top Go down

Solved Re: Adding new fonts

Post by poesia-verses October 6th 2023, 10:59 pm

possible add only one font size - 27

example

[size=30]example[/size]
poesia-verses
poesia-verses
Forumember

Male Posts : 536
Reputation : 21
Language : and small english

https://stihi-podval.forumotion.com/

Back to top Go down

Solved Re: Adding new fonts

Post by Razor12345 October 7th 2023, 9:25 am

Good morning!

https://help.forumotion.com/t131879-custom-font-on-the-forum#884852 - This tutorial is not about message fonts. This tutorial is about fonts in forum design. By using the @font-face query you will not add new fonts for users in posts

To add fonts to a post, you need to use this tutorial: https://fmdesign.forumotion.com/t220-add-more-font-choices-to-the-editor?highlight=font

In this code, I added the font you wrote about above

Code:
$(function(){$(function() {
  $('.sceditor-button-font').click(function() {
    addFont('Calibri');
    addFont('Papyrus');
    addFont('Montserrat');
 
    $('.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>')}
})});

Also based on the code with adding fonts, I made code for text sizes:

Code:
$(function(){$(function() {
  $('.sceditor-button-size').click(function() {
    addSize(20);
    addSize(28);
 
    $('.sceditor-fontsize-option.new-size').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[size='+$(this).attr('data-size')+']','[/size]');$('.sceditor-fontsize-picker').remove();e.preventDefault()})
  });
  function addSize(size){$('.sceditor-fontsize-picker div').append('<a unselectable="on" class="sceditor-fontsize-option new-size" style="font-size: '+size+'px;" href="#" data-size="'+size+'"><size unselectable="on" face="'+size+'px" style="font-size: '+size+'px;">'+size+'</size></a>')}
})});

Result:

Adding new fonts Scree425

Adding new fonts Scree423

Adding new fonts Scree424

If these codes don't work, make sure that you:
1) enable Javascript code management: AP - Modules - Javascript codes management - Enable Javascript code management : Yes
2) no have conflicts between scripts - if you have other scripts - disable them one by one to identify the problem script.


Adding new fonts Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1542
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

skouliki, Ape, sivastar, SarkZKalie and TonnyKamper like this post

Back to top Go down

Solved Re: Adding new fonts

Post by Razor12345 October 15th 2023, 10:41 am

Is your request complete?
if your request is complete, please mark it as Solved


Adding new fonts Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1542
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Solved Re: Adding new fonts

Post by poesia-verses October 15th 2023, 11:02 am

example
poesia-verses
poesia-verses
Forumember

Male Posts : 536
Reputation : 21
Language : and small english

https://stihi-podval.forumotion.com/

Back to top Go down

Solved Re: Adding new fonts

Post by skouliki October 15th 2023, 12:20 pm

poesia-verses wrote:example

Please don't hijack another member’s topic's
if you wish to help do not post a single word just describe and explain your solution
if you having a problem with your forum open a new thread
skouliki
skouliki
Manager
Manager

Female Posts : 15241
Reputation : 1702
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

poesia-verses likes this post

Back to top Go down

Solved Re: Adding new fonts

Post by WizardT October 15th 2023, 4:49 pm

Razor12345 wrote:Good morning!

https://help.forumotion.com/t131879-custom-font-on-the-forum#884852 - This tutorial is not about message fonts. This tutorial is about fonts in forum design. By using the @font-face query you will not add new fonts for users in posts

To add fonts to a post, you need to use this tutorial: https://fmdesign.forumotion.com/t220-add-more-font-choices-to-the-editor?highlight=font

In this code, I added the font you wrote about above

Code:
$(function(){$(function() {
  $('.sceditor-button-font').click(function() {
    addFont('Calibri');
    addFont('Papyrus');
    addFont('Montserrat');
 
    $('.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>')}
})});

Also based on the code with adding fonts, I made code for text sizes:

Code:
$(function(){$(function() {
  $('.sceditor-button-size').click(function() {
    addSize(20);
    addSize(28);
 
    $('.sceditor-fontsize-option.new-size').click(function(e){$('#text_editor_textarea').sceditor('instance').insertText('[size='+$(this).attr('data-size')+']','[/size]');$('.sceditor-fontsize-picker').remove();e.preventDefault()})
  });
  function addSize(size){$('.sceditor-fontsize-picker div').append('<a unselectable="on" class="sceditor-fontsize-option new-size" style="font-size: '+size+'px;" href="#" data-size="'+size+'"><size unselectable="on" face="'+size+'px" style="font-size: '+size+'px;">'+size+'</size></a>')}
})});

Result:

Adding new fonts Scree425

Adding new fonts Scree423

Adding new fonts Scree424

If these codes don't work, make sure that you:
1) enable Javascript code management: AP - Modules - Javascript codes management - Enable Javascript code management : Yes
2) no have conflicts between scripts - if you have other scripts - disable them one by one to identify the problem script.

Yes, it seems that one of my other sctripts was the problem. It was a Google tag for my Google Analytics. Thank your for helping!
WizardT
WizardT
New Member

Posts : 20
Reputation : 2
Language : Bulgarian

https://bgmagic.bulgarianforum.net/

Back to top Go down

Solved Re: Adding new fonts

Post by Razor12345 October 15th 2023, 5:52 pm

You are welcome!

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


Adding new fonts Screen51
Razor12345
Razor12345
Support Moderator
Support Moderator

Male Posts : 1542
Reputation : 266
Language : Ukr, Rus, Eng
Location : Ukraine

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum