PinnacleCart allows you to import CSS styles such as fonts using the @import rule.


Applies to Version(s): 3.8.0 series



How To Add the @import CSS Rule to Your Site's Stylesheet

The @import CSS Rule allows you to import styles from other stylesheets. Check out this article from CSS Newbie explaining how it works.


While the @import rule works for pulling in any spreadsheet, its most common use is to import fonts, such as Google Fonts.


One of the rules with @import is that it must be at the top of the spreadsheet. This used to cause problems in PinnacleCart because our template engine combines multiple stylesheets together from multiple sources. This is no longer the case. You can add the @import rule anywhere in your CSS and when the cache compiles, the rule will automatically push to the top of the main CSS sheet.


For example, if you're in Cart Designer, using Edit custom css, you might have a huge list of styles already entered. If you were to put @import url(http://fonts.googleapis.com/css?family=Open+Sans); into the bottom of this area, after you click Save, it will automatically push to the top of all.css, and thus it will work.

edit custom css



Links to Related Articles


CSS Manifesto


If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.