Using the @import CSS Rules

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

Applies to Version(s): 3.8.3 R1 - Current

How You Can Add the @import CSS Rule to Your Site's Stylsheet.

The @import CSS Rule allows you to import styles from other stylesheets. Check out this article from CSS Newbie that explains 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 is 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.

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

Was this article helpful?
0 out of 0 found this helpful