Changing Font style and color

Crome54

Ok, tried the example that was given in customCCs basics but I'm messing up.  I'm looking to change my fonts globally to Comic Neue (goggle fonts) and i would like to change the color of the basic fonts to indigo (4B0082)  If someone could give me a script or whatever you call it) i would really appreciate it.

Also is this a particular programming language?  if so how can i lean the basics?  any links, videos or resources would be greatly appreciated.  I would really like to learn this. 

thanks in advance

 

 

 

Abersade

You would be looking to learn CSS. Allow me to not-so-subtly plug my testbed site which includes some of the CSS fundamentals as well a bunch of examples of CSS code that works for Obsidian Portal:

https://abersade-testbed.obsidianportal.com/wikis/css-help-main-hub

To go further in depth, I highly recommend W3schools: https://www.w3schools.com/css/

Abersade

Strictly speaking CSS is not a programming language. Some would argue that this is because it can't do most of the things that a programming language can do. I would argue that it's not a programming language because programming languages (C++ excluded) aren't usually created by demons looking to torture developers.

Jokes aside: while it's not a programming language that doesn't mean that it's particularly easy to learn or intuitive. If you really want to get comfortable with CSS be ready to do quite a lot of head scratching while you puzzle out why something doesn't work right away. That said, CSS can be quite rewarding and really helps sites on OP look amazing.

Abersade

For the CSS code you need to specifically do what you are asking, start with the code below. This should cover most of your request, though I'm unsure of what you consider to be 'basic fonts' so something may not have been covered.

#content {font-family: "Comic Neue";}

.wiki-page {color: #4B0082;}

Crome54

hey, I've been busy and I havent had a chance to check this but thank you for your response

Abersade

Of course! If you do need any additional assistance please let me know.

Crome54

Thanks that was really helpful.  how do i increase the defult font size as well?

Crome54

Thanks that was really helpful.  how do i increase the defult font and change the font for the headers?

 

Crome54

This is the font and color.  i would like it a bit larger (not much) and change the headders to the same Font?  I wish i had more time to put into this

 

#content {font-family: "Centaur";}

.wiki-page {color:#331611;}

Abersade

So, default font size can be pretty straightforward and since you didn't really specify what you meant by default... Something like:

body {font-size: 125%;}

That embiggens all of your fonts, making them 25% larger than before. Do NOT do what I did to test, which is to make all of my fonts on my test bed site font-size: 10%, which was very hard to read. Note that this was a particular issue because it changes all of the fonts on the front and back ends, including the CSS entry field, and the save option.

Abersade

Headers, if you know the size already, can be target using h1, h2, h3, h4, h5, and h6. I think it's h6 for the smallest one. Then it would be the same sort of thing, except this time it would look like:

h2 {font-family: wingdings;}

For the love of all that is holy, please don't use wingdings.

Abersade

I combined the two to hilarious effect here:

Abersade

Actually that was a lie, I upped the font size to 15% for the sake of the picture because otherwise the header is so small you can't tell it's in wingdings.