is there a way to add custom fonts?

by megamein June 16th 2023, 11:52 pm

I want to add custom fonts to my forum, using ttf files. is that possible?

by **Razor12345** June 17th 2023, 8:04 am

Good afternoon!

You cannot add fonts using ttf files. But you can add fonts via templates/CSS code

I want to clarify - are you talking about fonts when sending a message?

is there a way to add custom fonts? Scree174

Or about the design of the forum?

by **skouliki** June 17th 2023, 8:16 am

hello

if you want fonts in the forum check this thread https://help.forumotion.com/t131879-custom-font-on-the-forum

some font's will only work if you have them installed on your computer so it is best to use a Google site to find fonts that are essential to everyone
also if the font is not installed on a user's computer they will not see the font you added to the Editor when used

if you want like Razor said more fonts in the editor then use this code https://fmdesign.forumotion.com/t220-add-more-font-choices-to-the-editor?highlight=font

by megamein June 17th 2023, 1:39 pm

I wanted to add fonts to the font tab in the post toolbar, for the body text

by megamein June 17th 2023, 1:57 pm

it works:
https://fmdesign.forumotion.com/t220-add-more-font-choices-to-the-editor?highlight=font

but some fonts don't work.
like pirulen, interdimensional, pokemon, cyberpunk

by **skouliki** June 17th 2023, 2:04 pm

If you read the posts you will read how to add more fonts

by Niko June 17th 2023, 7:00 pm

Coucou @megamein

you can look for new fonts to install on GoogleFonts (https://fonts.google.com/) Wink

You need to retrieve the font URL, similar to this one:

After that, go to ACP > Display > Images & Colors > Colors > CSS stylesheet and add this code, replacing the name and font link

Code:: @font-face { font-family: 'FONT NAME'; src: url("FONT LINK"); }

This resource may help you in understanding how to do that: https://fonts.google.com/knowledge/using_type/using_web_fonts_from_a_font_delivery_service

Have a nice day :rose:

by **Razor12345** June 17th 2023, 7:55 pm

megamein wrote:
but some fonts don't work.
like pirulen, interdimensional, pokemon, cyberpunk

Because these fonts are not in the public domain (at least on an open-source site fonts.google.com).
You can try looking for these fonts on the Internet, but you need a site with open-source fonts, not downloading font archives.
There is no way for administrators to download font files on the service.

by megamein June 17th 2023, 9:04 pm

Niko wrote:Coucou @megamein

you can look for new fonts to install on GoogleFonts (https://fonts.google.com/)
You need to retrieve the font URL, similar to this one:

After that, go to ACP > Display > Images & Colors > Colors > CSS stylesheet and add this code, replacing the name and font link
Code:
@font-face { font-family: 'FONT NAME'; src: url("FONT LINK"); }

This resource may help you in understanding how to do that: https://fonts.google.com/knowledge/using_type/using_web_fonts_from_a_font_delivery_service

Have a nice day

so let's say I want this font:
https://fonts.google.com/specimen/Henny+Penny

the code should be

Code:: @font-face { font-family: 'Henny Penny'; src: url("Henny Penny");

or

Code:: @font-face { font-family: 'Henny_Penny'; src: url("Henny_Penny".woff2) format('woff2');

?

by megamein June 17th 2023, 9:16 pm

it's not working for me.
I tried several code variations

I also changed one of the fonts to Henny Penny at:

Code:: Administration Panel > Modules > JavaScript codes management > new script. Title : Your choice Placement : In all the pages Paste the code below : $(function(){$(function() { $('.sceditor-button-font').click(function() { addFont('Calibri'); addFont('Papyrus'); addFont('Avantgarde'); $('.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>')} })});

to no avail.

by Niko June 17th 2023, 10:48 pm

megamein wrote:so let's say I want this font:
https://fonts.google.com/specimen/Henny+Penny

the code should be
Code:
@font-face { font-family: 'Henny Penny'; src: url("Henny Penny");

or
Code:
@font-face { font-family: 'Henny_Penny'; src: url("Henny_Penny".woff2) format('woff2');
?

No, the CSS code should be something like the one contained here (for the font you mentioned)

https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap

So you can copy-paste the content of the page in your CSS and save. Then the Font name will be the one you see in the code, so for

Code:: font-family: 'Inter', sans-serif;

- it is

Code:: Inter

is there a way to add custom fonts? Scree152

by megamein June 18th 2023, 3:52 am

Niko wrote:
megamein wrote:so let's say I want this font:
https://fonts.google.com/specimen/Henny+Penny

the code should be
Code:
@font-face { font-family: 'Henny Penny'; src: url("Henny Penny");

or
Code:
@font-face { font-family: 'Henny_Penny'; src: url("Henny_Penny".woff2) format('woff2');
?

No, the CSS code should be something like the one contained here (for the font you mentioned)
https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap

So you can copy-paste the content of the page in your CSS and save. Then the Font name will be the one you see in the code, so for
Code:
font-family: 'Inter', sans-serif;
- it is
Code:
Inter

I don't get it tbh.
I generally have difficulty understanding if it's not a step by step walkthrough

by tikky June 18th 2023, 12:37 pm

Hello @megamein,

In your stylesheet (CSS) add

Code:: @import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap'); font[face="Henny Penny"] { font-family: 'Henny Penny', cursive; }

the script

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

by megamein June 18th 2023, 2:59 pm

the font doesn't look like the henny penny font
I shouldn't have marked the thread as resolved

by tikky June 18th 2023, 3:13 pm

@megamein: Probably is the text size. In the CSS code find

Code:: font-family: 'Henny Penny', cursive;

below add as a new line

Code:: font-size: 1.25rem;

by megamein June 18th 2023, 3:21 pm

tikky wrote:@megamein: Probably is the text size. In the CSS code find
Code:
font-family: 'Henny Penny', cursive;
below add as a new line
Code:
font-size: 1.25rem;

should look like:
https://fonts.google.com/specimen/Henny+Penny

by tikky June 18th 2023, 3:23 pm

Yes, that is the font being used. What is your forum? Can I see a thread that has a font to see the problem? Thanks

by megamein June 18th 2023, 3:35 pm

tikky wrote:Yes, that is the font being used. What is your forum? Can I see a thread that has a font to see the problem? Thanks

https://www.yotamarker.com/t468-henny-penny-test#1235

by Niko June 18th 2023, 3:53 pm

Is this the expected outcome?

is there a way to add custom fonts? Scree157

if so, go to the CSS stylesheet page in your administration panel, remove the previous codes we suggested and paste this instead, then save

Code:: /* Henny Penny font */ @font-face { font-family: 'Henny Penny'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/hennypenny/v17/wXKvE3UZookzsxz_kjGSfPQtvXIZt9DS.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } font[face="Henny Penny"] { font-family: 'Henny Penny', serif; font-weight: 400; }