Font css at cart and checkout

[soopermark]

Hello. I would like to change the font at my shopping cart screen so that the shopping cart contents and prices show up as the same as a text.css file I have working for the rest of my site. Namely:
font-family : verdana, tahoma, arial;
font-size : 11px;
LINE-HEIGHT:15px;

I went to Merchandising -> Custom Templates
then to the bottom where it says Copy ShopSite Include

I found sc_cart.css but could not find anything there that I can modify that will change font appearance.

I found sc_shipping.css but same as sc_cart.css no indication that modifying this file will change font appearance.

sc_css_inc looks to be the file I must change so I copied it and renamed it.

I can not find anywhere in my shopping cart template or other place that calls sc_css_inc.

Am I on the right track? Any advice on how to change the font is greatly appreciated. Thanks!

[loren_d_c]

The default shopping cart template (sc_default) does not contain any font styles in it's CSS, so in this case the browser default font will be used. The shopping cart templates used by the various other themes like Awesome Orange and Elite have their own CSS includes.

You should just be able to put your CSS inline in the document by putting it in the Commerce Setup -> Order System -> Shopping Cart menu at the beginning of the 'Text at the top of the Shopping Cart screen' field. Note that there is a 'Text at the top of the X screen' setting for each one of the screens in the shopping cart flow, you would find those under the various submenus in Commerce Setup -> Order System.

Also note that you would have to include the proper HTML to signify CSS, along with all of the HTML elements that you want your style to apply to, something like this:

<style type="text/css">
<!--
body, p, h1, h2, h3, h4, h5, th, td, div, ol, ul, dl, input {
font-family : verdana, tahoma, arial;
font-size : 11px;
LINE-HEIGHT:15px;
}
-->
</style>

-Loren

[soopermark]

Hi Loren,

Thanks a lot for your reply. Pleasant to see your response, I know I am in good hands because it was you who helped me I believe 6 years ago back when this was in a newsgroup format.

I know what you mean about adding css to the area at Commerce Setup -> Order System -> Shopping Cart menu at the beginning of the 'Text at the top of the Shopping Cart screen' field. I did that just now and it worked--thanks!

Another question, how do I modify this text on the shopping cart page:

Sub Total
Shipping (just to the left of the pulldown menu)
Shipping (just below the words Sub Total)

The same fields at checkout screen do not follow the css either. I don't mind giving them font tags instead of css but how do I find those? Thanks again!!

[loren_d_c]

View the source of the shopping cart screen and find the particular text that is not conforming to your CSS, find out what kind of HTML element it is in that is not in your list of elements, and add that kind of element to the list in your CSS (the list that in my example is 'body, p, h1, h2, h3, h4, h5, th, td, div, ol, ul, dl, input'). If the element already appears to be in the list (e.g. the text is in a td and td is already in the list), look for a style class defined in the element (like <td class="class_name">) and add that specific element and class to the list in the format element.classname (like 'td.class_name'). This may be necessary if that specific element.classname is already assigned font styles already and you will need to call it out specifically in your own CSS in order to override it.

-Loren