Custom Font Showing In Browser Not Design Panel

[mrashleyprice]

Hi all,

Very active on here today! - Appreciate the help given thus far. I’ll die down with the questions soon!

When I add a custom font to main.ejs and then add it to text in index.ejs it won’t show the change, but does when I view in the browser. See below:-

Here’s how I’ve added the custom font to main.ejs:

Here’s the css change of a header on my page:

Here’s how it looks in the Design Panel:

Here’s how it shows in the browser (which is how I want it):

---

It’s difficult seeing something completely different in Design View to Browser View. How does one rectify this?

[brad]

I don’t see the difference in the two screenshots. But regardless, you are doing things the hard way. Instead of adding it as custom CSS you could be using the way easier in the Theme Manager.

Using the Theme Manager with Bootstrap 5

Intro You already know how to use the Theme Manager to customize your Bootstrap 4 sites. With the integration of Bootstrap 5 in Wappler, we also updated the Theme Manager to support Bootstrap 5 as well. Bootstrap 5 Support The workflow in Theme Manager has not changed for Bootstrap 5. First open your Project Settings: [Screenshot_7] Select Bootstrap 5 as in the Design Framework menu: [Screenshot_8] And make sure to include Bootstrap 5 Local (not CDN!) on your page in order to be able …

[mrashleyprice]

Hi @brad

I have several different custom fonts that I’ll use so the Theme Manager is of little use to me when adding custom fonts for certain headings etc.

[brad]

If it’s a Google Font it is sre to be there. Worth taking a look.

[mrashleyprice]

When you say use the Theme Manager what do you mean?

For example my one header on one page could be Custom Font 1, another header would be a different custom font. Sub headings again another custom font. Surely the Theme Manager is only useful if your headers are all one font? Mine aren’t.

Maybe I’m misunderstanding but doing it via the CSS is the only way for me to have different headings with different custom fonts. Am I wrong?

[mrashleyprice]

Also the one font is Helvetica, the other is Source Sans Pro. I’m anal about things being particular so I notice the difference a mile off

[brad]

@mrashleyprice

Maybe I’m misunderstanding but doing it via the CSS is the only way for me to have different headings with different custom fonts. Am I wrong?

Yes, if you have several different fonts for headings, you will have to use CSS.

[mrashleyprice]

Any idea why it’s showing my backup font sans serif on Design View and if viewed in the browser it shows the correct font of Source Sans Pro? Drives me mad.

On a side note I did forget about the Theme Manager so will use that in future so thanks for mentioning that

[brad]

Perhaps it’s a cached version in either the design view or browser. Try refreshing the view in Design View?

[brad]

Just a thought, I can’t remember what browser engine Wappler uses for Design View but it is common for different browsers to show slightly different fonts.

If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences .

https://www.google.com/search?q=font+difference+in+browsers

Could that be your problem? Have you tried different browsers? Just guessing here. As I mentioned, I don’t see the difference in your two examples.

[mrashleyprice]

I changed the Header in Theme Manager to ‘Source Sans Pro’ and it shows perfectly. Yet if I change .header in the style.css instead to ‘Source Sans Pro’ it won’t show in the Design View but shows perfectly in the browser.

There’s something about me adding it to css instead that’s not showing it in Design View.

Is this a bug? @Teodor

P.S Switched from Mac M1 to Windows i7, reinstalled Wappler, and created a new project and the problem still persists. I’ve opened the browser version on I.E, Chrome and Safari and they all show perfectly fine so unsure why it’s not showing custom fonts in Design View. I’m assuming it’s a bug at this point.

[patrick]

The content page doesn’t load custom scipts/css from the main, that’s why you don’t see the font on the content page. With the next release we have an update under the experimental features that should import all scripts/css from the main into the content page for rendering in the design view.

[Teodor]

This has been improved in Wappler 5.0.4 - now you can see ypur custom CSS and fonts on the content pages. Make sure to turn on the Experimental Features in Wappler general settings.