[heithuParticipant]

Hi again, support

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

[DarshanaModerator]

Hi there,

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.

[heithuParticipant]

Thanks. I am very glad that you have this support – it helps me a lot making this site.

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.

[ChristopherModerator]

Hi there,

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.

[heithuParticipant]

Hi Support,

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.

[ZeshanMember]

Hi Heithu,

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.

[heithuParticipant]

Hi Support

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.

🙂

[DarshanaModerator]

Glad we were able to help 🙂

[leannevenierParticipant]

Hi, I have a similar question to Heithu above.

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!

[JadeModerator]

Hi Leanne,

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.

[leannevenierParticipant]

Thank you! I tried that but it didn’t work, unfortunately.

This is what I already had in the text box.

Hi, I’m Leanne!
<h1 class=”h-custom-headline resp-h man h2″><span style=”color: #ffffff;
“>GET INTO FLOW! with Leanne Venier, Artist, Engineer & Flow State Expert
</span></h1>

<p style=”font-family: helvetica; color:Blue; font-size: 40px;”>This text has the font helvetica, is Blue, and 40px..</p> v ff,,

I was trying various things to get the font to change. In the above example (which you can see at members.catalyticcolor.com )

the top line, Hi, I’m Leanne is in small letters, black text, no formatting. And it looks like it’s Times NEw Roman (which I never use).

The line GET INTO FLOW! with some formatting around it right in the text box,
shows up in WHite text in the default font for my website in the style size for H1)

the 3rd line, shows up in Helvetica font (as the CSS code dictates, and in blue letters, with the pixels size, 40 px.

What I CAN’T get to work are any other fonts besides some of the very basic ones.

And adding in your code into the Style box below didn’t change anything at all.

Can you tell me how I would make a section, for example, LET’S use THIS LINE as an example: (I’ll take out the other lines and make new text boxes for the other text that I want to be in the standard font.)

Hi, I’m Leanne!

Can you tell me how to just make this one single line become the font called POIRET ONE, in the color BLUE and with the styling size of H1 (header 1)

Then I can figure out the rest by adapting the code you give me.

Thank you!! 🙂

[RadModerator]

Hi Leanne,

What you’re doing is correct, the issue is that font you’re trying to use is not yet loaded. For example, the Roboto font is not active, hence, applying that will only default to Times new roman.

Fonts are active if they are loaded through customizer’s typography and other font settings. And you can only apply active fonts. Your option is to load your chosen font manually.

1. Find your font here https://www.google.com/fonts, and let’s use Roboto as a sample, simply click the quick use icon .

2. Then simply choose the font weight you wish to use and you can enable multiple weights.

3. Then go to step three and click @import tab, and copy and paste the code to your child theme’s style.css or at your customizer’s custom css.

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400italic,300italic);

4. Now use the font just the way you’re currently doing.

font-family: 'Roboto Condensed', sans-serif;

Thanks!

[leannevenierParticipant]

Wow! that’s fantastic!! Worked perfectly!

Now I have a whole additional range of fonts I can integrate into my site! Yay!

Thanks so much for your awesome help!!

Leanne

[leannevenierParticipant]

btw, I’m guessing that only google fonts will work for this type of importing?

I recall in another stream on the forum that for non google fonts, it was more complicated to import fonts that have been downloaded from elsewhere (ie fonts that aren’t available in Google fonts). I have a couple of handwriting fonts that are not included in Google fonts that I’d like to try out.

Is there a simple protocol for importing those fonts that you know of (similar to adding CSS in the customizer box as with the google fonts, above)?

Thanks for letting me know if there is! 🙂

[JadeModerator]

Hi Leanne,

Yes that is correct. Using a custom font is a bit trickier than importing a google font.

Also, you can use a webfont generator such a this one and you will get a code on how to import the font you want to use. All you have to make sure if that the path of the font in the code is correct for it to work.

Hope this helps.

[Author]

Posts