Geek Answers Handbook

CSS: disable font ligatures in all browsers

Since google fonts are locked in China, I had to download them and use FontSquirrel to convert.

Problem: fi / ff / etc are ugly

I took all the steps here. Prevent ligatures in Safari (Mavericks / iOS7) via CSS , but not cigars.

How to disable ligatures immediately? -webkit-font-variant-ligatures: no-common-ligatures; Does not work

+6
source share
3 answers

Despite no-common-ligatures , you can try values ​​like none , unset or no-contextual . See MDN for all possible values.

Also it should in all modern browsers.

+2
source

Essentially the same answer suggested by andreas , but here is the full CSS for easy reference:

 * { font-variant-ligatures: none; }
+2
source

  • You can comment out the line in CSS:

     @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);

  • Then open the URL above in the browser, you will get a CSS file as shown 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 specified in the URL of each block and enter your assets.

  • Save CSS in your assets (say google-fonts.css ) after changing the URLs (relative to your resource directory).

Now your application will use Google fonts from the same origin, and you will not feel any difference.

0
source

More articles:


All Articles