I really want to use this free font for embedding with #font-face: http://www.theleagueofmoveabletype.com/fonts/3-flaminia-type-system
However, it only comes in .vbf format. Has anyone ever dealt with this format before, or know how to convert it to a usable format? I can't find anything that will open it.
As the page you linked states, it's the "Multiple Master" format. It seems there's free software available to convert Multiple Master fonts to PostScript fonts: http://en.wikipedia.org/wiki/Multiple_master_fonts#Free_software.
FontLab Studio saves font files as .vbf
This is not an installable font - this is font creation software. They need to be exported in the normal .otf and .ttf formats to be useable.
Related
My goal was to design a simple website, with a custom font (that isn't available on Google Fonts). I used FontSquirrel's generator for webfonts as a supplement to manually-linked fonts. What was expected was for the src for the WOFF and WOFF2 files to be just simple links to the files. What happened was the generator added this garbage data (which was taken on pastebin as spam and would probably be taken as spam here as well) for every WOFF and WOFF2 file. This threw me off.
As I already stated, I manually linked the files and it did not work, however this may be just a side effect of me not knowing how webfonts work. I tried to look up about this on the internet and found irrelevant results.
I used FontSquirrel to generate the files, and these are the settings I used. The extra font filetypes are for debugging this problem (it only happens to WOFF as I found out).
Am I truly not linking WOFF files properly? Is WOFF supposed to be linked like this? Is the generator supposed to insert garbage data into the WOFF srcs?
edit 1: I only figured out now (after someone pointed it out) that this "garbage data" may just be simply raw font data. I still don't know, however, why this happens, if this is a bug and I can just use the simple src attribute pointing to the file, or is this intentional?
I've been referencing the findings in this thread and in this question when trying to get a custom font that uses embedded bitmaps to render them via #font-face, and in my experimentation with fonts that I know are configured correctly, I found the following results displaying 日本語 using Windows 10 and Vivaldi (Chrome, etc), with ClearType on and configured (unsure if this matters):
span {
font-family: "SimSun"; // or just omitted, since this is a fallback font
}
#font-face { font-family: "font"; font-weight: normal; src: url('simsun_0.ttc'); }
span {
font-family: "font";
}
simsum_0.ttc is the font that I pulled from C:/Windows/Fonts/ and placed in the folder where the css lives. I've also verified that this file does indeed have embedded bitmaps and is configured correctly.
I've since just installed the font I'm working on and referenced it via its system name, which then loads the bitmaps correctly. Is there any way to get browsers to load the bitmaps from fonts loaded via #font-face? Is there any documentation or spec on this limitation, or possible work-arounds?
More examples
This works the same for custom-built fonts as well - here's an example with an .otf font in Chrome. The font loaded via it's name when installed on the system:
and the same font loaded via #font-face's url:
Chrome and Firefox (and likely others) run OTS on the fonts not available in the system, which removes the EBDT & EBLC tables (where the bitmaps are stored) from the font.
From the OTS readme:
The OpenType Sanitizer (OTS) parses and serializes OpenType files (OTF, TTF) and WOFF and WOFF2 font files, validating them and sanitizing them as it goes.
The C library is integrated into Chromium and Firefox, and also simple command line tools to check files offline in a Terminal.
The CSS font-face property is great for web typography. Having to use images in order to get the correct typeface is a great sadness; one should be able to use vectors.
However, on many platforms the system-level TrueType font renderers have never been part of the attack surface before, and putting them on the front line is a scary proposition... Especially on platforms like Windows, where it's a closed-source blob running with high privilege.
In 2014, there was interest in adding color bitmap tables to Chromium, and support was added to pass-through the color bitmap (CBDT & CBLC) tables to OTS, so it seems possible that support could be added for these as well, if the browser requests it.
The steps I see to make this possible are:
Add the ability to pass-through the EBDT & EBLC tables to OTS. This is the current location of the code that passes the color tables through.
Request that each project (Chromium, Firefox, etc) allow the pass-through.
Wait for all the updated code to be pushed down-stream.
There might be more complicated implementations of this sort of support (options in #font-face, etc), but this seems like the easiest, since the color tables are already supported (somewhat) in the same way.
A reliable and easy option is to use a service like FontSquirrel.
https://www.fontsquirrel.com/tools/webfont-generator
Upload the fonts and it will generate everything you need so you can download, copy and paste into your project.
Good luck!
The problem is #font-face doesn't support TrueType Collections (.ttc) files, so it will fail loading it. Does the console give you errors indicating something like this?
You could use a tool to extracy the needed .ttf from the .ttc file, if the license allows this. Or you could ask the foundry you got the font from to supply you with a .ttf (or .woff2, whatevr you need).
When downloading the css resource for a Google webfont, the result seems to be dependent on the browser.
When I open this URL with my browser (Firefox or Chrome):
https://fonts.googleapis.com/css?family=Roboto
I get this result which contains several woff2 font sources for different unicode character ranges.
When downloading the same CSS resouce URL with CURL for example, I get this result containing just one .ttf font, which appears to contain only a default unicode character range.
So apparently Google looks at the agent string from the HTTP request and then adjusts the result accordingly.
Is there a way to get a .ttf with the full unicode character range, i.e. everything that is also included with the "multi woff2" version? Most importantly the Latin and Latin-Extended characters.
I can convert woff2 fonts to ttf. However I don't know how to combine or merge multiple woff2 fonts into one ttf, or into one woff2 and then convert that.
Or am I doing something wrong and should I use a different approach altogether?
If you pick the font on the Google Fonts site, it'll show a dialog with the CSS code to use as webfont. Google will indeed send a specific version to your visitor's browser, depending on what it supports.
If you want the "full" fonts, grab the desktop version as .ttf file by clicking the download button. It'll have all the OpenType features and un-subsetted character set support.
I need to use some custom font for numbers in my Qt app, but company ask me to use image as font, font file is not allowed(For example: ttf).
the font image like this:
So i wonder is possible to converting the font image to QFont?
like a Qt font generator.
Or any other solution?
There is nothing out of the box that supports what you are looking for. You would need to get around this company rule by building your own TrueTypeFont data programmatically from your image, keeping it in memory only and load that into your application with addApplicationFontFromData(const QByteArray & fontData).
Unfortunately I cannot find a single library that does this, and the TTF format appears dauntingly complex. I would suggest looking into this open source project for font creation. Perhaps you can use this as a starting point? http://fontforge.github.io/en-US/
You may want to find out the reason your company is telling you that you cannot use a custom font. (I just remembered reading that QT has difficulties storing a font as a "resource". If it's not due to copyright issues, then you could suggest not using an image, but storing the entire file in the source code in a text format like base-64. Then convert it back into binary at startup, then load it up as a new font from a QByteArray.
I guess it's about copyright issues ? There are lots of ttf fonts available for completely free commercial use. E.G. have a look at Droid Sans Mono : https://www.google.com/fonts/specimen/Droid+Sans+Mono
Otherwise it would be good to know the reason why ttf is not allowed.
It is possible to create a font from a vector graphic.
If you have resonable high resolution images of every letter (if not already vector graphics) you can try to convert them to vector graphics (SVG).
Afterwards you can use tools to convert SVG to a font. This would be most likely a ttf font which can be used with QFont.
I have a css font family like below(I have shorten it because of displaying limit otherwise it is much much bigger than what I have present here)
now can you please let me know that if there is a way to convert the url()content inti .ttf font formats or other standard font formatS ?
#font-face{font-family:'web_font';
src:url('data:font/opentype;base64,d09GRk9UVE8AAHUkAA0AAAAAvnQAAhOIAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABMAAAXwMAAIcHbRkIAEZGVE0AAGA0AAAAGgAAABxoptAkR0RFRgAAYFAAAACWAAAA3hpVGOlHUE9TAABg6AAABf8AABkwdgAPiEdTVUIAAGboAAAGngAADSIYX0AXT1MvMgAAbYgAAABXAAAAYI8WBFNjbWFwAABt4AAAAZYAAAKquYd/vWhlYWQAAG94AAAAMwAAADYIcsC0aGhlYQAAb6wAAAAhAAAAJAuVB6xobXR4AABv0AAAA0cAAAaQAUI5cG1heHAAAHMYAAAABgAAAAYBpFAAbmFtZQAAcyAAAAHuAAAFH7QO6sRwb3N0AAB1EAAAABMAAAAg/h4AHnictLoHXFRH1zjMvbC7V9S1cRcFXVDBggTpxRbFrigWpCq997pUkY4w9N5BepMuoGI3WGNsURMTY0wsURITU2Zx8Hm+uQsui/F58/zf9/eBF2fOOXPanDnnzN0lpGRkpAiCmBLq4mjl4uXga+HiKEWQUoTUGuF0qeHTxPAZcvgpQ+');}
1) First of all you need to save the base64 string as a file.
Some of the online service is restricted to how much you can enter, so simple do this locally by just opening the base64 string in your browser and you will be promoted with save as dialog, choose any name you want
Alternative (if the browser don't allow you to enter such a long url) create a download link open the page in any supported browser that supports download attribute (chrome, firefox, opera)
download web_font
2) Then you need to figure out what file extension it's
With just the small amount of base64 string you provided me i was able to recognize it as a woff file, by looking at it with a hex/text editor. I uploaded the saved file to https://hexed.it and could read in the beginning that it said woff
So now you have your web_font.woff file!
3) Convert it to TTF with the right tool for the woff - format
I can google that for you and found for example fontforge that dose this and some free online service as well.
onlinefontconverter.com makes a good job at converting unknown formats by looking at the magic number instead of the file extension so you can have your ttf file directly. And you don't have to install any program either. But it doesn't tell you what the original file extension is.
Don't do this? If you have an actual font file, like a .ttf file, just use that in your CSS.
#font-face {
font-family: WhateverNameYouNeed;
src: url('location/to/your/file.ttf') format('truetype')
}
aaaaaand we're done. For universal acceptance, wrap it as a WOFF and then use that instead of the ttf OpenType font file, so that every modern browser supports it.
NOTE: you can't just blatantly convert your fonts, though. If you do not own the rights to the font, or the font does not come with a license that says derivatives are allowed, you are not allowed to convert this font.