1. Forum
  2. >
  3. Topic: Troubleshooting
  4. >
  5. Please, change font in CSS


Please, change font in CSS

The actual CSS of duolingo uses font with narrow support of Unicode.

Please, change the version you are using now of "Museo Sans Rounded" to another with larger character map coverage.

For example, the diacritical characters of Esperanto are not well displayed because the browser must substitute them with the ones found in the system font:

Eĥoŝanĝo ĉiuĵaŭde.

Edit. the same issue is discuted here: https://www.duolingo.com/comment/5177375

June 18, 2015



I can confirm this (using Iceweasel/Firefox in Debian Testing)


The letters appear normal to me. What browser are you using?


See carefully. The circumflexed letters appear, yes, but with different aspect.

I'm using FF and TBB (Tor Browser Bundle) on Ubuntu 14.04. Configured to let the sites use own typography.

I'm an everyday Esperanto user. I browse over dozens of Esperanto sites with correct typography settings and this is not an issue with them.


You might find this discussion to be of interest.

EDIT: I’ve updated that discussion to include relevant information from this discussion.


Thanks for the tip! In fact, it is the same issue.

But I don't agree that it is a problem of browser: it is a problem of the site design. The font used in CSS should contain all needed characters.


Museo Sans Rounded does have all of the letters needed for Esperanto (and Turkish, and others); the problem is whether a browser is able to render those letters correctly or not. In certain versions of Firefox (and other Gecko-based browsers like the Tor Browser Bundle, Iceweasel, etc.) at minimum, the CSS @font-face rule seems to require an accompanying unicode-range directive to render them (despite the specification stating that without such a directive, all characters in the font should be in range), and in those Gecko-based browsers where unicode-range is supported, rendering support has to be manually enabled via an about:config variable.

Do your other Esperanto sites use @font-face rules to specify downloadable fonts? If they do, do they specify fonts that aren’t installed on your computer, or do they specify fonts that are already installed on your computer?

EDIT #1: Another possibility is that Duolingo has modified their browser-downloadable copies of Museo Sans Rounded so that they only contains a subset of their original set of characters; if that’s the case, then they’d need to provide access to the unmodified copies to allow Esperanto, Turkish, etc. to render properly.

EDIT #2: The about:config variable no longer has to be manually set in Firefox 44 and newer.


Not sure about other sites. Mine has @font-face rule that loads font from googlefonts prepared to have a latin character extension (Latin Extended option in googlefonts). I don't use unicode-range directive.


What I mean is that perhaps the @font-face rule in duolingo CSS points to a smaller, crippled or only-latin version of Museo Sans Rounded font, instead of the complete version.

BTW, I've set up unicode-range in my FF version 38.0. But special characters still render ugly in duolingo (uuhhh... cache problem?).

Thanks for the help!


I agree that the responsibility is with Duolingo; however, they don’t seem to prioritize that responsibility. The problem with rendering the Turkish letters Ğğ İı Şş in Museo Sans Rounded had been noted by others before I’d created that troubleshooting discussion linked above, but several months later the same problem still exists, unresolved.

The liberafolio.org site doesn’t use @font-face rules to specify its fonts.

The lingvo.info site uses a @font-face rule for the Junicode font, but it doesn’t use one for the Georgia font, which that site seems to use most; I didn’t find a page there where Junicode was used.

The bertilow.com site does use @font-face rules (without unicode-range directives), and it renders at least the Kablo and Junicode fonts correctly in both Firefox 38.0.1 ESR and TBB 4.5.2. (I have Junicode installed locally, but not Kablo.) Its CSS offers these fonts in the EOT, WOFF, and TrueType formats, so that suggests that it would be possible for Duolingo to do the same without unicode-range directives.

Reviewing the Duolingo stylesheet, I see that it offers Museo Sans Rounded in EOT, WOFF, TrueType, and SVG formats (in 300, 500, and 700 font weights), but the URLs from which they’re downloaded are at cloudfront.net rather than at duolingo.com. The font URLs include “proxy” in their paths, so perhaps their actual storage place is not on cloudfront.net servers.

In any case, thanks for providing links to these other sites — the accumulated (but circumstantial) evidence now points to these hosted Museo Sans Rounded font files having been modified to only contain ISO 8859-1 characters (and Œ, œ, and Ÿ for French), without regard for the effect that those modifications have on rendering other languages.

P.S. Have you looked into adapting the @font-face CSS rules at bertilow.com for use at your bitakoro.tk site, so that TBB 4.5.2 would also be able to make use of PT Mono?


Thanks for the tip! I'm not an expert web developer and any help of this kind is greatly appreciated.


Your bitakoro.tk site (without unicode-range directives) renders PT Mono properly for me in Firefox 38.0.1 ESR, but in TBB 4.5.2 (based on 31.7.0 ESR) your site is rendered with my default font rather than with PT Mono. I don’t have PT Mono installed locally, so this might be an issue only with remote fonts.

The licensing for fonts from the exljbris Font Foundry (such as Museo Sans Rounded) doesn’t permit any font modifications at all, and I didn’t see any options to license Museo Sans Rounded with a limited character set on sites such as myfonts.com. Presuming that Duolingo is abiding by their font licensing requirements, either they haven’t modified their copies, or they have custom versions of the font (in three weights) with only the ISO 8859-1 characters (and Œ, œ, and Ÿ for French), or they’ve arranged a special license that allows them to modify their copies.

Note that Duolingo would need to add unicode-range directives to their CSS for our browsers to attempt to make use of it.


Jes, tested the odd behavior of fonts in TBB (but gracefully the surrogate font renders ok all the glyphs).

Anyway, coming back to duolingo, I still think that responsability of good looking fonts is at its side. If other sites success out of the box, duolingo should also.

Other esperanto (multlingual) sites where fonts are rendered ok:


(My reply is here because your relevant comment doesn’t have a Reply link.)

You could try putting this in your bitakoro.tk CSS file after commenting out your current PT Mono @font-face rule:

<pre>@font-face { font-family: 'PT Mono'; src: url(http://fonts.gstatic.com/s/ptmono/v4/ADmqvEEwv23rUz7wG2Iitw.eot); /* use the following local() substitution to test your site without accessing local fonts */ /* src: local('☺'), url(… */ src: local('PT Mono'), local('PTMono-Regular'), url(http://fonts.gstatic.com/s/ptmono/v4/ADmqvEEwv23rUz7wG2Iitw.eot?#iefix) format('embedded-opentype'), url(http://fonts.gstatic.com/s/ptmono/v4/Tirh6-ADimy_yvdLtBSHsQLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2'), url(http://fonts.gstatic.com/s/ptmono/v4/dMra6Jbp4dctDCd8lX4tlg.woff) format('woff'), url(http://fonts.gstatic.com/s/ptmono/v4/OwvIBvekHkfxvr7n5F3nUQ.ttf) format('truetype'), url(http://fonts.gstatic.com/l/font?kit=P-yd1nwobrYUqtQhAIVeGg_ampersand_skey=a4defc8e382ed677#PTMono) format('svg'); font-style: normal; font-weight: 400; /* optionally add a unicode-range directive to limit characters downloaded from remote font */ /* e.g. for ASCII set + Esperanto letters only, use: */ /* unicode-range: U+0000-007F,U+0109-010A,U+011C-011D,U+0124-0125,U+0134-0135,U+015C-015D,U+016C-016D; */ /* this would exclude all other characters, e.g. curly and angle quotes, em- and en-dashes, etc. */ } </pre>

The discussion software here has a problem with rendering ampersands, so replace the eleven-character text “_ampersand_” above with an actual ampersand.

Due to the narrow margins here, the CSS above doesn’t look good, but it will look better when it’s copied as a block and pasted elsewhere.


Well, It seems that duolingo forums have limited indentation depth :-)

Your code rocks! Thank you very much! I've just changed bitakoro.tk and TBB loads now correctly the fonts.


You still need to replace the eleven-character text “_ampersand_” in your bitakoro.tk CSS file with an actual ampersand, so that browsers that prefer the SVG font format will render PT Mono correctly.


Berniebud, which browser (and browser version) and operating system (and OS version) are you using?

It doesn’t look like any of your current courses here would make use of the letters that aren’t rendering properly in Firefox et al.

Learn a language in just 5 minutes a day. For free.