Font list in theme customizer
Permalink
I'm just playing with setting up the 5.7 theme customizer for the first time. All seems great so far but just wondering where the list of fonts in the type selector come from?
- Can this be customised beyond the default you set?
- Could Google fonts be integrated in some way (without the overhead of loading loads of different possible font combos)?
- Can this be customised beyond the default you set?
- Could Google fonts be integrated in some way (without the overhead of loading loads of different possible font combos)?
Thank you - but isn't this just for replacing 1 font in a theme. I was wondering more about the list of fonts that populates the drop-down in the customizer sidebar in 5.7.
Hi mrjcgoodwin,
The customizable styles drop-down for type should include:
- the font you set up in your theme defaults.less file (Google Font, font file, etc.), or theme preset file, for that customizable type style
- and I believe the hard coded system fonts defined in style-customizer.js
concrete\js\style-customizer.js
I have not tried to do this, but you might be able to override it to change the fonts.
Currently, if you want to change the non-system font, you need to do it in your theme files.
Example:
http://legacy-documentation.concrete5.org/tutorials/replace-the-def...
From a design and performance view, it is considered best practice to use web fonts sparingly.
I am still unsure about having the ability to choose a custom web font from a drop-down. An issue would be that each font has a different number of weights, some with many, others with just one. These would need to be mapped somehow through the interface. Also, it could easily be used in a way that would hurt page performance, through the selection of numerous web fonts (increasing the size of pages). An argument could also be made for the design impact of having a large number of differing web fonts used on a page.
Additional font customization could be added using theme presets. Theme presets allow for switching an existing theme's color schemes, backgrounds, font, spacing etc. If you needed variations of a theme that only changed fonts, then I imagine that could be done using a preset.
http://documentation.concrete5.org/developers/designing-for-concret...
The customizable styles drop-down for type should include:
- the font you set up in your theme defaults.less file (Google Font, font file, etc.), or theme preset file, for that customizable type style
- and I believe the hard coded system fonts defined in style-customizer.js
concrete\js\style-customizer.js
d.prototype.fonts = { Arial: new c("Arial", "Arial, sans-serif"), Helvetica: new c("Helvetica", "Helvetica, sans-serif"), Georgia: new c("Georgia", "Georgia, serif"), Verdana: new c("Verdana", "Verdana, sans-serif"), "Trebuchet MS": new c("Trebuchet MS", "Trebuchet MS, sans-serif"), "Book Antiqua": new c("Book Antiqua", "Book Antiqua, serif"), Tahoma: new c("Tahoma", "Tahoma, sans-serif"), "Times New Roman": new c("Times New Roman", "Times New Roman, serif"), "Courier New": new c("Courier New", "Courier New, monospace"), "Arial Black": new c("Arial Black", "Arial Black, sans-serif"), "Comic Sans MS": new c("Comic Sans MS", "Comic Sans MS, sans-serif") },
I have not tried to do this, but you might be able to override it to change the fonts.
Currently, if you want to change the non-system font, you need to do it in your theme files.
Example:
http://legacy-documentation.concrete5.org/tutorials/replace-the-def...
From a design and performance view, it is considered best practice to use web fonts sparingly.
I am still unsure about having the ability to choose a custom web font from a drop-down. An issue would be that each font has a different number of weights, some with many, others with just one. These would need to be mapped somehow through the interface. Also, it could easily be used in a way that would hurt page performance, through the selection of numerous web fonts (increasing the size of pages). An argument could also be made for the design impact of having a large number of differing web fonts used on a page.
Additional font customization could be added using theme presets. Theme presets allow for switching an existing theme's color schemes, backgrounds, font, spacing etc. If you needed variations of a theme that only changed fonts, then I imagine that could be done using a preset.
http://documentation.concrete5.org/developers/designing-for-concret...
Totally agree with your highlighting of performance issues. It was as much out of curiosity as anything - just struck me as odd that you could inject 1 extra font in amongst a list of 10 or so other presets.
I think you're right, presets is probably the best way to go.
I think you're right, presets is probably the best way to go.
http://legacy-documentation.concrete5.org/tutorials/replace-the-def...