CODEWITHSUNDEEP
cssbootstrap-4
Romi
Romi

Reputation: 161

How to change the font type for the entire website in Typo3

This might be due to the fact that I am a beginner in Typo3 and do not have a good grasp on its structure, but I cannot seem to be able to find where to change the font used across the whole website.

I have tried adding this to the css file of my extension:

html {
    font-family: "Times New Roman", Times, serif;
}

But the font on my website does not change to Times New Roman.

I'm also using bootstrap by including it in setup.typoscript, in case this makes any difference.

The source code of my webpage shows that it is using the following css files (where I added the code above to the file mentioned in the second line):

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" media="all">

<link rel="stylesheet" type="text/css" href="/typo3/typo3conf/ext/myextension/Resources/Public/Css/layout.min.css?1557481820" media="all">

Upvotes: 0

Views: 1229

Answers (1)

Riccardo De Contardi
Riccardo De Contardi

Reputation: 2148

Your problem here happens because Bootstrap overwrites your font-family definition for the <html> tag; it applies a different font to the <body> tag, and it is independent from the usage of TYPO3 as CMS.

You can check it by inspecting the DOM with Chrome or Firefox Inspector.

To avoid it, I think you have a couple of options

  1. Use a custom version of Bootstrap instead of the one from the CDN, you can compile it from its scss files

  2. Overwrite Bootstrap rule, for example with something like:

    body {
  font-family: "Times New Roman", Times, serif;
}

this should be sufficient, as your CSS is loaded after Bootstrap in the code.

Or even use an higher specificity rule, for example:

   html body {
      font-family: "Times New Roman", Times, serif;
    }

Upvotes: 1

Related Questions