Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

svg fonts not showing

sambodhiprem
sambodhiprem
more options

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

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)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

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)?

sambodhiprem
sambodhiprem Question owner
more options

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

sambodhiprem
sambodhiprem Question owner
more options

I have uploaded the page with the problem: http://globalsuitcasedesign.com/temp-host/AT-info/logo-test.html

kind regards

Sambodhi Prem