5 Font Family

[Debra Necochea]

Youshould always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.

The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not stop at the first font in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

The name of a font family. This must be either a single value or a space-separated sequence of values. String values must be quoted but may contain any Unicode character. Custom identifiers are not quoted, but certain characters must be escaped.

Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:

Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letter work.

Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.

This is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings.

I suppose you mean how can you change the final font appearance, not the editor one.

To do that, you have to customize the CSS you find in userstyle.css, which is a file used to personalize the appearance of Joplin notes. Its location may vary in different OSs.

And so on. But I expect at least Georgia will succeed, as this is one of the standard fonts on Windows. You are completely free to choose whatever you like. For the viewer (the most right panel) no monospace is required.

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Sorry guys, should have been a little more specific.Yeah James, the text isn't using the font anywhere in the body when I view through a browser BUT if I apply the same font-family to one of my div elements it does???

As for which reset to use it's really a matter of personal preference. I have been using normalize on the last few projects as it's less "harsh" than Eric Meyer's one. I find it useful to have some default margin/padding and list styles and was ending up adding those back in a lot of the time which is why I switched.

Can't believe I didn't notice that when first looking at your code. I think we have all made this mistake from time to time and it can be frustrating. Lots of us are good at CSS but every now and then we forget about the cascading nature of CSS!! Glad you sorted it out.

By the way, I personally use Firebug in Firefox to help avoid this issue. If you view your source and select an element in your HTML, it will show you the styles being applied and classes used. It also shows any styles ruled out that are being overridden by other more specific CSS selectors

I am trying to change the font on a single page on my site using Custom CSS and the page's collection ID. I have been trying to do this by changing the font-family property in the site-wide Custom CSS (since I do not want to change the font for any other pages). I'm not using custom fonts; I am happy to use the Squarespace, but I do not know what the exact "labels" are for these various fonts. Some, like "Arial" are straightforward, but others (e.g., "Libre Baskerville" or "Omnes Pro") do not seem to be changing the font appropriately. Any advice would be helpful! Or even, more generally -- and since I am a novice to CSS -- are there helpful tips for knowing how to convert font names to acceptable arguments for the "font-family" property? The current code I am using is below:

Unfortunately, I have altered my code and it still does not work in changing the font. Below is my attempt to change the font-family property in the site-wide Custom CSS using one of the provided font codes you gave: "adobe-garamond-pro" to change the H1 heading. I've also tried this with the other codes you provided (e.g., "ff-tisa-sans-web-pro"; "brandon-grotesque", "Cabin"), to no avail. Thanks in advance.

In order to use a specific font in CSS, it has to be selected as a font for something else so that Squarespace loads the font onto the website first.

SS has thousands of fonts, by default SS only loads some popular fonts, it can't load all otherwise the website will be extremely slow. In order to use font in CSS, it has to be selected as a font for something else so that Squarespace loads the font onto the website first.

I see, thank you. My goal is to have fonts on this page ( -nick) that are not used anywhere else on the site. What are my options for doing this? How else could I make sure these fonts are "selected as a font for something else so that Squarespace loads the font" without using Design / Site Styles to change the H1 or H2 or body text for the entire rest of the site? Are there other ways to change fonts than Design / Site Styles? Am I missing a rich text editor somewhere? Thanks for your help.

Thank you! This worked. I believe this will be my final question. Your suggestion helped me change the font for the one page for Headings 1 (h1), 2 (h3), and 3 (h3). See code below. However, I was unable to change the "body" text with the same method, and I am not sure why. The code below properly changes Headings 1, 2, and 3, but not the body text. Thanks in advance.

3a8082e126