Is it possible to display an alternate character using CSS?

Question

I am using a web font that has several different “Ms” in the glyph panel. By default, the “M” that appears on my website is disgusting. I would like to use the improved "M" from one of the alternate font character options.

In the glyph panel (in Illustrator), the “M” symbol I want to use is: U + 004d. Alternatives # 2 (aalt2)

I have this in my CSS:

.script:before { content: "\004D"; } 

Unfortunately, this code does not pull the alternate "M" that I want. It just pulls the default "M", which I am trying to get rid of.

Is it even possible to call an alternative “M” from a font and display it on a web page?

Answer 1

Ok The html code that matches the unicode character of the 004D font is " M ". Since you want to change all occurrences of the "M" qualifier to this particular character, just find the occurrences of that character and add the span tag on the fly.

Here is an example where I did the same with the symbol "e", but not the "E". I changed "e" to "ȝ"

JSFIDDLE LINK here.

 $(document).ready(function() { $.fn.texter = function() { var letters = $(this).html().split(""), text = ""; for (var i in letters) { if (letters[i] == "e") { text += "<span class='" + letters[i] + "'>" + '&#541;' + "</span>"; } else { text += letters[i]; } } $(this).html(text); }; $("body").texter(); }); 

 .e { color: magenta; font-family: 'Arial'; font-size: 18px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="text">Test Message is Entered Here EEE is not touched but eee is changed</div> 

Another option is to use the "unicode-range" attribute in @ font-face to indicate a new font and apply this new font to each occurrence of a character. Refer to the MDN Documentation here .

The script for this can be found here: http://jsfiddle.net/dka30drt/7/

The fragment code is here for the second option,

 $(document).ready(function() { $.fn.texter = function() { var letters = $(this).html().split(""), text = ""; for (var i in letters) { if (letters[i] == "e") { text += "<span class='" + letters[i] + "'>" + '&#541;' + "</span>"; console.log(letters[i]); } else { text += letters[i]; /*console.log(letters[i]);*/ } } $(this).html(text); }; $("body").texter(); }); 

 @font-face { font-family: funkyfont; src: url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.eot?#iefix) format('embedded-opentype'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.woff) format('woff'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.ttf) format('truetype'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.svg#svgFontName) format('svg'); unicode-range: U+004D; } .e { color: magenta; font-family: 'funkyfont'; font-size: 18px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="text">Test Message is Entered Here EEE is not touched but eee is changed</div> 

Hope this helps

Answer 2

I kind of understood that. This works in FF, but not in Safari.

This is the HTML for the word “M” in the word “Meet” that I want to change:

 <span class="m-alternate">M</span>eet 

This is the CSS that changed this email for me:

 .m-alternate { font-feature-settings: "ss02"; } 

Pro Tip: If you are creating a web font, make sure that the alternatives are actually in that web font. I had a version of a font that had no alternatives, so why the ink code doesn't work!

Answer 3

Yes, you can do it like this:

 @font-face { font-family: 'MyFont'; src: local('MyFont'); } @font-face { font-family: 'MyFont-Alt'; font-feature-settings: "salt"; /* Above can vary depending on the font. For example: font-feature-settings: "aalt"; font-feature-settings: "ss01"; */ src: local('MyFont'); unicode-range: U+004d,U+004f ; /* Just in case you want more glyphs. */ } body{ font-family: 'MyFont-Alt','MyFont'; }