Changing Font and Size

Hi to all,
I am trying to change the Font and Size of a paragraph using the “Design” Tab in wappler that should update the CSS to change the style.
In the code and “Style” Tab I see the updates happening but visually nothing changes !!

I can overwrite the code directly and force it to update the design but then I lose the bootstrap grid system !

Please help, I been stuck on this for days now and is driving me crazy :face_with_head_bandage:
Thank you in advance for any reply.

You can adjust fonts for your whole Bootstrap project in theme manager:

1 Like

Hi bjp, thanks but I want to do it only in a specific paragraph, not in the full project.

Can you not just choose the font from the dropdown under TEXT?

If so, it will assign that font to a class (from your screenshot it looks like you have tried something before because your paragraph has a class style57- you could choose this class again from the class selector box at the top of design view or create a new class) and Wappler will add it to the style.css file.

I tried to change it… the font, the size and it just does not update visually !

I even reinstalled wappler already !

What do you have in the project settings for your style file?

Thank you for helping, the settings are as follow:

If you open the style.css file, is the font being added to the class there?

Could style.css have somehow got added above bootstrap causing bootstrap to override your custom style

Indeed the style51 is not being changed !!

How is that possible !? and how can I ensure the right settings !?

In your layout page in the HEAD tags are links to style sheets and such you should see one like:

<link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />

And one like

<link rel="stylesheet" href="/css/style.css">

the style.css wants to be just before the closing HEAD tag

But seen as your styles aren’t changing correctly in the style file this probably isn’t the issue but worth a check to make sure style.css is at least included on the layout

1 Like

It is there !

It’s there but I see its above bootstrap copy the style.css line and try placing it above the </head> line

Like so :

Yeah this just means it won’t be overridden by any bootstrap css, you may still have an issue though if the style.css file isn’t actually been changed when your using the design panel but can give it a try

So I did all the changes needed but style.css is not being updated !

Hi to all… I am glad to inform the issue was with a incompatibility with the repository, I cleaned manually the double entries and now seems to be working.

Thank you all for the help.

1 Like

So now as a last question is how can I add more choices from Google Font to the CSS style list: