Skin font for TinyMCE - css

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.

Answer 3

Try to use:
font-family: 'icomoon-small.ttf';
This will work