Modifying HTML Editor Styles and Font Dropdowns

-- Disregard This-- I figured out what the problem was. It was the fonts themselves that were the problem. Of course I chose two fonts to test that wouldn't work. Most of the others worked fine. --




t've got the fonts dropdown to show the font and it attaches the proper css code around the text. Now the problem is some fonts show up correctly on the pages that display the HTML Editors source code and some don't. The fonts display correctly on the admin page that has the HTML Editor on all three browsers, but not on pages that display the HTML Editor content.

The fonts displays correctly on the pages using Safari, but not on Chrome and Firefox. I assume it's a browser issue reading the CSS styles.

Here is what I am using:

HTML Editor coded text:
<span style="font-family:Pixie;"><span style="font-size:28px;">Body Text</span></span>

contents.css:
@font-face {
font-family: Pixie;
src: url(../../fonts/Pixie.ttf);
}

fonts.css -- this is linked to the page that displays the HTML Editor content.
@font-face {
font-family: 'Pixie';
src: url('fonts/Pixie.eot');
src: url('fonts/Pixie.eot?#iefix') format('embedded-opentype'),
url('fonts/Pixie.woff') format('woff'),
url('fonts/Pixie.ttf') format('truetype'),
url('fonts/Pixie.svg#Pixie') format('svg');
font-weight: normal;
font-style: normal;
}