HTML Emojis

font-family: emoji;
  src: local('Apple Color Emoji'),
       local('Apple Symbols'),
       local('Android Emoji'),
       local('Segoe UI'),
       local(EmojiSymbols),
       local(Symbola),
       url('font/Symbola-Emoji.eot?#iefix') format('embedded-opentype'),
       url('font/Symbola-Emoji.woff') format('woff'),
       url('font/Symbola-Emoji.ttf') format('truetype');
  font-weight: 300;
  /* Emoji unicode blocks */
  unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}

body {
  font-family: 'Roboto', sans-serif;
}

.a {
    font-weight: 700; /* bold */ 
    font-size: 2rem;
}

.b {
    font-weight: 400; /* normal */ 
    font-size: 2rem;
}

The Text looks more "heading-y" when it's bolded, the emojis look more "heading-y" when they are normal.

How can I solve this? Is there a way to apply different weight rules to emojis and 'regular' text?

Edit: The context for this is that, as you can see, mixing text and 🅴🅼🅾🅹🅸 in the same elements makes for difficult typography. I'm trying to setup a static site generator to support attractively printing 🅴🅼🅾🅹🅸s and text in the same elements.

Edit #2: So I tried using @font-family and I have updated the jsfiddle showing the results. There seem to be two problems - the first