CODEWITHSUNDEEP
javascripthtmlcssfonts
econstantin
econstantin

Reputation: 861

Is there an elegant way to handle supporting using multiple fonts with a word

I've just received a brief from a graphic designer who wants to use font-X for most of the text on a webpage, but has chosen to also use font-Y for certain specific characters (e,k,l,s).

Unless there is a trick I'm unaware of for handling this, this seems like a right pain in the...

If this is a requirement that cannot be changed to say 'single-font per word only', is there an elegant way to handle this?

From an end-HTML perspective, it seems that the code would need to be something like

<div class="use_font_x">
    H<span class="use_font_y">ell</span>o Wor<span class="use_font_y">l</span>d<span class="use_font_y">s</span>
</div>

I'm thinking some javascript/jquery could be used to pick up the DOM-elements of font-X and then parse them and add in spans for the special characters that require font-Y ?

Or else maybe there's some CSS directive to indicate what font should be used for specific characters (wishful thinking? :)

Thanks

Upvotes: 0

Views: 94

Answers (3)

choster
choster

Reputation: 130

CSS3 does provide for unicode-range rules, in which you can designate fonts to use for specific characters. The original intent was to cover mixed language pages and other cases where characters aren't available in a particular font, but could be used here as detailed in http://24ways.org/2011/unicode-range .

As the 24ways article warns, however, this is not currently supported in Firefox or in older versions of Internet Explorer.

Upvotes: 1

qw3n
qw3n

Reputation: 6334

If for some reason you are cursed and are not able to use ThomasM's solution try this. Warning text needs to have just text. It can't have HTML elements in it.

text.replace(/[ekls]/ig,'<span class="use_font_y">$&</span>');

Upvotes: 1

ThomasM
ThomasM

Reputation: 2677

To save yourself the pain, I would (let the graphic designer) design a custom fontfile which mixes the two fonts. I can see no other solution without you being in a world of pain ;)

Upvotes: 5

Related Questions