Change font type

Authoring Twine
1

Twine Version: 2.8.1.0
[Sugarcube]
Hi. I’ve been trying to change my passages font type, but I can’t manage to add new fonts from Googlefonts. I can change the font outside the passages (UIbar), but inside the passage it only change when I select default fonts (Arial, TNR).
Here is my CSS:

@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');

.passage {
  margin: 2px solid white;
  width: 100%;
  /* Inner margin within the box */
  padding: 10px 0;
  /* Text formatting */
  color: white;
  font-size: 20px;
  font-family: 'Rowdies';
  font-weight: 300;
  font-style: normal;
  text-align:justify;
  position: relative;
}

Thanks!

2

Your code seems to work when I test it.
‘a’ characters in the UIBar and in the passage are different.

3

Same as with souppilouliouma, the font changes.
Is there maybe another code before this one (like something not coded properly) or down the line (either another .passage {} or in the passage itself) that could affect this?
Do you have an extension on your computer than changes the font/formatting of the page you’re visiting?

I think you mean border here.
The margin is something different… (it puts a space next to the element, like a margin on a page).
(also the font family should be coded: font-family: 'Rowdies', sans-serif;)

4

Weird. I try with different browsers and it still doesn’t work.
Here is the code I have before .passage:

html {
  /* Vertical colour gradient */
	background: rgb(6,20,1);
	background: linear-gradient(48deg, rgba(6,20,1,1) 0%, 		rgba(9,121,31,1) 100%);
  	background-attachment: fixed;
}
	
body {
  /* Remove default styles */
  background-color: transparent;
  margin: 0.1p% 0 0 0;
  font-size: 100%;
  /* Used to center the box */
  text-align: center;
}

#story {
  /* Box background */
  background-color: DarkSlateGrey;
  /* Border */
  border: 2px solid black;
  /* Rounded corners */
  border-radius: 1em;
  /* Box width */
  width: 75%;
  /* Center the box */
  display: inline-block;
  min-height: 100%;
  margin-bottom: 1%;
  margin-top: 1%;
  padding: 1px;
  position: relative;
}

When I use font-family in the html, it works for the left bar, but not for inside the passage.

5

I’ve tried to add your full code, and it seems you need to place the import command as the very first instruction in your css.

6

Yes, it worked!
Thanks!