Is it possible to display an alternate character with CSS?

Question

I am using a web font that has several different, "M's" to choose from, in the glyphs panel. The default "M" that keeps being displayed in my website is hideous. I would like to use a better looking "M" from one of the font's alternate character choices.

In the glyphs panel (within Illustrator) the "M" character I want to use is: U+004d Alternates#2 (aalt2)

I have this currently in my CSS:

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

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

Is this even possible to call an alternate "M" from a font, and display it on a web page?

Myiasis

There is something with the font settings that can be used .. but it's the same "M" character data (M = 0x4D; doesn't matter how it is represented) in all cases, just a different font applied. – Irrelative

reset fonf-family :) – Manipular

Answer 1

Ok the html code that corresponds to the font unicode character of 004D is "M" . Since you want to change all the occurences of the specifiv "M" to that particular character, just find the occurences of that character and add a span tag on the fly.

Here is an example where I have done the same thing with the character "e" but not "E". I changed "e" with "ȝ"

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 variation is to use the "unicode-range" attribute in @font-face to specify a new font and apply that new font to every occurence of the character. Refer MDN Documentation here.

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

Code snippet here for the 2nd variation,

$(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

Narra

This is good, but the function can be simplified to: $(this).html($(this).text().replace(/e/g,"<span class='e'>&#541;</span>"));. See jsfiddle.net/rj9pw0zt – Taipan

@RickHitchcock - You are absolutely. Cascading is such a beautiful thing :) thanks. nice enhancement – Narra

Answer 2

I sort of figured it out. This works in FF, but not Safari.

This is the HTML for the "M" in the word 'Meet', that I want to change:

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

This is the CSS that changed that particular letter for me:

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

Pro Tip: If you are generating a web font, make sure the alternates are actually in that web font. I had a version of the font that did not have the alternates, hence why the darn code wasn't working!

Myiasis

The only small problem with this approach is to add the span tag manually everytime the letter "M" occurs. My solution does that on the fly – Narra

Also safari supports unicode-range but not font-feature settings. Unicode-range has a little better browser support as of now – Narra

Thanks @Sai. I actually only need to change the "M" once in the whole website—so a simplified method would work, but the fact that it doesn't work in Safari is a real problem. :( – Myiasis

Try the second variation I proposed in my solution then. Safari supports the use of unicode-range as per the MDN documentation. – Narra

Answer 3

Yes, you can do it this way:

@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';
}

Toms