0


I created a SVG logo with the BrushScriptStd font. It displays fine in Chrome, Safari and Opera but Firefox changes the font and it looks really crapy. Does anyone knows what i should do?

thanks for the help!

Here´s the svg code

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="368.412px" height="181.334px" viewBox="0 0 368.412 181.334" enable-background="new 0 0 368.412 181.334"
     xml:space="preserve">
<g id="fga3kg_1_" display="none">
</g>
<g id="Capa_3">
    <polygon fill="#3373A9" points="129.496,132.001 317.226,132.001 367.401,0 179.671,0     "/>
</g>
<g id="Capa_2">
    <polygon fill="#84CAE2" points="1.01,181.334 161.01,181.334 208.302,31.334 48.303,31.334    "/>
    <text transform="matrix(1 0 0 1 35.1562 113.834)" fill="#FFFFFF" font-family="'BrushScriptStd'" font-size="70">Cafe Blau</text>
    <g id="qWsZ92_1_" display="none" opacity="0.25">
    </g>
</g>
</svg>

here´s the embed SVG (html code):

<svg width="300" height="160" viewBox="0 0 300 160">
    <image xlink:href="/Users/MaxRuizTagle/Desktop/guardado por illustrator/logoprobando.svg" src="" width="270" height="200"/>
</svg>

I haven´t specified any font through the @font-face option yet.. thanks for the help again!

Maximiliano Ruiz-Tagle
  • 47
  • 6
  • According to [MDN](//developer.mozilla.org/docs/Web/SVG/Tutorial/SVG_fonts), SVG Fonts are currently supported only in Safari and Android Browser. Internet Explorer [doesn't consider the implementation](//blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx), this functionality has been [removed from Chrome 38](//www.chromestatus.com/feature/5930075908210688) (and Opera 25) and Firefox has [postponed implementation indefinitely](//bugzilla.mozilla.org/show_bug.cgi?id=119490) to concentrate on [WOFF](//developer.mozilla.org/en/WOFF). – Oriol Jan 04 '15 at 17:19
  • i suggest you to use font icon – sanoj lawrence Jan 04 '15 at 17:28
  • This is NOT an SVG font issue, so please ignore the existing comments/answers. This is regular SVG text using a web font. How are you including the font (e.g., where are your `@font-face` rules, what type of font files are you using)? More importantly, how are you using the SVG code? If the SVG is used as an image (`` tag or CSS background image), no external resources will be downloaded for it. Chrome and related browsers tend to be a bit flexible about the external resources rule when it comes to webfonts, but Firefox is not. – AmeliaBR Jan 05 '15 at 00:35
  • Thank you AmeliaBR!.. I updated my question with the svg html code above.. I havent specified any font with \@font-face yet.. if i include the font with \@font-face would that solve the probelm with the SVG text? like this? \@font-face{ font-family: Brush Script Standard; src:url(brushscriptstd.otf); } – Maximiliano Ruiz-Tagle Jan 05 '15 at 03:36
  • The font is in the SVG logo stipulated Cafe Blau – Maximiliano Ruiz-Tagle Jan 05 '15 at 11:00
  • 2
    You'll need to add it using @font-face and the url cannot be an external file i.e. brushscriptstd.otf won't work, it will need to be a data url containing the contents of brushscriptstd.otf – Robert Longson Jan 05 '15 at 11:12

1 Answers1

0

Read about icon-fonts vs svg

I request you to use font-icon lisst of browser that supports font-icon


Using icon fonts will be more and more relevant as more high resolution/density displays become available.

A 16×16px icon can look horrible on a high density display (>300ppi). It may either display incredibly small or unsharp due to automatic scaling. A 1em font icon on the other hand will render correctly and sharply regardless of screen density.

Tool to create font-icon

sanoj lawrence
  • 951
  • 5
  • 29
  • 69