Help! Default Concrete Fonts vs Atomik Fonts

Using Concrete / Help
1

So I have a client that is requesting some specific fonts, mainly Helvetica. I see in my rich text editor, there are very limited fonts however in the Atomik theme, there are a bunch of other available fonts. How can I use the other fonts from the Atomik theme in the rest of my site?

From the front-end editor:
image

image

From the Themes/Pages Editor for Atomik
image
image
image
image
image

2

Good question, let me take a look.

1 Like
3

The site was running on version 9.2.7, but I am running a manual upgrade now.

4

Hey Evan, hope all is well. Any luck figuring this out?

Thanks,
Joe

5

Hi Joe,

So I just want to make sure I’m understanding the question - when you switch the font on in the theme, is it showing on the front end?

I’m wondering if including the font embed code in the header tracking codes might make the font available - for instance that Prata font is a Google Font:

6

Hi Evan,

First, thanks again for looking into this.

I guess what I am getting at is when using the rich text editor on the front end (i.e., a content box) we get one set of fonts to choose from. However, when I go to customize the Atomik theme there are other fonts there that aren’t available in the rich text editor. So how do we get the fonts like Prata or Helvetica from Atomik to be available in the rich text editor on the front end?

Or even, how do we go about adding other fonts to our site? Our client is specifically asking for Helvetica or Calibri for all their links and they wanted Trajan Pro for their company name so it fits with their organization’s branding. The Trajan Pro I was able to tackle by photo shopping their organization logo and name together in an image.

7

@JRick you can do this, but it’s not the preferred way because the editor will add inline styles to accomplish this which can (will) lead to inconsistency in your website. The preferred method is to use styles which can then be customized through the theme customizer or through the site-wide CSS.

However, if you really want to do this, you can manually edit /application/config/site.php to include the following:

return [
    'sites' => [
        'default' => [ /* or whichever if you have multiple */
            'editor' => [
                'ckeditor4' => [
                    'custom_config_options' => [
                        'font_names' => 'MyCustomFont/Custom Font;Roboto;Open Sans;Arial', /* fonts delimited by semicolons */
                        'font_defaultLabel' => 'Roboto',
                    ]
                ]
            ]
        ]
    ]
]
8

Thanks for the input. I’m more of a do it the correct way kind of guy and would rather not chance messing with things that create inconsistency on a site, particularly a client’s site.