How to style elements with custom css for Google Fonts

Support
#1

I’m struggling to understand a very basic thing on X, changing the font for a classic text element to a Google Font. All the other CSS I add to the style tabs works (like size, text shadow), but when I name the Google Font I want - such as “Krona One” by putting in [font-family: ‘krona one’;] it doesn’t load. I loaded a few into the font manager at Options -> Settings -> Fonts but the only fonts working when I add custom css to elements are Red Hat Display and Varela Round (and those only work on the homepage with the Revolution Slider - so I know that has something to do with it).

The elements I’m working on right now are the classic text types near the bottom of the homepage.

Thanks for the help.

#2

Hello Jacob,

Thanks for writing in!

Please be advised that classic text element and all other classic elements will have the font family depending on what you have set in X > Theme Options > Typography > Body and Content.

Even if you have added the fonts in your Font Manager which I have renamed it properly by the way, only the font is is being used somewhere in the theme options or in a v2 element will be loaded into the page.

If you want to have other font families on the page, I would recommend that you use v2 text element and headline element because they have their own default font styles and that you can easily assign a font family in the element settings. The v2 elements is way different than the classic ones. You no longer have to use custom inline css to change anything.

You can easily set the margins, paddings, colors, borders, and almost any of the element property.

Hope this helps.

#3

Ahh got it. Yea I’ve never gravitated away from the classic sections and elements because that’s what I’m used to. Can I use the V2 elements your talking about with classic sections and not have any problems, cause all my pages are built with classic sections.

#4

Hello Jacob,

Yes, you can use v2 elements with classic sections, rows and classic column. You can also use classic elements inside the v2 row elements and columns. We would highly recommend v2 elements because you have more controls over the element and its properties. By the way, you are seeing fewer options in the element settings, then most probably the advanced mode is disabled. To unlock all of the options, you will have to go to X > Settings > Permissions > User Preferences > Advanced Mode and set it to “Always ON”.

Hope this helps.

#5

Thank you so much for letting me know that. I think that’s the reason I never liked them over the classic elements. Just changed the settings and now I see it all.

#6

Glad we could help.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.