I’ve been working on WF all week and have completed my homepage. I’ve gone to create another page and naturally added in the symbol/sections that I’ve created.
My issue is that the font styling in the sections has reverted to Arial, and I can see that it’s inherited from (body - all pages).
What I don’t understand is how this is happening on the new page and not the homepage. I want to be able to set the paragraph and headings to the style I want, and to be able to reuse them without them taking on other styling.
Here’s an example. I have a ‘field label’ on the contact form fields and if I add a class that I’ve used elsewhere, it changed the colour but not the font. My class uses Lotagrotesque not Arial.
Can anybody shed any light on this? Why is it happening now, and not on my homepage?
Hi @Anon_User, it looks like you have a class named “Body” that includes a font declaration. That class exists on your homepage, but not on the Contact page.
The “Body - All Pages” font is set to Arial, but it’s overridden in the cascade by your “Body” class that’s applied to the homepage’s element. I’d recommend setting your base font on “Body - All Pages” and then using classes for any elements that might use a different font.
Thanks @blakelam. Appreciate you taking the time to look at this.
Just to check my understanding is correct… The Body - All Pages class is the master and any section you build will always inherit the font style from it… unless a class has been set that overrides it. In my case, I have a class overriding it on the homepage, but not on the contact page… hence the issue?
I guess my question now is what is the best practice to setting up the body/all pages, body and sections? To somebody that’s fairly new to CSS, it all seems a bit illogical only being able apply one font/size/weight/height etc to the body/all pages as a website will need to use many font styles.
What you outlined is exactly right - styles applied to the pink “Body - All Pages” selector will apply to all pages. It’s the equivalent of writing body { /* styles here apply to all pages */ } in css.
There are different methods people use, but I typically set the base font, font color, font size on Body - All Pages and then apply any variations to other classes or elements. For example, you can style all Paragraph tags or all Headings to apply different fonts to those elements, or you can create a class for your other font styles and use that class where the font varies from the base that you set on Body - All Pages.
You generally want to take advantage of the CSS cascade and apply styles that will be reused a lot at a higher level.
That does make sense. So would you just ignore the body class that I have setup?
It seems odd to have a Body-all pages that’s informing a body class, that’s informing all of my classes. So in your example, are you suggesting just having a Body-all pages, then setting up classes for fonts etc and skipping the body class? i.e. simplifying things
I actually don’t remember ever setting up the body class. It might have been an accident.
Best case scenario is probably refactoring your project to eliminate the “Body” class. It looks like there are several style declarations attached to that class that could cause you issues down the line. If you have the Body class selected, you’ll see the styles that have been applied by that class are highlighted in blue.
That’s one thing that can cause some confusion with Webflow - if you adjust any styles without naming a class first, Webflow will automatically create a class with those styles. It’s easy to lose track of which styles are coming from where with those auto-named classes that Webflow creates.
It looks like your originally read-only link isn’t working, but I’d be happy to do a quick screencast of my suggestions if you share a new link. Feel free to message me directly if you prefer.
