Have you tried adding Google fonts to the theme in
theme_stucco\themes\stucco\css\build\fonts\YOUR-PRESET.less, e.g.

Thanks linuxoid - yes that's exactly what I've done but whilst it looks as if it works in fact only the fallback font is rendered, i.e the system serif font in my case.

I much appreciate your thoughts though, and you'll see I've replied to stewblack2 and given a bit more detail about the issue following his different approach.

Regards
JonCope

You have to set the new font in the appropriate place, e.g. theme_stucco/themes/stucco/css/presets/YOUR-PRESET.less:

or in the header, e.g. theme_stucco/themes/stucco/css/build/header.less:

Don't forget to refresh the theme in site design after the change!

Thanks again linuxoid. I'm pretty sure I've already done exactly that but I will have another go. Since posting this, through shear frustration, I have tried what I'm trying to achieve but using the Clonemental theme for a test page. Swapping fonts there works absolutely fine so I'm beginning to wonder whether this issue might be something to do with the Stucco theme itself and its compatability with C5 V8.x

Sorry, don't know the steps you're doing, but c5 has a bug - if you make any changes in a preset, it doesn't take effect unless you jump through these hoops: Page Design -> Design -> Theme -> Customize -> select any color -> pick color -> choose -> Preset -> Select your preset -> Save Changes -> Entire Site...

Yeah, and Ctrl+F5 just in case!

Stroll on ! I didn't know about that ! I certainly can't say I've done that series of steps each time I've tried to make a change so I will now most definitely try it - and probably print it out and stick it by my screen !!!

Are the core team aware and putting this on their" to do" list?

Very many thanks for that extremely helpful tip.

Regards
JonCope

So did that work? Did you get your Google fonts to show up?

I've reported the theme preset bug in 2015!!! Nothing's changed, it's still there. And that's why I don't use presets because it's a pain in one place to do all those steps after each change. So I just directly code CSS.

FYI:
https://www.concrete5.org/index.php?cID=753510...
https://www.concrete5.org/community/forums/customizing_c5/theme-pres...

No, sadly it didn't. Trying to save the changes to the preset just produced a substantial error which started off as follows:

Less_Exception_Chunk
ParseError: unmatched `'` in main.less on line 1, column 4389 1| @preset-fonts-file: "build/fonts/chcs.less";@home-feature-icon-color: rgb(26, 26, 26);@home-feature-title-color: rgb(26, 26, 26);@title-caps-type-font-family: Titillium Web;@title-caps-type-color: rgb(117, 202, 42);@title-caps-type-font-size: 1.73em; ..........

So I had to back out of that. Admittedly I was working with copies of both .less files that make up the preset, and perhaps if I simply changed one of the presets that come with the theme I might not get that error, but I think I prefer your approach of just working with css. When you do so where do you put the file and how do you call it, or do you simply override the preset by adding customisation in the custom code / gear area of the design / customize facility?

Thanks again for your interest and help with this by the way. Sounds as if you've been through the mill on this with little help from others.

Regards
JonCope

Re. the error, looks like you might have deleted one of the apostrophes in the line where you pasted the font name. See here:

If not, I can't tell why.

To make a theme I just copy it to the theme folder, open the default.less to add Google fonts and add the font to the preset, then jump through the hoops as above - this is the only time I deal with presets. Then I simply change each CSS .less files as I see fit.Sometimes I might change background colors in the preset. But that's about it.

I use this addon now to copy the Elemental theme:
https://www.concrete5.org/marketplace/addons/elemental-cloner...

What I used to do, when I thought presets worked, I used to copy the default preset and rename it and work with that. But there are numerous places where you have to add your new preset name in the less files. So I just gave up after I realized presets don't work as expected, so I just use the default ones.

Thanks for the suggestion re deleted comma linuxoid. I'll revisit that and check thoroughly.

I have only built 3 sites with C5 but I have found each time there are often moments where things don't go smoothly. I'm interested to see what you say about both your using the new cloner (which I have downloaded but haven't got to grips with yet) and your tweaking of .less files. I have been doing pretty much exactly what you describe, which is reassuring, but the difficulty I invariably find is which .less file has the property I want to change? I can see what the property is by inspecting the page using Chrome ( or whichever browser), and where it is in the generated main.css file but is there a way of identifying which .less file holds the property in the first place?

Your thoughts on this would be extremely helpful, and thanks again for all your advice thus far.

Regards
JonCope

Well, please note the following:

1. theme_stucco/themes/stucco/ - where you design page layout (full page, right bar, left bar, 10 bars...)
2. theme_stucco/themes/stucco/inc/ - where you design header and footer
3. theme_stucco/themes/stucco/css/presets/ - theme presets
4. theme_stucco/themes/stucco/css/main.less - general theme CSS
5. theme_stucco/themes/stucco/css/build/ - page parts CSS, e.g. header, main, footer etc.
6. theme_stucco/themes/stucco/css/build/blocks/ - CSS for the blocks
7. theme_stucco/themes/stucco/css/build/fonts/ - where you include fonts for presets
8. theme_stucco/themes/stucco/css/build/mobile/ - CSS for mobile view menu

That's basically it. Pretty self explanatory. If you want to add any extra less file for whatever, you can add it anywhere (better to continue with the theme concept though) and include its import in the main.less, e.g. @import "build/blocks/my_block.less";

I like the Elemental theme and always use it as the basis for all my site designs. I'd rather look at other theme's ideas but implement them in the custom Elemental-based theme.

Before the Elemental Cloner I had to modify a number of Elemental files in order to override the core theme. This package now does that all for you. Just enter a handle, press the button and you've got a copy of Elemental in your applications folder. Then code away!

PS. Re. #2, in the Elemental theme, the header and footer are in elemental/elements/

Thanks again linuxoid. A very handy reminder list of the key .less files and others. What I was really getting at though was that there are a myriad .less files in any theme, especially when you include the Bootstrap .less structure. Sometimes when I inspect a page, trying to find which id is doing what and where it's getting its properties from, the css specificity kicks in. Often the answer is main.css (not main.less of course as that becomes compiled into main.css) so the source of the css that is overriding the css I've included isn't evident as it's in an unidentifiable.less file. A recent example showed me that the font colour I'd put in the css in the header was actually being overwritten by an unspecified bootstrap file, which showed up right at the top of the inspection panel. Now there are a whole stack of .less files in the various bootstrap folders in the Stucco theme so how does one establish which one is responsible for the bit of css that gets compiled into the main.css file that the browser uses?

I agree that there are some more important files to look at and amend first - and your list of them is invaluable, thanks - but the frustrations come when the css is coming from a file other than one of those. If you know of a way of searching the .less files I'd be hugely obliged!

Regards
JonCope
In England by the way. I see you're in Australia. Whereabouts?

I'm afraid it's trial & error trying to figure out what part of the page you want to change. Don't bother with the browser css. You just need time to remember where's what. You'll surely remember after making 10 themes )))

As you can see from the list, if you want to change something in the header, you go to the header.less. If you want to change a core block, you go to the block less file. If you add your own divs on a page, then it's up to you where to add the css, but if it's in the header, it makes sense to put it in the header.less then. Mobile css is either in the mobile folder or in corresponding less files. It's like a lego - you build the whole page with heaps of different blocks.

The bootstrap documentation includes info on what is defined in which less file. Themes like Elemental superimpose their own styles on top of that and follow a similar pattern.

You could try modifying the setup of Less_Parser to output less source maps, then set your browser console to use the source maps, so displaying the less source rather than the compiled css. Its not something I have tried, but 'in theory' should be possible. If you get that to work, it would make a good subject for a HowTo doc.

Many thanks for your comment Johnthefish. I will very definitely delve into the less parser as seeing the relevant less files listed in the console would be exactly what I'm after. At this stage it would be reckless for me to say I'll write a help file - I'd better get it working first ! - but if it does work that would be a very good idea as this is something I've been trying to find out about for a couple of years now and I'm sure I'm not the only one.

Thanks again - a helpful reply, as have been all the responses I've had to this post. Thanks guys!

JonCope

I had a look at this and the option is already there, see the cache settings page for "enable source maps in generated CSS files".

So it is Johnthefish, thanks. I've turned that option on now on my site and will see what happens.

I see that the setup is displayed thus:

Off - Good for debugging generated CSS output.
enable source maps in generated CSS files

On - Helps speed up a live site.

so I wonder if it will work when compression is turned on, speeding up the site (I see it as the option being linked only to the off mode). Only one way to find out I suppose!

Thanks for this tip - and you've saved me writing a "How-To" !

Regards
JonCope

I had a quick play on one of my dev sites. I have all the cache settings off and it works OK, except elemental pulls in plain bootstrap css which does not have the source map. If less source needs to go back that far I expect that could be tidied up by replacing it with a copy precompiled with the source map.

Thanks Johnthefish. Yes, the .less files are showing up for me too, which I think will be extremely helpful. (I take the point about the bootstrap files but if, as you say, they are well documented, then it might not be hard to see where each is and what they do, if that's even necessary. My concern was getting to grips with the .less files within the theme itself)

Haven't yet had time to get in to this but just wanted to say thanks again, A good call !

Regards
JonCope

Just add the Google Fonts embed code in the header of your site. Then use the main less file to override that fonts that come with the theme.

Thanks for the reply StewBlack2 but what is the location / file that forms "the header of the site"? I can see and understand the .less files, starting with main.less that ultimately cascade to form main.css and I can see the php files that do the legwork but how, within that structure, can one insert code so that it appears and functions in the header?

I should have said I am using C5 8.5.1 and in other respects the Stucco theme seems to be working fine, I am though also using a different theme (Personal Pro) for a test of a different style of Home Page and that calls and renders the fonts I want to use on the rest of the site without issue (but they come as part of that theme anyway)

What you suggest might very well work for me, so if you could just point me to the right file or location I'd be very much obliged.

Many thanks
JonCope