Tutorial - MD and fancy fonts

[Ary Endleg]

Custom fonts 101
 
This is tutorial on how to use custom fonts for your profile or papers.

Everyone can use a set of web safe fonts without any problems. You can check list of them here. But what if you want to use something nicer than those? Well in reality you can put name of any other font instead of above listed safe web fonts. However it will only work if person who is reading your papers has that font installed on their computer. So how do you solve that problem to allow everybody to see your fancy letters without making them install our font? There are few solutions. Font can be streamed from any webserver that is configured to allow this. Most notable, easy and free way to do this is to check if there is font you need on google fonts. Other way to do this is if font is already available on same domain on which you are using it. Since we play MD and we need it for our papers and profile that means font needs to be on MD server too. So let's see how does this stuff work.

Google fonts

If you go up there you can browse many fonts and if you find something you want to use you just click "add to collection". When you're done you click "use" in lower right and there you have it with everything explained in there. In short you just check if you really want to use all those fonts in step one, step two don't touch anything. Step three gives you code to add so you copy code from "Standard" (example)

<link href='http://fonts.googleapis.com/css?family=Share+Tech|Underdog|Joti+One' rel='stylesheet' type='text/css'>

into html view of your paper, paste it at beginning. Step four tells you how to use those fonts. (example)

<style> span { font-family: 'Joti One', cursive; } </style>

This code will make all text inside all span tags use that font. If something happens to google server it uses cursive as fallback font. You place it also somewhere at the top, after the code from step three. Or you can directly add it to specific html element inside style attribute. For example like this.

<p style="font-family: 'Joti One', cursive;">

Available fonts on Magicduel
 

Ann. 2811 - [2013-10-27 17:39:12 - Stage 12] Posted By Chewett
Fonts can be used to make your papers unique the problem is that for the most part they need to be installed on the users computer otherwise they wont work. You can embed the font in the page so it always displays. Google offer a number of free fonts that are easily embedded that you can use. If there is a specific font you want we will consider uploading them on a case by case basis. Currently there is one font uploaded to MD for your use and soon we shall make a list and a guide how to use them.

You can also use fonts that are uploaded on MD and you can ask Chewett personally to upload the ones you want. I will use this one font that is currently alone up there for examples and also you can see that font used on my papers. In order to use this font you need to add following code to the beginning of your papers in html view.
 

<style>
@font-face {
    font-family: 'Nelson Script';
    src: url('../fonts/Nelson Script.eot');
    src: url('../fonts/Nelson Script.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Nelson Script.woff') format('woff'),
         url('../fonts/Nelson Script.ttf') format('truetype'),
         url('../fonts/Nelson Script.svg#nelson_script_largeregular') format('svg');
}
</style>

After you did this, you can use font normally just like any other, I explained it a bit above at end of google font chapter. In short you can for example make css rule like this to make all span elements use this font for example:

<style> span { font-family: 'Nelson Script', cursive; } </style>

or something like this to apply it for specific element inside your papers for example one of paragraphs:

<p style="font-family: 'Nelson Script', cursive;">

NOTE: Nelson font doesn't have glyph for ' if you are using this font use ´ instead.

What do you need to provide if you want your font uploaded to MD so you can use it? You need to send your font in .ttf .eot .woff and .svg file formats to Chewett. Since you will probably have only ttf format of your font you need to convert it to other formats so that you can provide all of them which are needed. To do that you can use FontSquirrel where you just add your font from your computer select Expert, check ttf, woff, svg and eot lite font format options and leave "font name suffix" empty. You pretty much shouldn't touch any other options but if your font is handwritten it's very important that you leave "remove kerning" unchecked. After he has agreed to this and uploaded it, you can use them just like in example above. Only thing you change in the code is file name of your font and font-family name. Once that is done it's ready for use.
 
That's it, if you got any questions post bellow. Edited November 30, 2013 by Ary Endleg