Array
University of Oregon
Browse: Home / JavaScript (ES) / Character Sets & Google Fonts

Character Sets & Google Fonts

The following is adapted from ch. 3, JavaScript Programming, by Dionisio and Toal (Jones & Bartlett).

Text

A string is a sequence of characters. In JavaScript, string literals are written within double quotes (“example1”) or single quotes (‘example2’).

Quote-swapping is useful in a variety of contexts, such as the possessive form (“cat’s meow”).

A character is a named symbol, such as:

  • plus sign (+)
  • die face 2 (⚁)
  • Tibetan letter dzha (ཛྷ)
  • card suit, spade (♠)

A character set is a set of characters, each having its own codepoint.

JavaScript uses the Unicode character set, and Unicode uses hexadecimal numbers to specify the codepoint for each character.

Here are several examples from the Table of Miscellaneous Symbols – Unicode Consortium. Note that characters that are pictures (dice, playing card suits, etc.) are also called glyphs.

Codepoint  Character

  266F      hashtag 
  2680      die face 1 
  2685      die face 6

For the complete codepoint mapping, see the Unicode Character Code Charts.

How To Use in HTML and JavaScript Strings

  • Include the following element in the head section of your web page: 
    <meta charset="utf-8"/>
  • HTML: surround the hex codepoint with &#x and a semicolon (;)Example, die face 1:  &#x2680;
    Example, heart playing card suit: &#x2665;
  • JavaScript: use u followed by the four hex digit codepointExample, die face 1:  u2680;
    Example, heart playing card suit: u2665;

Styling Font Size

Special characters may have very small display sizes. You can control this with CSS. The following style rule says, “For any span tagged id=”die”, use an extra large font.”

span#die {font-size: 800%;}

Troubleshooting

Whether or not you (or your users) can see particular characters depends on the fonts that are installed in your browser.

When your web browser displays a Unicode character that the current browser font has no glyph for, it checks the installed fonts and looks for one that does offer support. If it finds one, it’ll substitute the proper glyph; if not, most browsers will display a hollow square or rectangle, like so: ⬜.

You can control this by downloading with your web page, a Google font that supports your character set. Note that the basic font typeface imported from the Google Fonts repository is usually specified as “Latin”, which lacks many symbols & glyphs.

The solution is to look for Google fonts that support “Latin Extended” set in the in the “Filters” section at Google fonts:

filters

 

Skip to toolbar