svg fonts not showing
Dear Firefox forum
I've created a logo using a Google font called 'Buda' together with some vector shapes.
When I save this logo as a .svg file and display it as a background-image in my css file, the font looks good in Chrome and Safari, but not in Firefox where this font has reverted to a default font.
Would you be able to point me to an article that explains how I can display this font, so that it will display properly in all browsers?
The above mentioned svg logo was created using Sketch (Bohemian Coding). I have contacted them, they replied that it is a "Firefox related" issue.
Can you help?
kind regards,
Sambodhi Prem
All Replies (3)
The Buda font shows when I check the Google page.
Are there any error messages about this font in the Browser Console (Firefox/Tools > Web Developer)?
Hi Cor-el
I have now discovered that if I install the font called 'Buda' (used in my .svg file) on my local machine, everything is how it should be in Firefox. But if the font is not installed locally, Firefox, Chrome and Safari all display a default font. Which leads me to believe that the svg file is not able to access the Google font hosted on the web and that this is not a Firefox specific issue.
Would you be able to offer some help even though this is not a Firefox specific issue?
I have in my css file the following reference to the 'Buda' font:
@import url(http://fonts.googleapis.com/css?family=Buda:300&text=Alexander%20Technique);
@font-face {
font-family: 'budalight';
src: url('../fonts/Buda/buda-light-webfont.eot');
src: url('../fonts/Buda/buda-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Buda/buda-light-webfont.woff') format('woff'),
url('../fonts/Buda/buda-light-webfont.ttf') format('truetype'),
url('../fonts/Buda/buda-light-webfont.svg#budalight') format('svg');
font-weight: normal;
font-style: normal;
}
Perhaps this is not enough?
I was hoping that the 'Buda' font that is embedded in the .svg file was able to access the Google hosted font so that people who don't have this font installed on their machine can view it as intended. This seems to work fine for fonts that are used in the html file and referenced in the css file, but I'm having trouble with fonts that are used in .svg files.
I could circumvent the problem by converting the font to outlines, but I'd prefer not to do that.
I'd appreciate your help.
kind regards
Sambodhi Prem
I have uploaded the page with the problem: http://globalsuitcasedesign.com/temp-host/AT-info/logo-test.html
kind regards
Sambodhi Prem