Serif not working when fonts change in style.css

[DougManuel]

The option to toggle between sans-serif and serif using the font-setting button doesn't work when I change the fonts in style.CSS. Any suggestions?

See StackOverflow: https://stackoverflow.com/questions/59336752/serif-not-working-when-bookdown-fonts-change-in-style-css

The issue seems to happen in a range of examples of published bookdown sites. The issue can be reproduced using other CSS examples, such using: https://github.com/hebrewseniorlife/bookdownThemeEditor

See also:https://stackoverflow.com/questions/29274501/r-markdown-changing-font-size-and-font-type-in-html-output

This seems to happen when I change fonts for the main text, such as:

_output.yml

bookdown::gitbook:
  css: style.css

style.CSS

p {
  font-family: Arial;
}

But not all text changes. For example, if you change just the font for lists, the button still works fine.

style.CSS

li {
font-family: Arial;
}

The button itself seems to work fine, toggling between the class .font-family-1 = sans-serif and .font-family-0 = serif

[cderv]

Currently, I think what you are observing is the expected behavior of the fontsetting gitbook plugin.

The button itself seems to work fine, toggling between the class .font-family-1 = sans-serif and .font-family-0 = serif

When you click on the button, the html root node of the book change class between .font-family-1 and .font-family-0

What do you want to achieve ? Unfortunately, it is not clear for me.

Do you want to change default font-family used for the book or do you want to specifically apply to <p> tags a different font-family (as your example suggest...)

I believe the former can be achieve by using custom css to override the default which is

.book.font-family-0 {
  font-family: Georgia, serif;
}
.book.font-family-1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

The button will change the class to the root not of class .book and apply the css to the all book.
By the way, this is what the package bookdownThemeEditor is doing

For the latter you would need to use more css rule, to apply for each tag under the element of class .font-family-*. Something like this should work

.book.font-family-1 p {
  font-family: Calibri, sans-serif;
}

.book.font-family-0 p {
  font-family: Cambria, serif;
}

This way by toggling the serif or sans button, this will change the css applied to all p nodes under the book root node that just changed class.

I am not sure if it is clear - not easy to explain :)

Is this what you are looking for ? Did you already try playing with css like that ? As you try to modify a format with heavy-use of CSS and JS already, it is not easy to correctly find what should be modified and how. Reading the source code may help sometimes.

Hope it helps.

[DougManuel]

Thanks! Your suggestion works.

.book.font-family-0 {
  font-family: Georgia, serif;
}
.book.font-family-1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

I was looking to change either sans-serif or serif font in the main body and preserve the function of the GitBook font button.

Most suggestions to modify fonts don't maintain that function because they suggest modifying classes such as .book .book-body .page-wrapper .page-inner .normal. It looks like these previous suggestions probably change the font for both classes .font-family-1 and .font-family-0, thereby breaking that button's function.

[github-actions]

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.