ID:1585393
 
Keywords: custom, font, text, web, webfont
(See the best response by DarkCampainger.)
The new fix for custom fonts mentions webfonts, I looked up what these were (with the general assumption they're font-faces hosted online for shared use). Do they require javascript to be ran to use them in byond?

I'm not sure how to use web-fonts, to be more clear, could anyone shed some light?

This is what I got so far:


client/script = {"
<head>
@import url(http://fonts.googleapis.com/css?family=Allura);
@import url(http://fonts.googleapis.com/css?family=Coming+Soon);
</head>

<style>
.signature {font-family: 'Allura', cursive;}
.crayon {font-family: 'Coming Soon', cursive;}
</style>"}

Best response
I've always found HTML5 Rocks to be a good resource for this type of thing, and sure enough they have a great article on it:
http://www.html5rocks.com/en/tutorials/webfonts/quick/

You can probably use browse_rsc() to send the font to the browser, instead of hosting it on the web, but I'm not 100% sure if that'll work.

Also, it looks like you'll have to convert your font to EOT format to use it with IE7. The article above recommends Font Squirrel for converting it.

Once you've got your font in the user's browser cache, you just have to use some CSS3 to take advantage of it:
{"
<html>
<head>
<style type="text/css">

@font-face {
font-family: 'MyAwesomeFont';
src: url('MyAwesomeFont.EOT');
}

h1 { font-family: 'MyAwesomeFont', serif; }

</style>
</head>
<body>
<h1>This text is in MyAwesomeFont!</h1>
</body>
</html>
"}


No JavaScript required, unless you see a "Flash of Unstyled Text", which you shouldn't if you use browse_rsc(). The article covers this too.

<edit>
This article suggests that you might need to use a hack to support IE6-8. Might be worth trying:
{"
@font-face {
font-family: 'MyAwesomeFont';
src: url('MyAwesomeFont.eot'); /* IE9 Compat Modes */
src: url('MyAwesomeFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
}
"}
So I'd need to download the font file like before? What would be the point to using a webfont - and it says specifically to use them since the fix doesn't apply to browsers. I'm kind of confused.
Yes and no. The font has to be a part of the client's browser session. It's sort of installed automagically by their browser when it's required via CSS.

I did some experimentation with webfonts in the browser a while back, and I did in fact, have quite a lot of trouble with them. They worked fine, however, I was attempting to create a pixel-perfect font to get away from bitmapfonts in-game.

It worked, but not to my needed specifications. Instead, I wound up writing some javascript to use a single image as a bitmapfont.
In response to Jittai
Jittai wrote:
So I'd need to download the font file like before? What would be the point to using a webfont - and it says specifically to use them since the fix doesn't apply to browsers. I'm kind of confused.

The fix was for fonts loaded directly into the Windows OS for maptext. Using browse_rsc() still has the font being loaded through the IE browser, just the file is provided more directly.

If you pull it from the web, then A) your user needs an internet connection (not always the case for single-player games) and B) you'll get a "Flash of Unstyled Text" while waiting for the font to download.

You're still technically using a webfont, it's just that you're supplying the font file directly to the browser cache instead of having the user download it. Anyway, you'd have to try browse_rsc() to see if it would even work. I'm 90% sure it should, but fonts can be kind of finicky.
It appears DM can't find the EOT files that are in the directory. They're both in a interface folder, so I'm trying both ways, and both files can't be found.

client/New()
..()
src << browse_rsc('interface/EraserRegular-webfont.eot')
src << browse_rsc('scriptina-webfont.eot')


client/script = {"<script type="text/css">

@font-face {font-family: 'scriptinaregular';src: url('scriptina-webfont.eot');src: url('scriptina-webfont.eot?#iefix') format('embedded-opentype');}
.signature {font-family: 'scriptinaregular'}


@font-face {font-family: 'eraserregular';src: url('EraserRegular-webfont.eot');src:url('EraserRegular-webfont.eot?#iefix') format('embedded-opentype');}
.crayon {font-family: 'eraserregular'}

</style>"}
It's unfortunate, I've never been able to get Webfonts or TTF to work in BYOND. I try it every few months when alleged fixes are in and always hit the same issue.I would have loved to use some fancy TTF for certain specie languages in SS13.
In response to Jittai
Webfonts are for the browser. I think client.script is for output controls and macros, but it's kind of outdated (since you can use interface files instead).

Are you trying to use them in an output control or a browser?

Output controls still work like they always have. You just have to mention the TTF file somewhere in your code in single quotes so it's included in the RSC, and then you just reference the font-family name (NOT the file name) when outputting text. In Windows 7, if you right-click on a font file, and go to Properties -> Details, the family is listed under "Title".

For browser controls, you have to use webfonts, and include the style definitions with your browser output.

Since people seem to be having trouble with this, here's a working example of using a custom font in an output control and a browser:
http://files.byondhome.com/DarkCampainger/ Webfonts_Example.zip
Browser, and thanks. I'll take a look at it.
You're example works- but the SS13 source I'm working on it does not. So I'm going to have to dive into this side, thanks for the help though.

For some reason its refusing to accept these files exist.
Yeah, I'm at a loss. The same code works fine in DC's test environment but not in the ss13 environment.

What would cause it to not be able to identify the files in question? The preferences are set to 'find' files with out full paths, and the exact code works fine in a fresh environment.