Google web font "Open Sans" does not show up in the correct weight if also installed locally on Windows 7+10 -
i using "open sans" so:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> <script> webfont.load({ google: { families: ['open+sans:400,400italic,600,600italic,700,700italic:latin'] } }); </script> and works should, except on 2 of pcs (one "windows 7" , other 1 "windows 10") recent "chrome browser", there no difference between widths of 600 , 700. recent "edge" , "firefox" browsers good.
i found out, on both machines "open sans" installed locally. on "windows 7" pc myself , on "windows 10" pc pre installed. after uninstalling local font on both pcs working fine.
is kind of chrome bug? could not find online it.
also, if other users have on "windows 10" pcs "open sans" locally pre installed, website developing show on chrome browser wrong weights "open sans" font. can somehow avoided?
ps1. not using "src: local(..." declarations in css
ps2. not importing fonts via @font-face instead using webfont.js handle all
here fiddle:
https://jsfiddle.net/x75h2624
can see on win10 / chrome open sans 600 + 700 (both on normal not italic) same. on win10 firefox, win10 edge, ios chrome etc... works ok!
ps3. found this
https://bugs.chromium.org/p/chromium/issues/detail?id=335050
, posted there related , not fixed since 2014?
ps4. issue quite old filed new bug report:
https://bugs.chromium.org/p/chromium/issues/detail?id=617419
, found blog describing same problem: http://timschreiber.com/2015/01/20/local-web-font-conflict-in-chrome/
i thinking, in order avoid chrome bug 1 has able specify "open sans" font family custom name, in order chrome not confused, reading through webfontloader specs under heading "custom" (https://github.com/typekit/webfontloader#custom) lucky, possible!
what did first downloading needed fonts + css http://www.localfont.com/
after uploading fonts server added downloaded css declarations own css file. beware: remove local('...') declarations , rename instances of font-family: 'open sans'; custom, chose font-family: 'customopensans';.
after css in case looked this:
@font-face { font-family: 'customopensans'; font-weight: 400; font-style: normal; src: url('../assets/fonts/open-sans-regular/open-sans-regular.eot'); src: url('../assets/fonts/open-sans-regular/open-sans-regular.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/open-sans-regular/open-sans-regular.woff2') format('woff2'), url('../assets/fonts/open-sans-regular/open-sans-regular.woff') format('woff'), url('../assets/fonts/open-sans-regular/open-sans-regular.ttf') format('truetype'), url('../assets/fonts/open-sans-regular/open-sans-regular.svg#opensans') format('svg'); } @font-face { font-family: 'customopensans'; font-weight: 600; font-style: normal; src: url('../assets/fonts/open-sans-600/open-sans-600.eot'); src: url('../assets/fonts/open-sans-600/open-sans-600.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/open-sans-600/open-sans-600.woff2') format('woff2'), url('../assets/fonts/open-sans-600/open-sans-600.woff') format('woff'), url('../assets/fonts/open-sans-600/open-sans-600.ttf') format('truetype'), url('../assets/fonts/open-sans-600/open-sans-600.svg#opensans') format('svg'); } @font-face { font-family: 'customopensans'; font-weight: 700; font-style: normal; src: url('../assets/fonts/open-sans-700/open-sans-700.eot'); src: url('../assets/fonts/open-sans-700/open-sans-700.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/open-sans-700/open-sans-700.woff2') format('woff2'), url('../assets/fonts/open-sans-700/open-sans-700.woff') format('woff'), url('../assets/fonts/open-sans-700/open-sans-700.ttf') format('truetype'), url('../assets/fonts/open-sans-700/open-sans-700.svg#opensans') format('svg'); } @font-face { font-family: 'customopensans'; font-weight: 400; font-style: italic; src: url('../assets/fonts/open-sans-italic/open-sans-italic.eot'); src: url('../assets/fonts/open-sans-italic/open-sans-italic.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/open-sans-italic/open-sans-italic.woff2') format('woff2'), url('../assets/fonts/open-sans-italic/open-sans-italic.woff') format('woff'), url('../assets/fonts/open-sans-italic/open-sans-italic.ttf') format('truetype'), url('../assets/fonts/open-sans-italic/open-sans-italic.svg#opensans') format('svg'); } @font-face { font-family: 'customopensans'; font-weight: 600; font-style: italic; src: url('../assets/fonts/open-sans-600italic/open-sans-600italic.eot'); src: url('../assets/fonts/open-sans-600italic/open-sans-600italic.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/open-sans-600italic/open-sans-600italic.woff2') format('woff2'), url('../assets/fonts/open-sans-600italic/open-sans-600italic.woff') format('woff'), url('../assets/fonts/open-sans-600italic/open-sans-600italic.ttf') format('truetype'), url('../assets/fonts/open-sans-600italic/open-sans-600italic.svg#opensans') format('svg'); } @font-face { font-family: 'customopensans'; font-weight: 700; font-style: italic; src: url('../assets/fonts/open-sans-700italic/open-sans-700italic.eot'); src: url('../assets/fonts/open-sans-700italic/open-sans-700italic.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/open-sans-700italic/open-sans-700italic.woff2') format('woff2'), url('../assets/fonts/open-sans-700italic/open-sans-700italic.woff') format('woff'), url('../assets/fonts/open-sans-700italic/open-sans-700italic.ttf') format('truetype'), url('../assets/fonts/open-sans-700italic/open-sans-700italic.svg#opensans') format('svg'); } and webfont.js code this:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> <script type="text/javascript"> webfontconfig = { custom: { families: [ 'customopensans' ] } }; </script> the line custom custom family naming did trick.
also needed change font-family value in css 'customopensans' so:
body { font-family: 'customopensans', sans-serif; } i hoping guys @ chromium fix issue soon...
