Yalmar Yalmar - 1 year ago 104
HTML Question

Html file with International Phonetic Alphabet characters and light or extra-light font

I am trying to display International Phonetic Alphabet characters in a UTF-8 html file with a font-weight that is either light or extra-light.

I have minimised my problem as follows.

I looked for a font that can display International Phonetic Characters and has a light or extra-light font style.
My first search was on google fonts, where I found the 'Assistant' font.
When I test this font on Google Fonts with characters of the International Phonetic Alphabet (IPA), it seems to work fine with any font weight.

enter image description here

I prepared the following html file that utilises the font 'Assistant' and displays some International Phonetic Alphabet characters:

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Assistant:300" rel="stylesheet">
.ipa {
font-family: 'Assistant';
font-weight: 300;
font-size: 34px;
<div class="ipa">hɛər</div>

When I view the above html file with Chrome, the "h" and "r" are as expected, but the "ɛ" "ə" seems to come from another font with a different weight.

enter image description here

I have tried to modify the header by substituting:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">

but the result is the same.

My text editor (TextWrangler) has decoding for new files set to Unicode (UTF-8). I have also checked that the file is encoded in UTF-8 as follows:

$ file --mime hair.html
hair.html: text/html; charset=utf-8

Any ideas on how to display International Phonetic Alphabet characters with a light or extra-light font style?

Update 1

I have substituted

<link href="https://fonts.googleapis.com/css?family=Assistant:300" rel="stylesheet">


<link href="https://fonts.googleapis.com/css?family=Assistant:300&subset=all" rel="stylesheet">

Safari 9.1 displays the text correctly:

enter image description here

However Chrome 52 and Firefox 48 still display the text incorectly:

enter image description here

At https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets it is mentioned that:

Please note that if a client browser supports unicode-range
(http://caniuse.com/#feat=font-unicode-range) the subset parameter is
ignored; the browser will select from the subsets supported by the
font to get what it needs to render the text.

At http://caniuse.com/#feat=font-unicode-range it is reported that:

  • Chrome 52 and Firefox 48 support unicode-range and the subset parameter is ignored. (However the text is still incorrectly displayed in my tests).

  • Safari 9.1 supports partially and the subset parameter is not ignored (the text is correctly displayed in my tests).

Update 2

I have substituted

<link href="https://fonts.googleapis.com/css?family=Assistant:300" rel="stylesheet">


<link href="https://fonts.googleapis.com/css?family=Assistant:300&text=hɛər" rel="stylesheet">

The text is now displyed correctly for Chrome 52, Firefox 48 and Safari 9.1:

enter image description here

When I include more characters with the following line:

<link href="https://fonts.googleapis.com/css?family=Assistant:300&text=abcdefghijklmnopqrstuvwxyzɐɑɒɓɔɕɖɗɘəɚɛɜɝɞɟɠɡɢɣɤɥɦɧɨɩɪɫɬɭɮɯɰɱɲɳɴɵɶɷɸɹɺɻɼɽɾɿʀʁʂʃʄʅʆʇʈʉʊʋʌʍʎʏʐʑʒʓʔ" rel="stylesheet">

the text is still displayed correctly.

However when I try to include more of the ipa characters and extensions with the following line:

<link href="https://fonts.googleapis.com/css?family=Assistant:300&text=abcdefghijklmnopqrstuvwxyzɐɑɒɓɔɕɖɗɘəɚɛɜɝɞɟɠɡɢɣɤɥɦɧɨɩɪɫɬɭɮɯɰɱɲɳɴɵɶɷɸɹɺɻɼɽɾɿʀʁʂʃʄʅʆʇʈʉʊʋʌʍʎʏʐʑʒʓʔʕʖʗʘʙʚʛʜʝʞʟʠʡʢʣʤʥʦʧʨʩʪʫʬʭʮʯʰʱʲʳʴʵʶʷʸʹʺʻʼʽʾʿˀˁ˂˃˄˅ˆˇˈˉˊˋˌˍˎˏᴀᴁᴂᴃᴄᴅᴆᴇᴈᴉᴊᴋᴌᴍᴎᴏᴐᴑᴒᴓᴔᴕᴖᴗᴘᴙᴚᴛᴜᴝᴞᴟᴠᴡᴢᴣᴤᴥᴦᴧᴨᴩᴪᴫᴬᴭᴮᴯᴰᴱᴲᴳᴴᴵᴶᴷᴸᴹᴺᴻᴼᴽᴾᴿᵀᵁᵂᵃᵄᵅᵆᵇᵈᵉᵊᵋᵌᵍᵎᵏᵐᵑᵒᵓᵔᵕᵖᵗᵘᵙᵚᵛᵜᵝᵞᵟᵠᵡᵢᵣᵤᵥᵦᵧᵨᵩᵪᵫᵬᵭᵮᵯᵰᵱᵲᵳᵴᵵᵶᵷᵸᵹᵺᵻᵼᵽᵾᵿ" rel="stylesheet">

the text is not displayed correctly as previously.


This can be used as a workaround, however it has its limitations and it is not very satisfactory. Hopefully google fonts will provide a better solution.

Answer Source

By default, Google Fonts only returns the subset of the font for Latin characters (the behaviour may vary between browsers: some will actually send a request for all characters in use on the page). See https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets for details.

You can have it send the whole whole by adding the subset=all parameter:

<link href="https://fonts.googleapis.com/css?family=Assistant:300&subset=all" rel="stylesheet">

However this is undocumented and even though it currently works, it may break in the future.

An alternative is to use the text parameter to provide a list of all the characters you need (correctly URL-encoded, of course). Might be quite verbose.

This has been discussed in this Google Fonts issue though it hasn't been resolved.

I have tried specifying the ipa subset, but no luck.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download