Too Much Bloat in type-font-family

Permalink
Okay so I'm not sure where to post this, it's my first issue. This has been bugging me for a while. i installed a blank Elemental theme to use as my starting point and wanted to try out a few things, at this point i have nothing else except one content block with Lorem Ipsum. Here's the thing...

The compiled output of main.less (main.css) seems to expand the preset style "-type-font-family" into an odd mass of fonts which originate from an unknown place (I'm starting to think another dimension), let me elaborate.

so the main.less has an import of various styles I tracked down a body style to the file "content.less" :

div.ccm-page{
        font-family: @body-type-font-family;
    }


Now, this variable is being pulled from the presets, right? so far so good. Okay so i set my variable to "'Open Sans', sans-serif" in defaults.less, load the page and the font is Open Sans, as expected. This is fine for most people, but not for me, why? well If you inspect any element on a page, our lorem ipsum, Open Sans is the computed font, but the font family style has these other ghost fonts that are tied in (check attachments). This won't be an issue for most, but I'm a stickler for load times and reducing data usage as much as possible.

When I write " 'Open Sans' sans-serif" in my preset, I want Open Sans to be the ONLY font that loads, I don't want it to have to overwrite other fonts and "win".

I know this the origin of the problem because when I hardcode "'Open Sans', sans-serif" in the contents.less file, the compiled css (main.css) ONLY has Open Sans, which is the desired result. This is the only workaround for now but it drastically reduces Editor Usability and virtually renders picking fonts from the Customize sidebar pointless.... Which is one of the things that makes C5 so good.

I have attached a number of screenshots, hopefully this will clarify my problem....

5 Attachments

 
mnakalay replied on at Permalink Best Answer Reply
mnakalay
Hello
it seems the "ghost fonts" you are referring to are Helvetica, Helvetica Neue, and Arial correct?

Then you don't have to worry about it. Those are actually important AND will not do anything to increase load time.

See those fonts are system fallback font, meaning they will apply while Open Sans is still loading or not available AND they are already available on 98% of computers so there is no extra loading, they're just there.

It is normal and recommended practice, when using special fonts, to have system fallbacks. We call it a font stack.

So you see, Concrete5 is actually doing a good job at filling in the gap for you :)

Having said so, I congratulate you on paying attention to load time. I can't believe the amount of stuff loaded by most themes (Bootstrap I'm looking at you) that never gets used. And mosy users are just happy to leave it as is when they're even aware of the problem.
davidtheprogrammer replied on at Permalink Reply
Thanks a lot for getting back to me, I thought I'd have to wait at least a couple of days lol.

Yeah those are the fonts I was referring to. Well what about my font stack. I already declared "sans-serif" as my backup font, do we really need so many? I'm assuming sans-serif is available to almost all devices right? 98%? 99%? somewhere there. I guess my preset will have to declare "Open Sans" with no backup then, since c5 does it for me, neat :-).

Anyway, if it doesn't affect load times then that's fine. That was the root of this problem anyways lol.

Ahem, Bootstrap has some work to be done lol. this is why i rarely cdn it and mostly just serve my own stripped down version of it.
mnakalay replied on at Permalink Reply
mnakalay
You are very welcome.

Concerning the fonts, they are there because, if for some reasons, Open Sans didn't load, just Serif would look kind of terrible while Helvetica looks nice and makes a nice replacement for Open Sans even if just for the 2 seconds during which Open sans is not loaded yet