Font Styling Lexicon : Cidi Labs Support Center

R

Ronald Marx

started a topic almost 3 years ago

There is a font style that is held in the class="lead" that I can only seem to get to work within <h> header tags. For sure within the edit view, text within a <p class="lead"> tag, sitting inside of an introduction boilerplate block, does not display properly as when the page is saved.

I'm hoping this isn't a browser-related issue, but something I broke so I can fix it.

Is the font used in the lead class PT Sans? If not, then what font is used, and how is the weight adjusted? I can't find this info within the DT payload css.

Thanks in advance,

Ron

Kenneth Larsen

said almost 3 years ago

The "lead" class does not have a font-family associated with it. It will inherit the font-family of the containing element.

The CSS within the themes-payload.css file relating to paragraphs with the lead class is as follows:

#kl_wrapper_3 p.lead {

font-size: 21px;

font-weight: 200;

line-height: 30px;

}

This lead class was originally based off of a lead class in Canvas and was added to the themes-payload.css file so it would also be available within the mobile app.

As far as the actual font-family goes, I have some control but not unlimited control on how that is loaded in the editor. As I have mentioned in almost every demo/training, the view in the editor is an approximate representation. I pull in all of the CSS that is applied when the page is saved, but Canvas and the editor have some predefined CSS that they apply to the content within the editor. When I remove the default styling, strange things tend to happen. I am continually fine tuning this but so is Canvas.

When you use the Inspect Element Feature of your browser (as I can see you use to some degree from your screenshot), you can track down any CSS that is being applied to an element and the source of that CSS. Using this approach will show you that, for a saved page, the font-family is coming from a Canvas CSS file:

If you inspect that same content within the rich content editor, you will see that the font-family is trumped by inline CSS within the editor:

I will add a line to the code to try and remove the editor font-family so that the Canvas font comes through. However, you need to be aware that the editor view and the live view will probably never be exact because of how they are setup in Canvas. The same applies to the mobile app. I try to make the two match but there are a lot of variables that exist on the Canvas side and the actual device that impact that final display.

Also, when it comes to undocumented features of Design Tools (like the lead class) they are subject to change when/if controls for those features are added (that is a big part of why they are still undocumented).

R

Ronald Marx

said almost 3 years ago

Very interesting and very informative, Kenneth, thanks! You're helping me through the learning curve on how to maximize Design Tools, and bend Canvas to my will at least in terms of creating content that engages and excites our students.

I don't know how I messed up the inheritance path that used the LatoWeb font in unclassed paragraphs, but your post gave me what I needed to use it. (Your instruction begged the question for me, and I patched a gap in my knowledge regarding font weights at https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight?v=control.)

Your help has also educated me to suggest more focused ideas, such as the one about the HTML editing panel in the Design Tools Beta that I'm posting here as a new thread.

Thanks again, and regards,
Ron

How can we help you today?