Font Import - I'm doing something horribly wrong

CoraBlue

I'm attaching the file.

I imported a working compatible font (I've installed it to my OS and it's peachy).
If I have the font installed to my OS, it works, because it pulls it from there.
If I remove it and test the embedded version, it doesn't work.
I believe all my CSS is in order.

However believing doesn't seem to be good enough. XD
This seems so simple, but what am I doing wrong?

#customfont {
font-family:customtest;
font-size:24pt;
line-height:150%;
}

<span id="customfont">Why isn't this working?</span>

All styling is applied except for the font.

L

I had a look at the SVG font file itself, and it seems to, uh, not be entirely valid XML? Hmm.

Also, just as a heads-up: two significant browsers do not render SVG fonts at all, at present.

CoraBlue

Okay. I did convert the font to TTF and reimport it. It does work. But I can't seem to import any svg fonts reliably. It's not a big deal for me personally though, as you said, the aren't supported in FF. Thanks for the tip, L.

CoraBlue

EDITED: L, just to inform you, I've been testing this out, and though I don't pretend to know what's going on, there is something making font import extremely unreliable. I've been testing mainly pixel style fonts so this could be my problem.

mth

What are you using to load the font data? Something similar to the fragment below: (generated by Google Fonts)


@font-face {
font-family: 'Allura';
font-style: normal;
font-weight: 400;
src: local('Allura'), local('Allura-Regular'), url(http://themes.googleusercontent.com/static/fonts/allura/v2/vepcd74zyZuQXtgnV3VOrg.ttf) format('truetype');
}


CoraBlue

The source is a font to base64 converter that runs (I assume) inside Twine architecture. So the source is a bunch of auto generated base64 code.

So here's the affected font I referenced earlier (obviously not all of the code, it'd be huge). This seems to occur if the font contains spaces, but I can't be 100% sure.

@font-face {
font-family: "pf_arma_five";

src: url(data:application/font-ttf;base64,AAEAAAAQAQAABAAAT1...

mth

application/font-ttf is not an official mime type; application/x-font-ttf (the "x-" indicates a non-registered type) would be safer. I doubt this is the cause of the issue you're experiencing, but it would be good to have it changed in the tool to avoid compatibility issues with picky browsers.

Font family names with spaces in them work fine for me, in Firefox and in Konqueror's WebKit mode. Which browser are you using? In particular IE is a bit slow in picking up modern web features, for example in IE8 data URLs are limited to 32K, while most fonts will exceed that limit.

CoraBlue

Then I have no idea what it is, but you seem to know what you're talking about. I have quite a few fonts that don't work. Do you think you could take a look at one? Maybe it's my machine/configuration? Maybe it hates bitmap style fonts?

Attached.

mth

I tried the font you attached. It works fine in Konqueror (WebKit renderer, like Safari and Chrome), but doesn't work in Firefox.

In Firefox, if you right-click and choose Inspect Element from the context menu, the debugger is opened. In the debugger, click on the Console tab to see logging. I got the following error message in the log:


downloadable font: table 'vhea': failed to parse table (font-family: "PF Tempesta Seven" style:normal weight:normal stretch:normal src index:0)
source: data:application/x-font-ttf;base64,AAEAAAAQAQAABAAAT<snip>


So there is something inside the font file itself that Firefox doesn't like. I don't know anything about the insides of the TrueType format, so I have no idea what a 'vhea' table is. But in any case, the problem is either that the font file contains out-of-spec data or Firefox' font parser has a bug. Microsoft made a font validation tool; I haven't tried that myself (I don't run Windows), but it might help in figuring out whether it is the font or Firefox that is wrong here.

You could try importing the font in a font editor and exporting it as a new TTF file; that might cause some internal data structures to be recreated. Or try to find someone who knows how the TTF format works internally, for example on Stack Overflow a somewhat similar question was asked and it got detailed technical answers.

CoraBlue

Thanks mth, you've been a big help. Ive done a few conversions as suggested and some of them are now working. For the record, I've been having this issue in Chrome, but if its in FF too it explains why neither worked.

mostly useless

Hope you don't mind me piggybacking on this one. I want to install a google font. I'm looking at the FAQ:

=font]http://twinery.org/wiki/frequently_asked_questions?s[]=font

Which states:

[quote]You should install the @import CSS code that it provides, instead of the Javascript or HTML code. Also, if you wish to use multiple fonts, you should, for convenience, add them all to a 'collection' while browing GFonts, and obtain the code specific to that collection.

Once the @import code is installed, you may use it in CSS or HTML as in the above.

And I've found the @importcode - In this case it's @import url(http://fonts.googleapis.com/css?family=Hammersmith+One);

But how do I actually install this in the Twine IDE? Do I put that code in some kind of file? Thanks.

mth

Put it in a passage and tag it with [stylesheet] to indicate it is a CSS fragment.

mostly useless

So simple! D'oi. I do think that FAQ excerpt could be made a little more transparent; 'insert the @import code into a stylesheet' rather than 'once it is installed'. Thanks!