Is it possible to embed web fonts in a standalone HTML page using a dataURL or something similar, without having to load them from an external file or address?
that's when you encode the font in base64. you will technically have a "gibberish string" representing that font. this will increase load times since base64 is very long.
there are tools online that do that for you. essentially, it takes the font file, encodes it in base64 and replaces the font location with the base64 encoded version.
Related
I’m trying to keep HTTP requests at a minimum in the website I’m developing. FontSquirrel and Transfonter have been plenty useful to encode WOFF2 into base64, but I’ve had no luck with variable fonts and keeping all their features/axis (they result in static fonts).
Is there a way I can encode WOFF2 variable fonts into base64 and keep all their customizable goodness?
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.
Images can be embedded inline encoded as base64 in a xhtml document, for example:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAD
NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK
gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ
0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho
aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x
v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0
NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD
Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ
AAAAAElFTkSuQmCC" alt="beastie.png"/>
(source)
Is it possible to do the same with an arbitrary attachment (for example a zip file) that can be downloaded (clicking a link or a button) and accessed using javascript?
Yes.
download
application/octet-stream is a generic MIME type for binary data, generally forces browsers to download the file.
The file itself is from here, though doesn't really work as a zip.
download is a more modern way to force download.
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.
This is the first time I've used #font-face. The font pack is from myfonts.com and I'm currently testing in Safari and noticed through the web inspector that the css file, which loads the 2 fonts shows as a nearly-2mb-download ! the fonts appear to be there as base64 encoded. The pack didn't include the actual .otf files.
I've added Gzipping via a .htaccess file and this has cut down the size of that file by nearly half but at 1mb, it's still not acceptable and I can't understand why it's so big.
Base64 is larger than the original file around 1.3 - from wikipedia. You can convert the file back to its original state with this convertor, but there are a lot of tool on the net.
Either download the font files through myfonts.com ( http://new.myfonts.com/fonts/typodermic/great-escape-rg/ )
or use font-squirrel generator to make them from the original files if you have previously purchased them
( http://www.fontsquirrel.com/fontface/generator )