Adding fonts

[melanie1986]

 This should be simple, but I can't figure it out. We did have this on our original board before our 2015 crash and restart, but since then its escaped me how to do it. I need to add several extra font choices to the board. How do we achieve that?

[Arantor]

Do your members have the fonts installed?

[melanie1986]

 I only have the standard default fonts installed. As all four of my boards are sci-fi themed, I want to add several that are applicable to what we do. Such as the Stargate set for example.

[Illori]

if your users dont have it installed they may not see the font that you want to use.

[melanie1986]

 User installed fonts? How does that work? I'm talking about adding to the board font set. See attachment.

[Illori]

yes if the computer viewing the site does not have the font installed it will fall back to a default that they can view.

[melanie1986]

 Ah, okay I get that. So it can be done then, I mean add to the default fonts?

[Arantor]

It can but it won't show up for anyone except you in posts.

[melanie1986]

 Easily fixed, I just make a global announcement for everyone to instal 'x' font

So how do I do it?

[Gluz]

There are ways to use different fonts, from the ones almost everyone have but is not in the list (like "Papyrus"), to webfonts (like the ones available in fonts.google.com), to upload a font to your FTP and add it to be loaded for everyone (mostly, not all fonts can be loaded in all devices).


It really depends on what font you want and the license of that font.

[melanie1986]

two fonts, the Stargate font and BSG. both are free to use

[Gluz]

If they are free to use on a web page as well, and don't have a code like Google Fonts to use them as web fonts, then you have to download them to your computer, upload them to your theme directory in a new directory in /Themes/your_theme/fonts (so, inside there should be the files .ttf)


Next, open the file /Themes/your_theme/css/index.css and add this to the beginning:
change the name to the actual name of the file and the name of the font

Code Select Expand

@font-face {
    font-family: 'here-the-name-of-the-font';
    src: url('../fonts/here-the-name-of-the-file.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
(this is for the page to load the font)


Then open the file /Themes/default/GenericControls.template.php:

Code (Search) Select Expand

,
\'courier\': \'Courier\',

Code (Replace) Select Expand

,
\'courier\': \'Courier\',
\'here-the-name-of-the-font\': \'here how it should appear\',


Finally open the file /Themes/default/scripts/editor.js:

Code (Search) Select Expand


'Arial',

Code (Replace) Select Expand


'here how it should appear',
'Arial',


With this, the fonts should appear in the editor and selecting them to use in a post should make them appear for almost everyone, as I said, some fonts have issues in some devices.

[Arantor]

This only applies if the fonts are marked suitable for installation via CSS, not all fonts are.

[djoos5]

What if you are running the 2.1 Beta 2? The GenericControls.template and the editor.js do not have the searched code to replace with your suggestions.

Thanks for any help!

If they are free to use on a web page as well, and don't have a code like Google Fonts to use them as web fonts, then you have to download them to your computer, upload them to your theme directory in a new directory in /Themes/your_theme/fonts (so, inside there should be the files .ttf)


Next, open the file /Themes/your_theme/css/index.css and add this to the beginning:
change the name to the actual name of the file and the name of the font

Code Select Expand

@font-face {
    font-family: 'here-the-name-of-the-font';
    src: url('../fonts/here-the-name-of-the-file.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
(this is for the page to load the font)


Then open the file /Themes/default/GenericControls.template.php:

Code (Search) Select Expand

,
\'courier\': \'Courier\',

Code (Replace) Select Expand

,
\'courier\': \'Courier\',
\'here-the-name-of-the-font\': \'here how it should appear\',


Finally open the file /Themes/default/scripts/editor.js:

Code (Search) Select Expand


'Arial',

Code (Replace) Select Expand


'here how it should appear',
'Arial',


With this, the fonts should appear in the editor and selecting them to use in a post should make them appear for almost everyone, as I said, some fonts have issues in some devices.

[Illori]

then you should open your own topic in the correct board so you can get further assistance.

[djoos5]

I was just following the theme of this thread and using the instructions given by the previous poster Gluz.

But thanks for the curt reply - it was tremendously helpful.

[Illori]

since you are not using SMF 2.0 and this topic belongs to someone else you are best to open your own topic in the correct board to get the answer you want.

[Steve]

But thanks for the curt reply

It was not 'curt'. It was short and to the point. With the number of posts you have you know how things work.

[SaltedWeb]

On your font, thingy ( yes I said thingy ) if members are going to need fonts might want to add a link in the agreement
area or somewhere noticeable, and have ( if license use applies ) on your own server so members will know its from a safe source.
Making an announcement might work for current members but having a link in plain view could enhance their visiting for current and future members. Just my two cents.

[Aleksi "Lex" Kilpinen]

two fonts, the Stargate font and BSG. both are free to use

Hi, did you manage to get this done, or do you still need assistance with this?