svg @font-face works in svg but not when included in a page
According to this answer to a related question, embedded svg images have to be standalone images. As mentioned in the comments above, one can make an svg 'standalone' by embedding all external assets into it. So in my case, i'd have to do either one of these things:
- embed the fonts using a data uri:
src: url("data:application/font-woff;base64,<base64 encoded font here")
, - embed the fonts as svg glyphs, which I had already ruled out because the lack of firefox support
- turn the fonts into paths in my editing software (e.g. expand path in adobe illustrator).
Not one of these methods seemed satisfactory, since I really like to keep the svg files as lightweight as possible.
Another solution to circumvene the whole problem is to use a html object
tag instead of an img
tag. This way the svg is allowed to be more than a standalone image and it can use the full range of xml inclusion methods to include other assets. This was pointed out already in the aforementioned question.
I chose to use the object
method of embedding the svg. I'll update this answer if I find out there is something fundamentally wrong with doing this instead of using a proper img
element.
SVG doesn't use font when inside HTML
When used as an image (via an html <img>
tag, an SVG <image>
tag or as a CSS background-image) SVG must be consist of a single file in order to protect user privacy.
You can use a font, but you'll need to convert the font data to a data URI and embed the font in the SVG file.
@font-face svg not working properly in Chrome?
To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:
@font-face {
font-family: 'Futura';
src: url('futura.eot');
src: url('futura.eot?#iefix') format('embedded-opentype'),
url('futura.woff') format('woff'),
url('futura.ttf') format('truetype'),
url('futura.svg#futura') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'Futura';
src: url('futura.svg#futura') format('svg');
}
}
Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.
Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration
<font-face units-per-em="2048" ascent="1900" descent="-510" />
You can change the value for ascent and get it to match the other font format versions.
Related Topics
Django-Bower + Foundation 5 + SASS, How to Configure
How to Customize Style of Bootstrap $Modal
Less Immediate Parent Selector
How to Select First Img Tag in a Div with Many Img Tag
How to Use Text-Overflow: Ellipsis on a Button Element
Css: Auto Resize Div to Fit Container Width
How to Get Material-Ui Drawer to 'Squeeze' Other Content When Open
Angular - Including CSS File in Index.Html
Using Mixins in Bootstrap 3 to Avoid Unsemantic Markup for Layout Structure
How to Get a Floating-Div to Fill Available Space Within Its Parent Div
How to Align Input Field and Submit Button (Also Differences Between: Ie, Ffox, Chrome)
CSS to Make Images Resize and Fit Any Screen the Same