Somebody wants their own color and their own font, finds the custom CSS field, and starts there. Then every update and every dark mode breaks their site.
This page is not about how to write CSS. It is about why you almost never need to.
#The ladder
Work top down, and only drop a step when the one above genuinely does not cover it.
Colors
Set once, globally, and they propagate through the whole theme by themselves.
Concretely: change the accent color and the buttons, links, active states and badges all change with it, because they all reference the same color.
Fonts
Added through the font library rather than attached by hand.
Choose the heading font and the body font as a pair. The theme is built around two, and setting only one leaves half the site on the previous typeface.
Shape and density
Corner radius, line weight, content width, spacing. These make a theme feel like yours as much as color does, and the controls already exist.
Local exceptions
An individual element or page has its own settings. Do not repaint something globally for the sake of one case.
#What not to do
Do not override global colors with custom CSS. It covers one place and misses a dozen others that were taking that color automatically, and the site drifts apart.
Do not set your own font sizes over the theme's. The sizes form one scale, and a value knocked out of it breaks the rhythm on other screens, most visibly on mobile.
Do not attach a font by hand, bypassing the library. It will not reach the editor, and your admin starts looking different from your site.
Do not edit theme files directly. Said once, calmly: the next update removes the work.
A colour written in by hand does not invert in dark mode.
The theme's own colours know their dark counterpart; a hex in a CSS rule does not, so text written that way disappears into the background for every visitor whose device is set to dark.
#When custom CSS is fair enough
Refusing it entirely would make this page sound like a prohibition, and prohibitions get ignored. So, honestly:
Fair enough: a one off detail the theme deliberately has no setting for, affecting one place on the site.
Not fair enough: anything a setting already covers, and anything to do with colors, fonts or spacing in general.
If you are writing the same rule a second time for a neighbouring element, stop.
That is the reliable sign you are overriding something that should have been set globally, and the global version will also cover the six places you have not looked at yet.
#Common questions
Can I use my exact brand hex values?
Yes, enter them in the colour settings where the theme distributes them for you, rather than in CSS where you would be distributing them by hand.
My brand font is not in the library
Custom font uploads are part of the library and Adobe Fonts connect natively, so both routes keep the font inside the system rather than outside it.
Will a style kit overwrite my colors?
Yes, so apply the kit first and tune afterwards rather than the other way round.
Where does the custom CSS field live, then?
In the Customizer, and it is genuinely there for the exceptions, since this page is about the order you reach for things rather than a pretence that it does not exist.
A colour did not change everywhere
Something in that place is overriding it, which is either a local setting on that element or a CSS rule written earlier, and the local setting is the more common of the two so it is the one to check first.
#Still stuck
Open a support ticket with the colour or font you set and a link to the page still showing the old one.
Last updated
