Skin font for TinyMCE

Question

I have used the skin editor:

http://skin.tinymce.com

to style my text editor.

However, I don't see how I can change the font type and size.

In the skin file there is a font folder and it contains:

icomoon.ttf
icomoon-small.ttf
icomoon.eot
icomoon-small.eot

etc.

On my website I style my text as follows:

font-family: Verdana,Geneva,sans-serif;
font-size: 11px;

How should I do this for the skin I have created?

Answer 1

first of all generate webfont:

http://www.fontsquirrel.com/tools/webfont-generator

you will download pack of files. U need to copy:

*.eot
*.woff
*.ttf
*.svg

to Skin for TinyMCE css folder

in Skin for TinyMCE, there's file named: skin.min.css

on top of this css file you need to include font declaration

@font-face {
    font-family: 'arialregular';
    src: url('arial-webfont.eot');
    src: url('arial-webfont.eot?#iefix') format('embedded-opentype'),
         url('arial-webfont.woff') format('woff'),
         url('arial-webfont.ttf') format('truetype'),
         url('arial-webfont.svg#arialregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

you will find it in stylesheet.css, which was generated in font squirrel

then find in skin.min.css font family declaration and replace it with font name generated by font squirrel, in my example it will by :

    font-family: 'arialregular';

theoretically it should work, hope it helps!

Answer 2

The Verdana, Geneva font family is web safe so you will not need to add files to the font folder.

The classes that handle the editors css are as follow:

.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
background: transparent;
text-decoration: none;
color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
-webkit-tap-highlight-color: transparent;
line-height: normal;
font-weight: normal;
text-align: left;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
direction: ltr;
}

So to change the font family and size you will need to add this to your css file.

.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
font-family: Verdana,Geneva,sans-serif;
font-size: 11px;
}

The file that has the above code needs to be called after the Bootstrap.min.css file in the header otherwise it will be overwritten.

Hope that helps.