I want to use several fonts on my website and for example Arial. Arial is not in the fonts available as far as I can see. Can you please help me, so that I can use that font on my site?

I use the latest X theme, Icon 8 demo as template. Website is not public yet, so I cannot provide an url.

Thank you so much for your help.

Best regards, Heidi

You can use a custom CSS rule as follows, place it into your Customizer, Custom > CSS section using the menu Appearance -> Customize.

body {
    font-family: Arial,Helvetica,sans-serif !important;
}

Hope that helps.

It looks like it now is Arial, but I would like to ask you, if there is anywhere I can check which font is used in a specific element?

I miss a function in the visual composer where I can change font, fontsize and color (like text editing programs have and like the customizer) for each element I put on the page. Is it there in visual composer and I have missed it? Or do I have to change this with a custom CSS rule every time I want to change size, font and color? Right now I need to change those things in an ordinary text element.

If I the way to go is to change it with a custom CSS rule, can you then please give me an example?

Thank you so much.

For each element you can define font size , font color ,font family and etc.
Click on pencil icon of your element and in style field add font-size:20px;color:red,font-family:arial;

Hope it helps.

Thank you so much for your help. It works, expect the color does not change even though I copied your text:

font-size:20px;color:red,font-family:arial;

Afterwards, I changed the fontsize to 14 in the text and that worked fine, except still no change in the color. Can you help me with that?

I would also like to ask you, is it possible to define the color with a code specific code like fx “#00acb2”?

And finally I would like to ask: can I – in the same element – have different colors for different part of the text in the element? That is: some of the text is 14 px, some is 20 and some is red and some is grey?

Thank you very much.

Glad to hear it worked for you!

Regarding the color, there could be many reasons for this issue. If you could upload the site so we can see it, we can get a better idea of what’s happening. Otherwise, if you can provide us screenshot of your website, it could also help us to understand the issue.

Regarding your second query, yes, you can use hex color code #00acb2, just use following CSS property instead for color:

color: #00acb2;

Regarding your last query, it can be done by wrapping up your text inside HTML tags but the support for it will fall beyond the scope of support we can provide. You may wish to consult a developer.

Hope this helps. 🙂

Thank you.

Thank you so much. I think I found out why the color did not change. There was a “,” instead of a “;” in the code line after the color. I have now changed it and the color changed! Yeah!

Thank you for the answer about wrapping my text inside html – I will look further into that.

🙂

I’m using Cornerstone, though – not Visual Composer.

I would like to customize the font style, size and color in different elements that I’m building on my home page within Cornerstone, but I can’t figure out how to do this.

You said in visual Composer there is a ‘pencil’ to click on where you can customize the font, style and color. Is there something similar in Cornerstone?

I do see in Cornerstone that if you’re using the TEXT BOX Element, you can change the Bold, Underline, Color, and a few other things when you’re under the VISUAL tab (as opposed to the TEXT tab), but there’s nowhere that I can see where I can select the FONT type for that Text Element – ex. Font Aguafina Script (I would like to use some kind of calligraphy font in some of the text that is not my standard font for the rest of my website.)

In the cornenrstone elements that are not TEXT elements, example, for CUSTOM HEADER – there is no Font style, color, etc customization box where you add your text, just a square text box with no font design menu options above it so it all has to be done with shortcodes.

I’m essentially trying to figure out how to use certain fonts that are already included in X (they show up in my dropdown menu in the wordpress wp-admin customize for creating the fonts for my headers, text and menu bars) but I don’t know how to write the shortcode to recognize many of them when I want to add them to custom elements in Cornerstone.

Hopefullly this is clear. 🙂

For example, if I would like to type a line in a TEXT BOX that says “Welcome to my Website!” or something similar, and I want it to be in a calligraphy style like Aguafina Script, in the color red, and Bold, how would I create that in shortcode?

Also, if I were trying to type “Welcome to my Website!” in Aguafina Script in blue, italics and it’s in a CUSTOM HEADER box, how would I do that?

Thanks for your help!!

Also, is there any easy way to add fonts that I download from Google fonts to X theme without knowing how to do programming and code? I’d like to use a font JENNIFER LYNNE but it’s not included in X or in the Wp-admin customize box. Is there any way I can use the shortcode for this or add this font to my x website? (I’m using Renew Stack if that makes a difference)?

Thank you so much for the support!

Please try to add an Inline Style in Cornerstone’s style field.

If you want to use for example the Roboto font, then add: font-family: 'Roboto' !important; in the style box.

See screenshot below where you can add it.

Hope this helps.