Is there a way to change body or heading fonts of the whole page according to a CMS field?
Example: I have an option CMS with 5 different options. Depending on the choice the body font of the whole page changes to this font. The fonts are already installed, just need to be changed.
Here is my public share link: LINK
(how to access public share link)
It sounds doable, you’d need to write up some custom CSS in order to do it though.
If you wanted to update all paragraphs font on the page for example you’d need something like this added either to page settings custom code or via an embed on the page:
.paragraph-class{ font-family: {{Dynamic value from CMS}}; font-weight: {{Dynamic value from CMS}}; }You’d need to pull in from the CMS exact name of the font, meaning that it’d need to match up to the ones you’ve added into the fonts panel.
Let me know how it went
Thanks @marko-ninja !
Adding the below inside the head tag works:
But it is unclear how I would format the {{Dynamic value from CMS}}
Example below
Collection name: “Design”
Only 1 CMS item inside which has a plain text field “font-family” and a number field “font weight”.
How would the above code need to be changed to pull from these 2 fields?
In page settings on CMS Templates above the code inputs you’ll have an option “add field” and you need to select there which field you want to use in which line of code. It will be like a purple pill once you add it and that way you’ll be able to control the font from CMS as it will load the specified one for each page.
If you’d like to do this outside of CMS template, on a static page, you’d need to add a collection list to that page first, connect it to relevant CMS, and specify CSS with same logic in an embed which will also have “add field” in the top right corner