How to set font family with javascript ONLY- no access to jquery, html, or css, only js

Question

I am building print products for an EFI Digital Storefront using DirectSmile, a variable data program that plugs in to InDesign and the Digital Storefront. Complex formatting of variable data fields can be done within DirectSmile with javascript.

I can add javascript for formatting, but there is no css or html I can work with in conjunction with the js. I just add the snippet of js to the variable data field, save and export the file, and upload to Digital Storefront.

javascript > variable data field > Directsmile document > zipped product > Digital Storefront

Right now I am working on a business card. It displays its phone numbers like this:

Office 123.456.7890
Cell 123.456.7890
Fax 123.456.7890

where the words Office, Cell, and Fax are supposed to be in one font (8pt Archer bold) and the numbers are supposed to be in another (8pt Graphik Light). This needs to be defined in javascript but I don't know how. I'm very new to this, and research isn't panning out- every method I've found seems to require access to html/css, which I don't have.

This is the javascript I've used in the past to format phone numbers so the preceding labels ("Office" "Cell" "Fax") only appear if the associated phone number is used by the customer, and to format the phone number itself:

function numbers(){
    out = ""
    num = VAR.GetS("Office_Phone", "")       if(num.length>0) out += "OFFICE" + phone(num) + "\n";  else out = "" + out;
    num = VAR.GetS("Cell_Phone", "")         if(num.length>0) out += "CELL" + phone(num) + "\n";  else out = "" + out;
    num = VAR.GetS("Fax", "")                if(num.length>0) out += "FAX" + phone(num) + "\n";  else out = "" + out;
    return out;
}

function phone(number){
    tmp = ""; div = ".";
    if( number.length>0 ){
        tmp = number.replace(/\D/g, "");
        var len = tmp.length;
        tmp = tmp.split("");
        tmp.splice(len-7,0, div);
        tmp.splice(len-3,0, div);
        tmp = tmp.join("");
    }
    return tmp;
}

What can I add/change to have the preceding label ("Office" "Cell" "Fax") appear as 8pt Archer bold and the phone numbers as 8pt Graphik Light?

All help greatly appreciated. Thank you

Answer 1

NOTE: this response applies to standard HTML only

It does not appear to be relevant to DirectSmile as originally requested in the question. For somebody arriving looking for setting the fontFamily on plain HTML elements through vanilla Javascript the response may be useful. Othewise please ignore.

To set the style attribute on an item in javascript:

var el = document.getElementById('theelementid');
el.style.fontFamily = 'Graphik Light';

For this to work, you will need to identify the specific DOM element ids to target your javascript at.

If you only have an id for the block, you may need to extend the concept to identify items by tag name within the block. For example, the following will apply the font family style to every span element in the outer block with id="blockid":

var block = document.getElementById('blockid');
var els = block.getElementsByTagName('span');
for(var i in els){
  if(els.hasOwnProperty(i)){
    var el = els[i];
    el.style.fontFamily = 'Graphik Light';
  }
}