Font Family Open Sans Not Being Used

Font family Open Sans not working

Ok, my main error was to use font-family: OpenSans; instead of font-family: 'Open Sans';

Google web font Open Sans does not show up in the correct weight if also installed locally on Windows 7+10

I was thinking, that in order to avoid this Chrome bug one has to be able to specify the "Open Sans" font family with a custom name, in order for Chrome not to get confused, so by reading carefully through the WebFontLoader specs under the heading "Custom" (https://github.com/typekit/webfontloader#custom) I was lucky, this is actually possible!

What I did was first downloading the needed Fonts + CSS from http://www.localfont.com/

After uploading the fonts to my server I added the downloaded CSS declarations into my own css file. Beware: remove all the local('...') declarations and rename all instances of font-family: 'Open Sans'; to something custom, I chose font-family: 'CustomOpenSans';.

After this the css in my case looked like 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 the webfont.js code like 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 with the custom family naming did the trick.

Also I needed to change the font-family value in my CSS to 'CustomOpenSans' like so:

body
{
    font-family: 'CustomOpenSans', sans-serif;
}

I am hoping the guys at Chromium will fix this issue soon...

CSS - 'Open Sans' font

your issue is due to woff2 font format not being supported by IE.

google font own css will give different font formats to different browser.

if you open https://fonts.googleapis.com/css?family=Open+Sans:400,600,300 with chrome you will see woff2 font format being linked by the served css.
if you open https://fonts.googleapis.com/css?family=Open+Sans:400,600,300 with IE/Edge you will see woff2 font format being linked by the served css.

how to solve

you either add the woff format to your own open-sans.css or let google do it for you linking the google css

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300" rel="stylesheet" type="text/css">

Open Sans font weight cannot go lighter

I have imported the google font open sans font, but you need to make sure that you are importing the (Light 300).
Look at the import link it has 300 and 400.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

span{
margin-right:10px;
}

div{
  font-family:'Open Sans';
  font-size:14px;
  font-weight:300;
  
}

<div> 
<span>About Us</span>
<span>Products & services</span>
<span>Portfolio & Case Studies</span>
<span>Contact Us</span>
<span>News</span>
</div>

Open Sans font family causes some UI change

This is most likely caused because whatever your default font-family is, has different font-size or font-weight or line-height.

Try putting rules in for the following:

https://www.w3schools.com/cssref/pr_font_font-size.asp
https://www.w3schools.com/cssref/pr_font_weight.asp
https://www.w3schools.com/cssref/pr_dim_line-height.asp

This will ensure you have some default settings. It's also worth adding fallback font-families just in case. Something like:

.class {
    font-family: 'Open Sans', Arial, Helvetica;
}

Let me know if you're still stuck.

Edit: Removed comment about updating question to include code

---

Related Topics