Category description: where to change the font?

Posted in: Newspaper
Post count: 494

Hi,

I’d like to change the font of the category description but can’t find where in Theme Panel > Theme Fonts.
I’m talking about the text just below the title, for example “Sélection d’idées de destination voyage pour découvrir…” on the page https://www.mondeoz.com/destinations-voyage/

Thanks

Post count: 20688

Hi,

You could use a cloud category template – https://cloud.tagdiv.com/#/load/Category
In a cloud template the category description has font settings
https://www.screencast.com/t/CeIXjt6Tdg

In the theme panel there is no general setting for the category descriptions. If you want to keep using the template you are using now, let me know how you want to modify the description. I will try to provide a solution.

Thanks

Post count: 494

Thanks simion, I’d like to keep that template with Helvetica font, size 17, line height 28px.

Post count: 20688

There is a way. In order to be able to apply a font with CSS, it has to be loaded first. Currently the Helvetica font is not set for any element in the website, so it isn’t loaded. From what I can see it isn’t even available in the font selection drop-down in the theme panel.

Custom fonts can be loaded in the theme panel, there are 5 spots available
http://prntscr.com/o7s3y0
Or they can be loaded with CSS in the custom CSS section.

https://forum.tagdiv.com/font-customization/

So you could download the respective font, it should be available online. If it doesn’t come with a woff format, there are converters online as well (font converter to woff).

Once converted, upload it in the theme panel. Then it will be loaded by the theme. So after doing this now the font can be applied with CSS
This code should apply the font for the category description (if the font family name is Helvetica – http://prntscr.com/o7sbfh )

.category .td-category-description p {
font-family: Helvetica, Arial, sans-serif;
}

Let me know if you need help, or you have more questions.
Thanks

Post count: 494

Hi Simion,

I’m using this font: https://ibb.co/gDN1Dzn
So the CSS would remain the same? I do not have to add “helvetica neue”?

Thanks

Post count: 20688

Seems I didn’t see that font there, sorry for that. I have set it for an element to see if it applies, seems it does not for me. I did some research and found that the Helvetica font and all related families are available for use only by purchasing them
https://fonts.google.com/?query=helvetica
So it is not a free font for all to use, like other Google fonts
https://fonts.google.com/

Maybe you could use a different similar font in this case
https://www.typewolf.com/top-10-helvetica-alternatives
If you want to do this and the font is not available in the theme panel, you can load it and apply it as mentioned above.

Post count: 494

Hi Simion,

Alright, I’ll swith back to Roboto then.
Thanks again for your help!

Post count: 494

Simion,

1/ When I change the font size in Theme Panel > Theme Fonts > Post elements > BOX AUTHOR DESCRIPTION then the font size of the description doesn’t change on the Author page. In a way it makes sense as it’s supposed to change it for “post elements” but then how to change the font size of the description of the author on its page?
Here is an example: https://www.mondeoz.com/author/yann/

2/ How can I change font size and line height for the captions of images on Mobile (and mobile only)?
Here is an example: https://ibb.co/LCB93H2 (for the post https://www.mondeoz.com/destinations-voyage/bons-plans-sortir-barcelone/)

Thanks

Post count: 494

An additional question:

3/ I changed the font for pages (from Helvetica to Roboto) but the pages are still showing text in Helvetica while posts were updated. I also changed the font color for both of them but pages remain with the old color, definitely not the one set in Theme colors > Pages.
Here is an example: https://www.mondeoz.com/politique-de-confidentialite/ where the font should be Roboto and the page text color #333333

Any idea why and how to fix it?

Thanks

Post count: 20688

Hi,

1. That doesn’t have a font setting in the theme panel, if you want to modify the description font in the default author page template, it could be dome with some CSS
http://prntscr.com/oadqzr
If you need help with it let me know. Here is the code used in the emxample

.author .author-box-wrap .desc {
font-size: 15px;
}

2. I see the mobile theme is active, you could do that with some CSS as well, for example
http://prntscr.com/oadtrt

.wp-block-image figcaption {
font-size: 15px;
line-height: 26px;
}

The mobile theme has a dedicated custom CSS section, so the codes entered there will apply only to it – http://prntscr.com/oaduv3
If you need help with it let me know. I should note that in coming updates the mobile theme (which currently does not have any font settings) will receive font settings in the theme panel.

3. That is not actually Helvetica, this font is not being loaded. So the next font in line in the font family is loaded – http://prntscr.com/oadw1nhttp://prntscr.com/oadw9k
Please edit the page with the tagDiv composer, click on the text elements and choose different fonts and colors as you want – http://prntscr.com/oadxka and they should apply properly.

Let me know.

Post count: 494

1/ and 2/ worked perfectly. Thank you Simion!

About 3/, it’s supposed to be Roboto, not Helvetica or another one in line. Well, it’s not a big deal as the only pages are the Legal ones but I’d prefer to change it once in the theme panel (as I did) rather than having to change it for any block (even if, I know, I can apply the same style with a right click). Anyway, I can live with it.

Once again, thank you very much Simion for your precious help!

Post count: 20688

Glad to help. Regarding the font, I still see this font family set to load
http://prntscr.com/oaudqx
If you have changed the font in the composer – http://prntscr.com/oaue6i it should be seen on the front end. Could be a caching issue if you use one, maybe try to clear it then check again.
If you want us to take a closer look at it, please send us an email at contact@tagdiv.com and provide admin login. Include a link to this topic in the email. Let me know.

Post count: 494

Hi Simion,

On mobiles, you gave me a custom CSS to fix the font issues on the picture descriptions:

.wp-block-image figcaption {
font-size: 11px;
line-height: 15px;
font-style: italic;
}

It works well on standard posts like https://www.mondeoz.com/destinations-voyage/week-end-a-athenes/

But, when the post is a list, it doesn’t work. Here is an example: https://www.mondeoz.com/destinations-voyage/plus-belles-plages-de-corfou/

I’m talking about mobile version only.

Can you kindly help?

Thanks

Post count: 494

Here are two screenshots:
Picture description ok: https://ibb.co/6DXyKT6
Picture description NOT ok: https://ibb.co/bWMNVrY

Thanks

Post count: 18283

Hello !

Please add this css code too for lists: .tdm_smart_list_1 .td-sml-caption {
font-size: 11px;
line-height: 15px;
font-style: italic;
}
}

Thank you !

Post count: 494

And it works!
Thanks Vlad

Viewing 16 posts - 1 through 16 (of 16 total)
The forum ‘Newspaper’ is closed to new topics and replies.