CMSB v3 font bug (safari?)

4 posts by 2 authors in: Forums > CMS Builder
Last Post: March 1, 2016   (RSS)

By zaba - February 24, 2016

Their is a know font bug with google open sans. The 400 weight appears as condensed. and the interface is unreadable.

I discovered this on a project I was working on. This is if you have the font installed locally on your computer. 

The way around it was to have the webfont package as a hosted font rather than a @import or link to google fonts.

https://github.com/google/fonts/issues/164

I am not sure how to resolve this for cmsb as I don't want to remove my locally installed computer font.

By zaba - February 24, 2016

I have changed 

/cmsb/3rdParty/clipone/css/main.css

and my custom theme 

replacing instances of Railway and Open sans with Fira Sans. Which looks really clean and clear and consistent.

This is my personal and preferred look and something I shall be doing in future with my installations.

I would like to see this however as default in future releases as it looks really good.

As far as I can see only weights 300 and 400 are needed for this to work.

From

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,200,100,500,600,700,800,900);

To

@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300);

Then change all instances of

font-family: 'Open Sans', sans-serif;

font-family: 'Raleway', sans-serif;

to

font-family: 'Fira Sans', sans-serif;

Do this second part in your custom theme and default themes to ensure that it works.

By Chris - February 29, 2016

Hi zaba,

Thanks for the details! I've fixed this issue for the next release of CMS Builder, although we're still using Railway and Open Sans.

If you wish to customize future versions of CMS Builder, please note that the font is now being included by lib/menus/header_css.php, instead of with an @import rule:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300|Raleway:400,700,500' rel='stylesheet' type='text/css'>

All the best,
Chris