Page 1 of 1

Font family and color

Posted: Thu Nov 09, 2017 3:49 pm
by djm007
Hi,

I'm trying to use the same look as Realistic in my email template. Find the font-family and default color is proving harder than I thought. Can you tell me what the fonts and colors you're using?

Thanks.

Re: Font family and color

Posted: Thu Nov 09, 2017 6:29 pm
by admin
Hi David,
Thanks for joining our community :D
Well, the font part is pretty easy, the font-family we are using in Realistic is the famous modern font Roboto. The URL to load the font from Google is: https://fonts.googleapis.com/css?family ... 00,700,400. And we are using exactly the 400, 400italic, 300 & 700 font weights & styles.

The color part is a bit challenging; Realistic is built using the Google's framework Material Design Lite https://getmdl.io/ which make use of a primary/main color and a another secondary/accent color for the whole design.
By default, Realistic sets the main color to Indigo (rgb(63,81,181)) and the secondary color to Pink (rgb(255,64,129)) but this will change when you change the Color Scheme option ( Appearance => Customize => Design ).
Here is an easy trick to determine these two colors;
Your website header will always have the background-color set to the primary color. So if you are using Google chrome, place the cursor on top of your website header, right-click and then click Inspect. When the inspect tab is open, click on the header tag (<header id="masthead" class="site-header mdl-layout__header is-casting-shadow" role="banner">) and read the background-color value from the right panel.
Your links will always have the color set to the accent color. So to get the accent color, right click on any link and follow the above method to get the color value.
I don't recommend using the Material Design Lite framework for your emails. It's not easy to handle like the Bootstrap framework for example. Just copy the colors RGBA values and use them.
To get all the available color, check the colors wheel here https://getmdl.io/customize/index.html
If you are having issues getting these color, give me a link to your website and I will get them for you.

Re: Font family and color

Posted: Sat Nov 18, 2017 7:59 pm
by djm007
Thanks. On a slightly related topic, is it possible to add or modify color schemes?

Re: Font family and color

Posted: Mon Nov 20, 2017 10:08 am
by JessayJey
Yes it is possible to add or modify color schemes.
see here font colors are awesome.

Re: Font family and color

Posted: Mon Nov 20, 2017 1:19 pm
by admin
djm007 wrote:Thanks. On a slightly related topic, is it possible to add or modify color schemes?
You mean changing Realistic's color scheme? Yes, that's quite easy to do but you are limited to very few color schemes (see Appearance => Customize => Design & Layout). If you want a custom color scheme, you will have to generate the CSS file using this tool https://getmdl.io/customize/index.html and manually included by editing theme files.

Re: Font family and color

Posted: Mon Nov 20, 2017 1:20 pm
by admin
JessayJey wrote:Yes it is possible to add or modify color schemes.
see here font colors are awesome.
Thanks for your input Jessay :)

Re: Font family and color

Posted: Sun Nov 25, 2018 4:03 pm
by sarahjones
Font very important key. Font-family property can grip numerous font names as a "fall back" system.