How to use own fonts in Theme Atomik?

In its simplest form, create a new theme (the shim theme). In the header load the Atomik css. Then load your own theme css. Make your shim theme the active theme.

Just this CSS functionality of the shim could be also be achieved by keeping Atomik as the active theme and injecting CSS into the header using one of many different methods:

A custom theme usually has more to it than just patching up some CSS, hence the shim approach. The shim can then add (or override) all the other stuff you may want to do in a theme. I then use the built in .less compiler to structure the css in my shim theme (as you would use when designing an Elemental clone)

A variation would be to @import the Atomik css into the top of your own .less file. That way the shim would compile to a single .css file that may be slightly better optimized. This would require a relative path to the Atomik .css.

I remember I tried it that way (its what I usually do to shim other themes), but I cannot remember why I changed it to load Atomik first.

2 Likes