0

I want to remove some rules from style tag using Javascript. eg:

<style>

    @font-face { font-family:&quot;Arial&quot;;src:url(&quot;#FontID1&quot;) format(svg)}
    @font-face { font-family:&quot;Nyala&quot;;src:url(&quot;#FontID0&quot;) format(svg)}
    .fil2 {fill:#05BAE4}
    .fil3 {fill:#373435}
    .fil1 {fill:#05BAE4;fill-rule:nonzero}
    .fil0 {fill:#11D6CC;fill-rule:nonzero}
    .fnt1 {font-weight:normal;font-size:189.311;font-family:'Arial'}
    .fnt0 {font-weight:normal;font-size:615.094;font-family:'Nyala'}

  </style>

I want to remove the @font-face rules and replace it with something else. Can anybody tell me how it is done?

6
  • Replace it with what?
    – Weafs.py
    Jan 7, 2015 at 14:10
  • You could just append new @font-face rules and let cascading (the "C" in "CSS") do its job...
    – Boldewyn
    Jan 7, 2015 at 14:16
  • With another css rule like @font-face { font-family:&quot;Arial&quot;;src:url("a.ttf") Jan 7, 2015 at 14:16
  • @Boldewyn hmm, let me try that Jan 7, 2015 at 14:26
  • You can start from this fiddle: jsfiddle.net/boldewyn/eywyx6g3
    – Boldewyn
    Jan 7, 2015 at 15:18

1 Answer 1

0

I tried adding this:

<script type="text/plain" id="allFonts">
<style type="text/css">
    @font-face {
        font-family: MuseoSlab;
        src: url('/fonts/Museo_Slab.otf');
    }
    @font-face {
        font-family: MuseoSans;
        src: url('/fonts/MuseoSans.otf');
    }
    @font-face {
        font-family: Neuton;
        src: url('/fonts/Neuton.otf');
    }
    @font-face {
        font-family: Stag-Medium;
        src: url('/fonts/STAG-MEDIUM_0.otf');
    }
    @font-face {
        font-family: STAGSANS;
        src: url('/fonts/STAGSANS-MEDIUM_0.otf');
    }
    @font-face {
        font-family: Zapf;
        src: url('/fonts/Zapf.otf');
    }

    @font-face {
        font-family: GLSNECB;
        src: url('/fonts/GLSNECB.otf');
    }

    @font-face {
        font-family: HELVETIA;
        src: url('/fonts/HELVETIA.otf');
    }

    @font-face {
        font-family: "CG Omega";
        src: url('/fonts/STAG-MEDIUM_0.otf');
    }

    @font-face {
        font-family: "Eurostile LT Bold";
        src: url('/fonts/STAGSANS-MEDIUM_0.otf');
    }
</style>
</script>

and in script:

            $("style").after($("#allFonts").text());

and it was working..

3
  • The font-family names of the new @font-face declarations must match "Arial" and "Nyala", if you want them to change. You could just take, say, /fonts/HELVETICA.otf and declare it with font-family:Arial;.
    – Boldewyn
    Jan 7, 2015 at 15:33
  • Ya. I was testing with these fonts also. still didn't work. I also tested directly without script. still not working Jan 7, 2015 at 15:38
  • also I am appending to an SVG document Jan 7, 2015 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.