Changing default font

Hi,

thanks for your post, and sorry for the trouble.

TablePress doesn’t influence the default font family, so my guess is that this is done by your theme or another plugin. Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Changing the font is possible with CSS code, please see https://tablepress.org/faq/change-font-family-size-color/ for an example.

Regards,
Tobias

This is one example
https://nomadicfire.com/cost-of-living-in-da-nang-vietnam

What the table looks like
https://i.imgur.com/p3DFqhm.jpg

Thanks in advance for the assistance.

Hi,

thanks for the link.

From what I can see, the table head cells have the font “Arial”, which is defined for the full site by the theme.

For the table body cells, you have designated the font “archivo”, from what I can see, with the CSS code

.tablepress tbody td {
    font-family: archivo;
    font-size: 12px;
}

Are you actually loading that font on the page? If not, you should remove that CSS code.

Regards,
Tobias

Strange. Not sure where Arial is coming from, but regardless I changed it using your code below. I did have one follow up. The table picks up my theme font styling for links, but I’d like to change the font size for links. I found this in a previous help post, but it’s not working for me. Am I using the CSS correctly to change the link font size? Thanks in advance.

.tablepress thead th {
															font-family: tenor sans;
															font-size: 14px;
														}

														.tablepress tbody td {
															font-family: montserrat;
															font-size: 12px;
														}

														#main .tablepress td a {
															font-size: 12px;
														}

Hi,

please try without the #main in the CSS. That’s not necessary for your site.

Best wishes,
Tobias

Remove the #main, but no change.

https://i.imgur.com/ALdYDGd.jpg

View post on imgur.com

Thank you again.

Hi,

it looks like something is wrong with the closing } parentheses in some of your CSS commands (a bit further down in that text area, there are multiple } after each other). This also leads to this wrong indentation, which you should clean up by removing the stray }.

Then, please also make sure to flush the cache of the “litespeed” caching and optimization plugin that you are using. It’s also caching the “Custom CSS” again, so that your site uses an outdated version.

Regards,
Tobias

I simplified the CSS and only used the following

.tablepress td {
	padding: 4px !important;
}

.tablepress thead th {
	font-family: tenor sans;
	font-size: 6px;
}

.tablepress tbody td {
	font-family: montserrat;
	font-size: 6px;
}

.tablepress td a {
	font-size: 6px;
}

Purged the cache and used incognito. The body and headers changed size, but the link text did not. Any other ideas?

https://i.imgur.com/CffvuE2.jpg

Hi,

please try using the !important flag then, like

.tablepress td a {
	font-size: 6px !important;
}

(I’m still seeing the old CSS though, so I’m not sure if clearing the cache worked everywhere.)

Regards,
Tobias

That worked thank you.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias