external fonts include + solution

Asked by KaOS-bEat on 2010-07-07

Hi,

I just discovered and tried the presentation tool, and I immediately bumped into a problem (OSX 10.6). My font displayed in inkscape was different from my font in the browser on the same computer. I came up with a solution that is even portable between browsers and computers so the fonts will always be consistent.

I'm using google webfonts as font repository here. The API will adapt the code for different browsers so fonts look the same no matter what browser you are using. http://code.google.com/apis/webfonts/
In this http://skitch.com/kaosbeat/dmp9u/datamodel.svg screenshot you can see how I just pasted the

 <style>
  @import url(http://fonts.googleapis.com/css?family=Lobster);
  </style>

in my inkscape file, and reopened it in inkscape. I made sure I did not have the font installed locally. It does not display inside inkscape, but off course I can just install it locally so I have a preview in inkscape too(tested and working). I just wanted to make sure the font is remotely fetched from within the svg file.

I gave my text font the name Lobster,
saved it,
opened it in chrome and bingo! shows up fine in the browser

I'm not sure how this can be easily implemented, for now I'm gonna use it like that though. Other options could be embedding font or converting them to svg-fonts with a tool like http://xmlgraphics.apache.org/batik/tools/font-converter.html or http://www.fontsquirrel.com/fontface/generator

Bottom line, if you want to share your presentation you want it to look the same crossplatform/crossbrowser

hope this helps

Kasper

Question information

Language:
English Edit question
Status:
Answered
For:
JessyInk Edit question
Assignee:
Hannes Hochreiner Edit question
Last query:
2010-07-07
Last reply:
2010-07-29
Launchpad Janitor (janitor) said : #1

This question was expired because it remained in the 'Open' state without activity for the last 15 days.

Hi Kasper:

Sorry for the late answer. Thanks a lot for the detailed description of how you used web fonts in JessyInk. Since fonts are a big issue, I very much appreciate your insights. So far, the best solutions I have seen were to convert all text to paths (obvious issues with the size of the presentation and later editing) and only using "standard" fonts (which is quite limiting).

I'll try and find some time in the next few weeks to write up some documentation on the whole fonts issue.

Cheers,
Hannes

See last message.

Alex (cardigan99) said : #4

Is there any progress on this issue / solution?

KaOS-bEat (kasper-jordaens) said : #5

@Max
the solution outlined in the first post works great. It does require manual editing of the file, but it is just one line!

Kasper

Alex (cardigan99) said : #6

@Kasper

Thank you! Looks like that for now i will follow your way which looks the best option for now. Am i right saying that this way requires you to have an internet connection everywhere you show your presentation? (to be sure that font is grabbed from the google server)?

Alex

Alex (cardigan99) said : #7

I created a related question ( https://answers.launchpad.net/inkscape/+question/211263 )on this issue asking whether such a feature is planned in future since InkScape seems to be spreading very fast so people want all types of cross- functionality (cross-OS, cross-programs and cross-...places : ) )

KaOS-bEat (kasper-jordaens) said : #8

@Alex,

the font i to be grabbed of the google server indeed, in this example. Nothing prevents you making local references (didn't say it was user friendly) allowing offline presentations....

Kasper

Alex (cardigan99) said : #9

Maybe this question+solution can go into FAQ?

Alex (cardigan99) said : #10

@Kasper

do you know if such local references are allowed to fonts installed in the OS or i can put .ttf file in the same directory (let say) as svg file? I'm really not experienced with font management so excuse me for stupid questions :)

Can you help with this problem?

Provide an answer of your own, or ask KaOS-bEat for more information if necessary.

To post a message you must log in.