Hitskin.com
I want to add custom fonts to my forum, using ttf files. is that possible?
Last edited by megamein on June 18th 2023, 9:56 pm; edited 3 times in total
This is a Hitskin.com skin preview
Install the skin • Return to the skin page
+2
Razor12345
megamein
6 posters
is there a way to add custom fonts?
megamein- Forumember
- Posts : 74
Reputation : 3
Language : english
Last edited by megamein on June 18th 2023, 9:56 pm; edited 3 times in total
Razor12345- Support Moderator
Posts : 1581
Reputation : 268
Language : Ukr, Rus, Eng
Location : Ukraine
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?
Or about the design of the forum?
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?
Or about the design of the forum?
TonnyKamper likes this post
skouliki- Manager
Posts : 15387
Reputation : 1709
Language : English,Greek
Location : Greece
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
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
TonnyKamper likes this post
megamein- Forumember
- Posts : 74
Reputation : 3
Language : english
I wanted to add fonts to the font tab in the post toolbar, for the body text
megamein- Forumember
- Posts : 74
Reputation : 3
Language : english
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
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
Ape likes this post
skouliki- Manager
- Posts : 15387
Reputation : 1709
Language : English,Greek
Location : Greece
If you read the posts you will read how to add more fonts
Niko- Helper
- Posts : 3283
Reputation : 254
Language : English, Italian, French
Location : Italy
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
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
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
Ape and TonnyKamper like this post
Razor12345- Support Moderator
- Posts : 1581
Reputation : 268
Language : Ukr, Rus, Eng
Location : Ukraine
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.
megamein- Forumember
- Posts : 74
Reputation : 3
Language : english
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');
megamein- Forumember
- Posts : 74
Reputation : 3
Language : english
it's not working for me.
I tried several code variations
I also changed one of the fonts to Henny Penny at:
to no avail.
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.
Niko- Helper
- Posts : 3283
Reputation : 254
Language : English, Italian, French
Location : Italy
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)
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
|
|
megamein- Forumember
- Posts : 74
Reputation : 3
Language : english
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)
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- it is
- Code:
font-family: 'Inter', sans-serif;
- Code:
Inter
I don't get it tbh.
I generally have difficulty understanding if it's not a step by step walkthrough
tikky- Forumember
- Posts : 922
Reputation : 160
Language : 🇵🇹
Hello @megamein,
In your stylesheet (CSS) add
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;
}
- 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>')}
})});
Niko, TonnyKamper and Razor12345 like this post
megamein- Forumember
- Posts : 74
Reputation : 3
Language : english
the font doesn't look like the henny penny font
I shouldn't have marked the thread as resolved
I shouldn't have marked the thread as resolved
tikky- Forumember
- Posts : 922
Reputation : 160
Language : 🇵🇹
@megamein: Probably is the text size. In the CSS code find
- Code:
font-family: 'Henny Penny', cursive;
- Code:
font-size: 1.25rem;
Niko likes this post
megamein- Forumember
- Posts : 74
Reputation : 3
Language : english
tikky wrote:@megamein: Probably is the text size. In the CSS code findbelow add as a new line
- Code:
font-family: 'Henny Penny', cursive;
- Code:
font-size: 1.25rem;
should look like:
https://fonts.google.com/specimen/Henny+Penny
tikky- Forumember
- Posts : 922
Reputation : 160
Language : 🇵🇹
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
megamein- Forumember
- Posts : 74
Reputation : 3
Language : english
https://www.yotamarker.com/t468-henny-penny-test#1235tikky 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
Niko- Helper
- Posts : 3283
Reputation : 254
Language : English, Italian, French
Location : Italy
Is this the expected outcome?
if so, go to the CSS stylesheet page in your administration panel, remove the previous codes we suggested and paste this instead, then save
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;
}
Last edited by Niko on June 18th 2023, 3:54 pm; edited 1 time in total
megamein, TonnyKamper and tikky like this post
tikky- Forumember
- Posts : 922
Reputation : 160
Language : 🇵🇹
You right is a import problem. Ok in the CSS code remove
(template in General) this
- Code:
@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');
|
- Code:
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
Niko- Helper
- Posts : 3283
Reputation : 254
Language : English, Italian, French
Location : Italy
megamein- Forumember
- Posts : 74
Reputation : 3
Language : english
Niko likes this post
Ape- Administrator
- Posts : 19432
Reputation : 2010
Language : fluent in dork / mumbojumbo & English haha
Problem solved & topic archived.
|
Similar topics
Facebook
Twitter
Pinterest
Youtube
