How To Add A New Font To Editors

[prenticemarie]

Hi,
I am relatively new to CMSimple so I hope this question is in the correct section ...
I am developing my site using the "Blacker" template and I have been asked to use the "Segoe Script" Font for the text.
I have downloaded the font and I can use it in Gimp2.6, so my question is ....
How do I load it for use in CMSimple, using say "ckeditor" or "openwysiwig" ?
Where are the Fonts stored in CMSimple ?
I look forward to some help here please.

[cmb]

Hi prenticemarie,

well, fonts used on the web have a special requirement: they have to be installed on the visitor's browser! So, if you're using an uncommon font (and AFAIK "Segoe Script" is unusual) to display text, the browser of the visitor falls back to a default font (typically "Times New Roman"), if the font is not installed on the computer the browser is running on. IOW: of course you can choose any font you like, but be aware that most visitors of the site will see a different font. This is the reason, why CSS allows the specification of web safe font combinations.

So, if you really want to display an unusual font, you have to do it with the help of JS. See e.g. http://cufon.shoqolate.com/generate/.

How to use this font: it's not totally clear to me, if you really want to add the font to an editor. It's probably enough, if you change the default font of the template. Unfortunately I don't know the "Blacker" template. But somewhere in templates/blacker/stylesheet.css you will probably find the CSS that chooses the font for the content section. There you can change this to your prefered font.

To give more specific help, you should post a link to your site, or, if it's not online yet, the link where you got the "Blacker" template from.

Christoph

[svasti]

Hi prenticemarie,

I do have an unusual font, namely "Maiandra", on one of my CMSimple example sites:
http://frankziesing.de/cmsimple/?Design ... %3A_Orient
The font comes in 2 versions (ttf and eot) and is part of the template and is situated in a special folder "fonts":

cmsimple
content
...
templates
— mytemplate
— — stylesheet
— — fonts
— — — MAIAN.TTF
— — — MAIANDR0.eot

The stylesheet starts with:
@font-face {
font-family: "Maiandra GD";
src: url("fonts/MAIANDR0.eot");
src: local('Maiandra GD'), url("fonts/MAIAN.TTF") format("truetype");
}

and later has:
h1, h2, h3, h4 {
font-family: 'Maiandra GD', trebuchet MS, sans-serif;
}

That's the easy part.
Why 2 version's of the font? Well, because Microsoft needs a special treatment. Microsofts browsers accept only eot fonts while all other browsers accept ttf fonts. And because Microsoft's Internet Explorer is common, you definitely need both version's of the font.

As ttf font you may take the one you have on your computer. (That's what I did.) HOWEVER THAT'S ACTUALLY ILLEGAL, because you would need a licence to put the font on the internet .To be on the save side, you could purchase this licence. Alternatively there are some good freeware fonts you may consider, for instance here: http://www.exljbris.com/

The real pain in the *** is the eot part. Microsoft offers for free a tool to convert ttf to eot, Microsoft WEFT. You can download it from their website. You need a lot of patience to use WEFT. It's kind of counterintuitive with many stupid wizards, but it can be done.

I think that's actually the way of the future: More and more websites are going to have their own fonts.

Hope you can manage
svasti

[prenticemarie]

All,
Thanks for your swift replies .... I note the reasoning re: web specific fonts and will refer this back to my "customer".