As google fonts are blocked in China I had to download them and use FontSquirrel for conversion.
The problem: fi/ff/etc are ugly
I did all of the steps here Prevent ligatures in Safari (Mavericks/iOS7) via CSS but no cigar.
How can I disable ligatures at once? -webkit-font-variant-ligatures: no-common-ligatures; Doesn't work
Despite no-common-ligatures you can try values like none, unset or no-contextual . See MDN for all possible values.
Also it should be supported in all modern browsers.
Essentially the same answer that andreas offered, but here's the full CSS for easy reference:
* { font-variant-ligatures: none; }You can comment out the line in your CSS like:
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic); Then, open URL from above in browser, you'll get CSS file like below:
/* latin */ @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 300; src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/fpTVHK8qsXbIeTHTrnQH6MAjkyiewWYrWZc50I8hK7I.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } Download each font given in URL of each block, and put in your assets.
google-fonts.css) after modifying URLs (relative to your assets directory).Now, your application will use google fonts from same origin and you'll not feel any difference.