Skip to main content ↑ ↓
Topic: Using custom fonts in Sceditor (Read 2165 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Using custom fonts in Sceditor

I've added several fonts for forum posts.  Here is what I did:

I found the script files inside the theme/scripts/ folder.

I then opened the jquery.sceditor.min.js script file and added font names.

Now, one caveat here is that I am adding unusual fonts, such as Ringbearer, ElvenCommonSpeak, Aniron, Moon Runes, Decadenta Fraktur, etc.

I couldn't tell if any of them were being added just by adding the name to the list in the file or by additional actions:

Uploading the font files to the /themes/default/fonts folder,

I modified the index.css file by adding the following:
Code: [Select]
@font-face {
    font-family: Moon Runes;
    src: url(themes/default/fonts/MOONRUNE.ttf);
}
@font-face {
   font-family: Ringbearer;
   src: url(themes/default/fonts/Ringbearer.ttf);
}
@font-face {
   font-family: Aniron;
   src: url(themes/default/fonts/aniron.ttf);
}
@font-face {
   font-family: Elven Common Speak;
   src: url(themes/default/fonts/elvencommonspeak.ttf);
}

All the fonts are displaying for me except for Elven Common Speak, and I've verified the file path and spelling everywhere several times over.  Interestingly, when I'm inside the Admin panel modifying the index.css, the Elven Common Speak renders properly in the window showing the css changes.  However, it never renders on the forum.  Any thoughts?

Why does Decadenta Fraktur render properly even though I never @font-face added it to the index.css?

I can't seem to figure out where sceditor is drawing the font resource from after I add the font name to the jquery.sceditor.min.js file.

Re: Using custom fonts in Sceditor

Reply #1 –

I think I partially answered my own question:

The font name inside the  jquery.sceditor.min.js file just needs to match the font name in the viewers OS fonts, and the font will render.

But my revised question is, why doesn't the css @font-face command work?

Re: Using custom fonts in Sceditor

Reply #2 –

There is no need to modify  jquery.sceditor.min.js, you can edit GenericControls.template.php, changing for example:
Code: [Select]
					rtl: ', empty($context['right_to_left']) ? 'false' : 'true', ',
					colors: "black,red,yellow,pink,green,orange,purple,blue,beige,brown,teal,navy,maroon,limegreen,white",
to:
Code: [Select]
					rtl: ', empty($context['right_to_left']) ? 'false' : 'true', ',
					fonts: "Moon Runes,Ringbearer,Whatever font you want",
					colors: "black,red,yellow,pink,green,orange,purple,blue,beige,brown,teal,navy,maroon,limegreen,white",

That will directly add the fonts you want into the dropdown and use it into the posts.
I'm telling you this, because the "min" files are always replaced in case of updates, so any Elk patch that will tweak the editor (like the upcoming 1.0.10) will blow your edits. ;)

Is it possible to access a topic using this font?
Bugs creator.
Features destroyer.
Template killer.

Re: Using custom fonts in Sceditor

Reply #3 –

Roger that on the GenericControls.template.php and updates to .min.js files, thanks!!

OK, so I'm having another problem that was confusing my entire font debacle...

I copied my installation from the following folder:
http://test1.rubycon.us/ElkArte    (original install)

to a new subdomain:
http://DnD.rubycon.us    (new subdomain/copy).

After copying all the files, I opened the settings.php in the new location and changed the file paths.  When I open the Configurations>Server Settings>Database and Paths  all the paths look correct to the new installation.  However, when I load the new forum install in the browser, many of the css and js resources are loading from the old install (see attached image).  Any suggestions?

I'll open up the forum to guests: http://DnD.rubycon.us

Re: Using custom fonts in Sceditor

Reply #4 –

OK, I found the file paths in the Template area of the Admin panel and got them straightened out! 

Sorry for all the confusing angles of this!

I think my only remaining question is whether there's a way to get the @font-face  CSS property to work so that users don't have to have a font installed on their computer to have it render in posts.  Is that possible?

Re: Using custom fonts in Sceditor

Reply #5 –

And the final solution is...

Make sure you have the file path correct in your css code, I needed to back up from the css folder then move forward into the Fonts folder...

Code: [Select]
@font-face {
   font-family: Gibberish;
   src: url(../fonts/Fanjofey.ttf);
}

I can now add 'Gibberish' to the GenericControls.template.php and the font is rendering without being on my computer.

Thanks!!!!

Re: Using custom fonts in Sceditor

Reply #6 –

Great! :D
Bugs creator.
Features destroyer.
Template killer.