Can i get a link to a "woff2-variations" font format to use that font from a remote server... in Inkscape ? - Beyond the Basics

#1

2023-01-28

*

Here is the story:
On https://design.ubuntu.com/font they say "The Ubuntu font family is a sans-serif typeface family available in 22 styles plus a variable font (...)". I wanted to use this variable font inside my SVG file, on Inkscape. But i found out there is no such thing as Ubuntu-VariableFont_wght.ttf in this downloaded package. And i couldn't find it in /usr/share/fonts/truetype/ubuntu on my LinuxMint. The static Ubuntu fonts are okay, they work, but i can't get a custom font weight. Something in-between medium and bold, for example... I had no trouble with Montserrat, for example, this font family is truly variable. I guess the Ubuntu variable font is just not available for download. Case closed. So, i was stuck at just staring at the https://design.ubuntu.com/font and just playing with their Ubuntu font tester. There, on their website, i get to play with a truly variable Ubuntu variable font, there is a cursor and i can just slide it left or right and see the results! Wonderful ! Try it: https://design.ubuntu.com/font

Here is my question:
Since i can't find a downloadable Ubuntu-VariableFont_wght.ttf, is there a way i could link my SVG file in Inkscape to this Ubuntu variable font currently on display on https://design.ubuntu.com/font ? There is a real, working, variable font there on this website. I looked at their source CSS, and i think i need this:

@font-face{font-family:"Ubuntu variable";font-stretch:100%;font-style:normal;font-weight:100 800;src:url("https://assets.ubuntu.com/v1/f3b9cc97-Ubuntu[wdth,wght]-latin.woff2") format("woff2-variations")}

Or something like this... Do you think that could be possible ? I just want to type one word with this "Ubuntu variable" font and then convert to path. I don't really need to download and install that font.

#2

inklinea @inklinea⛰️

2023-01-28

As far as I am aware Inkscape does not support woff2 fonts.

I found this thread which I had forgotten I commented on.

https://inkscape.org/forums/beyond/embed-fonts-in-svg-files/

I think you would need to do the reverse - convert the woff2 font to ttf

#3

Sébastien Bouchard @SebastJava

2023-01-28

*

inklinea
I think you would need to do the reverse - convert the woff2 font to ttf

Thanks for the quick reply. Yes this is probably more possible. You think there is a way to convert from a woff2 font from a remote server to... a local ttf download ?!

I don't have a deep knowledge of Inkscape, this is pretty abstract to me. So, i went step-by-step. I made this little HTML+CSS test:

<!DOCTYPE html>
<html>
<head>
<style>
@font-face{font-family:"Ubuntu variable";font-stretch:100%;font-style:normal;font-weight:100 800;src:url("https://assets.ubuntu.com/v1/f3b9cc97-Ubuntu[wdth,wght]-latin.woff2") format("woff2-variations")}
h1   {color: blue; font-family: "Ubuntu variable"; font-weight:650; font-size: 144px;}
</style>
</head>
<body>

<h1>linuxmint</h1>

</body>
</html>

Try it ! Just copy-paste this into an empty font-import.html and save. Then open it in Firefox. See ? Now change the values for font-weight to anything in the 100-800 range. Save and refresh the Firefox page. See ? That's exactly what i need. The problem is... i want that in Inkscape ! I know it is possible to insert some CSS styles into an Inkscape SVG document. But i am not sure i could get my custom CSS to work in Inkscape. I just want to convert to path. In Inkscape or by any other means...

#4

Marcos González @mrks9

2023-01-28

Sorry if I misunderstood the question. But if you just want to change a word with an intermediate weight and convert it to path, maybe you can use the offset option. I know it sounds rudimentary, but....

#5

Sébastien Bouchard @SebastJava

2023-01-29

★*

"I know it sounds rudimentary, but..."

Oh that's fine with me. I usually prefer the simple, trouble-free avenues. Thanks for confirming this a valid option. I already had this on mind, it was my second choice. But yes, maybe i'll just jump to that ready-to-use effect instead. Only two small things are holding me back a bit:

First, i wasn't sure that SVGs created with this effect are 100% compatible with every web browser, or just as much compatible as a generic, simple SVG. Because this offset effect is an "Inkscape exclusive function", so to speak. But i guess this is just paranoïa, right? There are no compatibility issues?

Second, i already had tested this offset, and i find that when you convert the text to path (object to path), and then save as plain SVG, and then re-open the file and take a closer look at all the nodes, by selecting the path and then selecting the nodes edit tool (N), then you can look at all the nodes and... It doesn't feel as clean as before. Some nodes got duplicated and are on top of each other or very close to each other. I am pretty sure that not a single pixel got changed, it is just that it doesn't feel as perfect as before, at an "atomic" level... I think that's because, when using this special offset, there is some kind of export function being applied when you do a Save as... Plain SVG. Otherwise, if you stick to the rich Inkscape format, things will remain as good as they were at start.

Short story, i have many options. Amongst the good ones, i need to:

Take the time to read the hints and links from @inklinea
Do some more tests and readings about this offset function
Keep trying to find this "Ubuntu Variable" font from official sources. They say it is part of the Ubuntu font package, i get to play with a true "Ubuntu Variable" there on their website, but when i download from them or from GoogleFonts or just look in my /usr/share/fonts/Ubuntu on my LinuxMint, all i can find is the static versions: light, normal, medium, etc.

#6

Sébastien Bouchard @SebastJava

2023-01-29

*

Here are the screenshots about those good genuine Inkscape SVG format versus a Save as... Plain SVG format:

#7

Sébastien Bouchard @SebastJava

2023-01-29

Just another quick, late comment... I went for a quick look at the SVG file in a simple text editor and there i see it really makes sense. It is neatly presented and i understand my original "pure" nodes are preserved. I am not pretending to be an expert, but this SVG coding is pretty "human-readable". So, the only thing i don't like is the slightly bizarre changes introduced when doing a Save as Plain SVG. At least, you get a warning when you do this and then try to close the window. I guess i should just consider this Save as Plain SVG as a bad habit. I was doing this, sometimes, to reduce the file size. In 2023, maybe i was a bit too maniac when trying to save a few bytes :)

And, also, i know exactly what offset i want and this offset function can be set in pixels. That's exactly what i need. And, huh, i am really tired, i am not sure i want to work hard to get this mysterious, hidden "Ubuntu Variable". I haven't made my mind yet, but i should be set soon. Thanks again to you two. Those were fast and accurate replies.

P.S.: Sorry for those re-re-re-re-edits on my posts here. I am new to this forum and i need to learn and practice this interface for adding bold, quotes, codes, pictures, etc.

#8

Marcos González @mrks9

2023-01-29

Don't worry, welcome to the forum. I must say that I was looking for that Ubuntu variable font out of curiosity and I couldn't find it either.

#9

Sébastien Bouchard @SebastJava

2023-01-29

I changed my mind. I still want that Ubuntu variable font. Something like "Ubuntu-VariableFont_wght.ttf" or so. So, you confirm it can't be found ? All right then. I will go back reading the post and link from @inklinea. If this doesn't work, I have a vague idea on how i could possibly, maybe, include:

@font-face{font-family:"Ubuntu variable";font-stretch:100%;font-style:normal;font-weight:100 800;src:url("https://assets.ubuntu.com/v1/f3b9cc97-Ubuntu[wdth,wght]-latin.woff2") format("woff2-variations")}

So, i would put this in Object > Selectors and CSS... (Shift+Ctrl+Q). Or some other method. (See my complete HTML+CSS example up here.) I guess, maybe, i could use this "Selectors and CSS" to create a class with that variable font and then get to apply this class to this "linuxmint" text. I would just play for a few minutes with the font-weight values, and then convert to path to make this rock-solid. And pure, solid gold.

#10

inklinea @inklinea⛰️

2023-01-29

★*☘★

Well I managed to solve it, but it was a 'Happy Accident'

Ignoring the the width and weight variables.

https://assets.ubuntu.com/v1/f3b9cc97-Ubuntu[wdth,wght]-latin.woff2

Pasted into browser causes the variable font to download.

You can then open it in https://fontgauntlet.com/

Set the sizes / weight that you want, and then click Generate Static Font File

A static font will then download.

For other static font [ edit that should say variable fonts ! ] - this seems to be the site to go to https://v-fonts.com/character-sets/latin

However - please note that each font has its own licensing agreement on the left.

#11

Sébastien Bouchard @SebastJava

2023-01-29

@inklinea. I am going to take another cup of tea, put on some music, and do exactly what you've just said. Thank You very much!

#12

Sébastien Bouchard @SebastJava

2023-01-29

*

@inklinea or community: Did you test it? You downloaded this WOFF2, but did you try to generate some static font using this https://fontgauntlet.com/ and then try to install it and look at it? I tried. First i went fast, then i went slowly, looking at everything, etc. I get to install a TTF font, yes, but... it's empty! The only thing that works is the little Ubuntu-wdth100wght625.ttf icon that gets generated properly. I try to open this downloaded static TTF in my font installer or manager, and there is no waterfall to look at. No abc letters got generated.

I am on LinuxMint Cinnamon 21.1. If someone, somewhere, can confirm this works on Linux, or Macintosh, or Windows, then, for sure, i will be able to get it done. Else, i go back to my other options.

To sum up: does it really works on your computer ?

#13

Polygon @Polygon⚖🌶

2023-01-29

Works here as Inklinea described, naming/classification is off though: big picture shows Font manager on macOS and small is inside Inkscape.

#14

inklinea @inklinea⛰️

2023-01-29

★★

Okay -seems that the online font gauntlet - does have a problem with that font.

I used python fonttools https://github.com/fonttools/fonttools instead

Since the Ubuntu font should have a gpl licence I did a test convert - attached.

fonttools varLib.mutator UbuntuVariableFont.woff2 wght=100 wdth=625

However, for the naming ( It's possible to do this with fontools, but would be a learning curve ), I just used fontforge instead

I generated a new font, after changing the Element > Font info

Should appear under 'Ubuntu Custom' in the Inkscape font browser

#15

Sébastien Bouchard @SebastJava

2023-01-30

★

It works! The first thing i did was to convert to path and check the nodes. It all looks clean. The font did not get altered by conversions. Thanks!

#16

Sébastien Bouchard @SebastJava

2023-02-16

*

How to get a truly, dynamically Ubuntu variable font ?

This is already an old story but i had to share before i forget.

So, this previous adventure described here was working but... I was still not satisfied. I wanted a dynamically, true variable font. So i could test, compare, and adjust the font weight instantly, "live". That font-weight:650 was just an example here. I didn't really know the exact value i needed. So i went for another adventure, based on what i had learned here in this topic...

I am on LinuxMint Cinnamon 21.1 (based on Ubuntu)

Download: https://assets.ubuntu.com/v1/f3b9cc97-Ubuntu[wdth,wght]-latin.woff2 (Ignoring the width and weight variables, Thanks again to @inklinea for this 'Happy Accident'.)
Rename this downloaded font to UbuntuVariableFont.woff2
I googled for a "standard" way to convert from woff2 to TTF and found this: https://techpiezo.com/linux/convert-woff2-to-ttf-or-ttf-to-woff2-in-ubuntu/
So, i did: sudo apt update; sudo apt install woff2
And then: woff2_decompress UbuntuVariableFont.woff2
And finally, open this UbuntuVariableFont.ttf with the Font Viewer and click on [Install].

Then, in Inkscape, type your text and go to Text > Text and Font. Use the slider to change the weight to any value in the range 100-800... Oops! Strange but as soon as you try some custom weight, the letter spacing gets totally chaotic. It works fine with other variable fonts, but not with this "hacked" Ubuntu font! But this Ubuntu variable font also has a variable slider for some custom width adjustments. Just change it to width = 99.9%. Just to say it is not 100%... Bingo ! Now the letter spacing is back to normal, just perfect.

● ● ●

But now this UbuntuVariableFont.ttf is causing some conflicts with my standard, already installed Ubuntu static fonts. So, i just converted my logo text to path (Inkscape > Path > Object to Path) and then i uninstalled this UbuntuVariableFont.ttf.

I removed it by hand, i "trashed" this "~/.local/share/fonts/Dalton Maag Limited" directory.
Otherwise it was very confusing in the Font Manager: i was unable to differentiate the standard system fonts from the new variable fonts.

PURE CHAOS ! Now i can't read anything on the screen, because my default Ubuntu font is not working anymore! No problem, i felt i was running into trouble and i had already saved and closed all my documents. So, i blindly logged out... And logged back in, to reset everything. My Cinnamon desktop is now back to normal, all okay.

To sum up, all this adventure was to get a typography that would match the line thickness from the logo:

WARNING: In case there is some font license missing here, i did not keep this variable TTF. I just created my new logo text and got it converted to paths. You should always convert to paths when it comes to logos, anyway. Otherwise, just check in your Font Viewer, i think there was still a web link to the font license there. No trouble. Else, there should be a way to include that font license in that new UbuntuVariableFont.ttf.