How to use web fonts in designMode?

Question

I have a text editor that uses designMode and an <iframe>. I'm trying to change the font to a Google Web font. Here's the JavaScript code:

function rich(a,b,c) {
    editor.execCommand("styleWithCSS",true,null);
    editor.execCommand(a,b,c);
    editor.focus();
}

HTML for the fonts:

<select onchange="if (this.selectedIndex > 0) {rich('FontName',false,this.options[this.selectedIndex].text);}">
            <option selected>Font</option>
            <option>Arial</option>
            <option>Times New Roman</option>
            <option>Courier</option>
            <option>Consolas</option>
            <option>Calibri</option>
            <option>Molle</option>
        </select>

In the <iframe> file, I have this:

<link href='https://fonts.googleapis.com/css?family=Molle:400italic' rel='stylesheet' type='text/css'>

I tried to use CSS to change the text into the proper font:

span[style="font-family: Molle"] {
    font-family: 'Molle', cursive;     
}

It doesn't work. A solution only has to work in Google Chrome.

Answer 1

The way you're loading the font, only the italic version is loaded. Therefore the font will only show if you specify italic explicitly in the span's style.

font-family:'Molle',sans-serif; font-style:italic;

By the way, can you change the HTML at all? If so, please don't use an inline style and then try to override it with a stylesheet, using the style attribute for a selector. Not only does it look ugly and patchy, but it won't work, it won't do anything. The inline style attribute has a higher specificity than a stylesheet.
Either put in the above as the inline style for the span, or give the span a class and use that in the stylesheet to address it.