When the Newspack theme options fall short, WordPress’s Additional CSS field in the Customizer can be used to fine-tune your site’s appearance.

When working with Custom CSS on Newspack sites, there are a few things we’d like Newspack customers to keep in mind:


Before you start

Starting with an existing theme, there is a limit to what you can do with CSS alone, and doing more ‘hacky’ things to force certain layouts can increase the chances that a future update to the Newspack theme or plugins will cause something to break.

Before making changes with CSS, explore what’s already available in the theme and for the blocks — it may be that what you want to do is already possible with the theme options or block settings.

We strongly recommend reaching out to your TAM before trying to use CSS to make major changes to layouts or placement of elements.

We also ask that you contact your TAM if you’re not fully confident making CSS changes yourself.


CSS limit

AMP limits the amount of CSS each page can load to 75kb, and will remove any CSS files that exceed that amount.

AMP uses a process called “tree-shaking” to remove unneeded CSS — on AMP’s site, it’s described as “a set of checks and heuristics to eliminate as many CSS rules not used in a given generated AMP page as possible”. In other words, the CSS loaded on any given page reflects what is actually on that page, rather than the site’s total CSS.

Adding different blocks with different settings, or content from plugins, can increase the amount of CSS loaded on a page. AMP will also load all of the styles for an element — for different screensizes and print styles, too — so hiding elements at certain breakpoints will not reduce how much CSS a page has.

You can see how much CSS a page is loading when you’re logged in to your Newspack site by hovering over the AMP menu in the Admin Toolbar:

Homepages tend to be the most complex pages on Newspack sites, so they act as good temperature check for whether your design is loading too much CSS. We recommend keeping the homepage’s CSS Usage in the low 90s% and under, and checking the total after content or CSS changes.


Adding custom fonts

AMP allows custom fonts to be added to your site in one of two ways — using <link> to load font styles by a number of white-listed font providers, or using @font-face — there’s some more information about this here, including allowed font sources. If you use @import in the Additional CSS field to load fonts, it will be stripped out.

You can use the Typography options in the Newspack theme to include third-party hosted fonts, instead of using @import.


Avoiding !important

Often !important is used in CSS as a short cut to override more complex CSS selectors. However, due to the way AMP transform that selector, you often end up with more characters in the tree-shaken CSS.

For example, if you used the following styles:

.nav1 {
    font-size: 20px !important;
}

It would be transformed into this as part of the CSS rewriting process AMP does:

:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .nav1 {
    font-size: 20px;
}

We recommend against using !important in the Custom CSS because it can often add more bulk to your CSS (and more complexity) than repeating the selectors used in the theme.


You can learn more about AMP and CSS here.