Customizing your page: Fonts

As you may have figured out, your page is customizable! You may have already found the layouts section, and while they can be quite impressive, I think it's more fun to do it yourself! It took me a while to figure out how to do it, so I'll be posting about how to do different customizations.

When doing any type of simple styling on your page you should start with:

<style>

</style>

These tell the website that you're styling the page. The '/' tells it that it's the end of the styling. You'll want to put any of your code in between these two lines.

Next, you'll add code to tell the website where you're editing. For fonts there are two different places you can change: either the 'body' (which will change the font of the entire page, including all the buttons at the top and the little bottom section) or the 'main' (which will change the font of only your profile). You also need to add fancy brackets to this one, where you'll put more code later. It's almost like the part outside the brackets is the 'where' and inside is the 'what'. I'll use the 'main' for my examples.

main {

}

(The placement of the brackets is how code is usually written. We just go with it lol.)

Next is telling the website what you're specifically changing. In this case it's the font. 

Quick mini-history lesson so the next part makes sense. In the olden days when people printed things on paper there were different metal letters they could use. They had these in different sizes, some were bolded, some underlined, etc. To make things easier for the printing people they needed to categorize each different thing. They went as followed:

Typeface: how characters look (not size, boldness, italics, etc.). Ex. Arial

Font: how characters look with a certain typeface as well as some extra characteristics (size, boldness, italics, etc.). Ex. Arial, size 20, italic.

Once things started to move digitally they had a bunch of files for every single different combination of font, and that just wasn't going to work. They then created 'font-families' to group together each typeface with each combination of extra characteristics. For example, the Arial font-family file would have every size of arial, the thickest possible arial, the thinnest possible arial, thick and italicized arial, underlined arial, and on and on! 

To help our computers know what to use, we write "font-family" in our code so that it has access to the typeface we want, as well as any extra characteristics if we want. This is how it'll look:

font-family:

When it comes to fonts not all computers will be able to show every font. Luckily there is a solution! You can choose a few fonts, that way some people won't be left with a default font to look at. You can look up "fonts css" to find lists of different font families available. It's also good to have some more simple/basic font families in your chosen list, as they're more likely to be seen by most people. You'll use all these fonts in your code, in a list of preferred to least preferred. If a computer isn't able to show your first font, then it'll move to next. If it can't show that, it'll go to the next and so on. For my examples I'll use verdana and arial:

font-family: verdana, arial;

For code with two fonts it should look like this:

<style>
main {
font-family: verdana, arial;
}
</style>