Forums » Advanced Editor Forum » Read Thread

The usual method of changing fonts is a styled <span> (or similar tag) for a snippet of inline text, or a <style> block for a larger, more automated font change:

<span style="font-family: Vollkorn, Georgia, 'Times New Roman', serif;">Lorem ipsum dolor sit amet…</span>

<!-- OR -->

<style>
body {
    font-family: Vollkorn, Georgia, 'Times New Roman', serif;
}
</style>

Any typeface is fair game, provided the end user has it installed on their system. You can and should specify multiple typefaces (comma separated and quoted is necessary), because there are only a handful of them that are (almost) universally available. At the very least, when you assign a font family you should also specify a generic family to allow the platform to choose an appropriate font as a last resort. Possible generic values are serif, sans-serif, monospace, cursive, and fantasy, but both cursive and fantasy should be used carefully because they vary wildly across platforms.

The encoding on CYS is fickle, so if you want to use certain characters, you'll need to "escape" them with "HTML entities," which are written as an ampersand followed by a text or numerical value and ended with a semicolon. In your case, the entities for ‘single smart quotes’ are &lsquo; and &rsquo;, and “double smart quotes” are &ldquo; and &rdquo;.

An easy way to get around the weird font stuff is to just use an image with whatever font text you want on it.

<span style="font-family: Papyrus, Palatino, 'Palatino Linotype', serif; font-size: 1.5em;"><u>You are a wolf.</u></span>

That stray closing </font> tag should be gotten rid of. The typefaces should be listed from most to least desired; in this case if you're sticking with Papyrus, Palatino isn't a great match, but it's the most similar of the "web safe" fonts IMO. I don't trust the "fantasy" fallback so I'd replace it with "serif."

To change font size, you just add a "font-size" property to the style and separate it from "font-family" with a semicolon. The value I provided, 1.5em, means 1.5 times the size of the surrounding text, but there are other units you can use. 24px, for instance, if you want to set the size to something exact instead of relative.

Yep. The property for text color is simply "color" by the way. There's a set of color names, but you can also use hex values, so "color: red;" and "color: #FF0000;" are both equally valid.