Adding new fonts

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?

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/

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.

possible add only one font size - 27

example

[size=30]example[/size]

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:







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.

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

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

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:







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!

You are welcome!

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