How to use own fonts in Theme Atomik?

Hi,

I have concretecms 9.1.3 and using the atomik theme. This theme uses google-fonts. I want to change the fonts and using own fonts. What is the best practice to do this? Creating a new Theme / copy the Atomik or is there any option via the webinterface to change the fonts?

I found only a way to change the preinstalled fonts. But how to use own fonts?

Thanks
trickler

@trickler I think you would probably be best off copying atomik and using it as a starting point - thereā€™s no way to include custom fonts through the web interface I am aware of. Alternatively you could include custom CSS to reference font files you place on the server somewhere.

Thanks for your reply :slight_smile:
Yes, I tried copying atomik. But ā€¦ hmmm ā€¦ it is not realy simple, isnt it?

I have found scattered instructions for this on the internet. I was never quite sure whether the instructions were still up to date and valid. And it was incredibly complicated! I expected that I would just have to copy the Atomik theme folder. But according to the instructions, there are 1000s of other things to do. Some things I couldnā€™t do at all because I was missing individual programmes.

In the end, I replaced the name change of the theme by hand everywhere in the files. That was quite tedious. There were always new error messages.

Now it works. But every now and then an error message ā€œError - Unknownā€ appears for 2 seconds in a small pop-up window with a blue title bar. I am therefore not quite sure whether everything is OK. I donā€™t want to have another ticking time bomb here ā€¦

Translated with DeepL Translate: The world's most accurate translator (free version)

I canā€™t help you with cloning Atomik. You are by no means the first developer to conclude that Atomik is ridiculously over-complex to clone.

However, to track down your error popup, you may find something in the Network section and XHR tab of your browser dev console.

You could also try ā€˜View Sourceā€™ and see if you can find anything relating to the error popup in the source.

No guarantees that either of the above will reveal more info.

Another approach to your original problem is to leave Atomik intact, then create a ā€˜shim themeā€™ that superimposes styles to override or add to the Atomik styles. Such a shim can be used to pull in extra fonts. But the disadvantage is that Atomik will still pull in the original fonts, so a shim theme is not the most request or byte efficient alternative.

1 Like

I donā€™t think you can put it more bluntly and diplomatically - thanks John

ps. Could you show (hint) how to do it in ā€œshim themeā€ to change the main font - even if it is not very economical method?

Does the ā€œTheme Styling Toolā€ add-on solve this problem in Atomik?
I mean CSS changes and keeping code cleaner.

Thank you for your clear words! That reassures me immensely. Then Iā€™m not the only one who finds it too complicated :wink:

Which modern theme should I work with if I want to get visually in the direction of the Atomik theme and at the same time have good support? Can you recommend something?

I had bought a nice theme some time ago. Unfortunately, this theme is no longer being developed, so I can no longer use it with the new Concrete version and new PHP - thatā€™s somehow not so nice :frowning:

Or does it make sense to put together all the nice little things that come with such a ready-made theme yourself?

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

Xanweb has published several Bootstrap 5 themes designed for easy migration from Atomik: Replica (several variations), Subatomik, Crista.

Getting away from Bootstrap based themes, Modena is popular with many neat features and customization options.

In general, before using any marketplace theme,

  • Confirm v9 compatibility
  • Check the Live Demo site still works
  • Check the support ā€˜Get Helpā€™ does not have a trail of unanswered support requests
  • If in any doubt, contact the developer by PM or email. Allow a few days for a response. If no response, then conclude it is not supported.
2 Likes