Public Forums 71,145 posts

[doorknob Friend doorknobJoin date: December 2013Posts: 36Downloads:0Uploads:1 Thanks: 2 Thanked: 20 times in 1 posts]

#192924

Using the Bs3 Blank template, I configured the template to use a Google font for the base font. This worked as expected.
I then changed the font setting to another (non-custom) font (I was only trying out the features). The ThemeMagic preview worked as expected but the compiled CSS in the site still used the custom font. I then re-selected ‘custom font’ in the drop down to get access to the font name and completely cleared the font name before reselecting the previous font. Again that worked in ThemeMagic but this time, it broke the site completely. Finally, I changed the font name to a pair of quotes to make an empty string and then the site didn’t crash, the custom font had been removed but the selected font was not used.
When I looked at the variables-custom.less file I found that the values of both @font-family-base and @font-family-base-custom were empty strings and, apart from editing the variables-custom file directly, there doesn’t seem to be a way to recover.

The approach I took to fixing this was:
1 change the name of the custom font variable to avoid the word ‘custom’ in the name
2 add the following to the variables.less file so that the custom font field can never be completely missing but will always contain at least an empty string:

@blank: ~'';
@font-family-base-bespoke: @ blank;
Then if the field is completely cleared, it doesn’t cause the site to crash.

3 I also added a pair of mixins to create the font family css to ensure that it uses the custom font only if the value in the standard font indicates that a custom font is required:

.ja-font-family(@std-font, @ custom-font) when (@std-font = bespoke) {
font-family: @ custom-font;
font-weight: normal;
font-style: normal;
}
.ja-font-family(@std-font, @ custom-font) when not (@std-font = bespoke) {
font-family: @std-font;
}
4 create the required css with:

body {
.ja-font-family(@font-family-base, @font-family-base-bespoke);
}

This allows the hidden value in the custom field to be ignored if a non-custom font is selected in the drop down.

Regards
Phil

I have now discovered that the keyword ‘undefined’ as the value for the custom font option in the drop down is also a spoiler and I have substituted ‘bespoke’

1 user says Thank You to doorknob for this useful post

1. JA Developer

[Author]

Posts