Search code examples
javascriptcsssvgwebfonts

Need help properly defining Javascript - Should be super simple


How do you define a variable label in an array? At least that is what I imagine it would be called, but my terms 'variable', 'label' and 'array' are probably incorrect terms.

I am working with an svg-edit and have embedded some fonts to use with the editor.

My original TTF file was converted using Font Squirrel

The problem, is that the Font Squirrel conversion renames the 'font-family' in the css that is necessary for working with the javascript that is responsible for using these fonts in the editor.

In my example the original TTF font-family is: Accent SF, and the after the conversion it is AccentCasual, (note the 'space' between Accent and SF).

That is the problem, the space between Accent and SF.

Why is this such a big problem? Well when I open the svg files that are originally created in Inkscape, into the svg-edit, then the svg-edit software does not recognize the font, due to this minor discrepancy, and vice-versa.

I can manually open the svg file in Notepadd++ and correct the discrepancy, but this is not a solution.

Hence, I need to modify the css and js to match. in the css, it is a very simple solution to add a space, and the css and js need to match, the js, it is not, as everything I have tried fails.

What I NEED to know is how to modify the javascript for the online version, simply by adding that 'space' in the name, again from 'Accent-SF' to exactly 'Accent SF'

Here is the the entire css (from its own separate file) note the 'font-family' I have already changed this to read 'Accent SF' to what I need.

@font-face {
    font-family: 'Accent SF';
    src: url('font-files/acce-webfont.eot');
    src: url('font-files/acce-webfont.eot?#iefix') format('embedded-opentype'),
         url('font-files/acce-webfont.woff') format('woff'),
         url('font-files/acce-webfont.ttf') format('truetype'),
         url('font-files/acce-webfont.svg#accent_sfregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Here is a snipit of the js code: Not the 'font-family' as 'Accent-SF' I NEED to remove the '-' so that it matches the css version of 'Accent SF' exactly

    Smm.fonts = {
      AccentCasual: {
        cssFile: 'accent_sfregular.css',
        imageFile: 'accent_casual.png',
        loadType: 'custom',
        loaded: false
    }
};

Hopefully this makes sense of exactly what I am asking and what I need.

Seems simple to correct the javascript from 'AccentCasual' to 'Accent SF' but when I add a 'space' the javascript fails.


Solution

  • What you want to change is the property name of an object.

    Here's your object:

    Smm.fonts = {
        AccentCasual: { ... }
    }
    

    It has one property, AccentCasual. Property names in object literals that only consist of alphanumeric characters do not need to be surrounded by quotes. However, property names that are not purely alphanumeric (spaces, dashes, etc.) must be quoted:

    Smm.fonts = {
        "Accent SF": { ... }
    }