Changing Fonts and Fonts Sizes through custom CSS

TYPO3 Questions TypoScript
1

Hi, I am totally new to TYPO3 and feeling a little lost. I have been passed a site built on TYPO3, most of it looks good design wise. I have been creating some new pages and moving some content around and it is all working well. For me, the headings are just too large and I’m not a big fan of the font choice. I have created a css file with the new font family and font size declarations which I have uploaded to my file admin, the in the TypoScript setup added the following

page.includeCSS.custom = fileadmin/css/fonts.css

Nothing changes. Am I going about this the wrong way? Some pointers in the right direction would be much appreciated.

2

Hi James,
welcome to TYPO3. Please give a little more information.

What version do you have?
Where do you insert page.includeCSS.custom = fileadmin/css/fonts.css?
What is the content of font.css?

Have you seen this example in the documentation?

Regards
Robert

3

Hi Robert,

Thank you for getting in touch. The site is running version 12.4.13. I have inserted the page.includeCSS.custom = fileadmin/css/fonts.css in to the TypoScript records, in the setup on the main page.

My css file currently just holds the following

.header {

  font-size: clamp(1.75rem, 3cqi, 2.3rem);

font-family: Open Sans, Helvetica, sans-serif;

}

4

Maybe it would be clearer to me if I had set up a site myself, I don’t really understand how the style declarations are made in the setup. I thought as I was only making relatively small changes I might be able to do this without going too deep.

5

Hi James,
please try

page = PAGE
page {
10 = FLUIDTEMPLATE
includeCSS {
fonts = fileadmin/css/fonts.css

}
}

header instead of .header. And don’t forget to clear the cache.

BTW it’s best pratice to have custom css in a sitepackage.

includeCSS {
sitepackage_layout = EXT:my_sitepackage/Resources/Public/Css/fonts.css
}

6

Hi Robert,

Unfortunately that didn’t work, after adding your code the site stopped rendering all content except the footer. I had understood from the documentation that it would be better to change the values in the sitepackage, I don’t know how to access this or make changes.

Where should I include this?

includeCSS {
sitepackage_layout = EXT:my_sitepackage/Resources/Public/Css/fonts.css
}

7

Please give me the code of your setup typoscript.
If you give the URL of your website I can check it in the browser.

Is it a composer installation or a classic installation? Depending on this there are different places for a sitepackage.

8

Hi Robert,

This is the website - https://www.domaine-fontanille.com/

I am happy with the H1 elements with the class title, the H2 and H3 elements with the class header are just too big.

It is a composer installation, I have no experience with composer and although I can find plenty of information on how to create and build a site, I don’t really understand how to use this with a site that already exists.

9

Thanks for the URL to the website. The website uses tailwindcss v3.4.1. So you don’t have a traditional hand-coded CSS file, but rather a fully automated build process using Nuxt, Vite, and Tailwind in combination with shopware.

Try to find tailwind.config.js and change
module.exports = {
theme: {
extend: {
// add own values
}
},
plugins: [
plugin(function({ addBase }) {
addBase({
‘h2’: { fontSize: ‘1.5rem’, fontWeight: ‘700’ },
‘h3’: { fontSize: ‘1.25rem’, fontWeight: ‘600’ },
})
})
]
}

Unfortunately I’m not really familiar with this kind of installation..

10

Hi Robert,

Thank you so much for your help. I will see what I can do.