Fonts?

Discussion in 'ShapeJS' started by Charles148, Jun 12, 2014.

  1. Charles148
    Charles148 New Member
    What fonts can be used with a text object? Is there a way to provide a font?
     
  2. GambaLabs
    GambaLabs New Member
    These fonts are used in Shapeways' custom ring creator app:
    - Serif: "Playfair Display"
    - Script: "Oleo Script Swash Caps"
    - Monospace (?): "Rokkitt"
    - Sanserif: "Roboto"

    There is also this one available in the dice example: "Century Schoolbook L"

    There might be others, but I don't know of them...
     
  3. AlanHudson
    AlanHudson Shapeways Employee Dev Team
    It depends on what is installed on the server. Here is the list currently:

    Nimbus Sans L:style=Regular Italic
    Playfair Display:style=Bold Italic
    URW Palladio L:style=Roman
    Oleo Script Swash Caps:style=Regular
    Century Schoolbook L:style=Bold Italic
    Roboto:style=Light Italic
    Nimbus Sans L:style=Bold
    Playfair Display:style=Italic
    Oleo Script Swash Caps:style=Bold
    URW Chancery L:style=Medium Italic
    Roboto:style=Black Italic
    Nimbus Roman No9 L:style=Regular
    Century Schoolbook L:style=Bold
    Century Schoolbook L:style=Italic
    Rokkitt:style=Bold
    Nimbus Sans L:style=Regular
    Roboto:style=Italic
    Playfair Display,Playfair Display Black:style=Black Italic,Italic
    URW Palladio L:style=Italic
    Playfair Display:style=Regular
    Nimbus Sans L:style=Bold Condensed
    URW Gothic L:style=Demi
    Roboto:style=Bold
    Roboto:style=Black
    Nimbus Roman No9 L:style=Medium Italic
    Nimbus Mono L:style=Bold Oblique
    Roboto:style=Thin Italic,Italic
    Dingbats:style=Regular
    Nimbus Roman No9 L:style=Medium
    Nimbus Sans L:style=Bold Italic
    Nimbus Mono L:style=Regular
    URW Gothic L:style=Book
    Roboto:style=Thin,Regular
    Playfair Display,Playfair Display Black:style=Black,Regular
    Roboto:style=Regular
    Nimbus Sans L:style=Regular Condensed Italic
    URW Bookman L:style=Demi Bold
    URW Bookman L:style=Light
    URW Gothic L:style=Demi Oblique
    Standard Symbols L:style=Regular
    Roboto:style=Bold Italic
    Roboto:style=Light
    Rokkitt:style=Regular
    URW Palladio L:style=Bold
    Nimbus Sans L:style=Regular Condensed
    URW Bookman L:style=Light Italic
    Century Schoolbook L:style=Roman
    Nimbus Roman No9 L:style=Regular Italic
    DejaVu Sans:style=Bold
    DejaVu Sans:style=Book
    URW Gothic L:style=Book Oblique
    Roboto:style=Medium Italic
    URW Palladio L:style=Bold Italic
    Nimbus Mono L:style=Regular Oblique
    Roboto:style=Medium,Regular
    DejaVu Sans Mono:style=Book
    DejaVu Sans Mono:style=Bold
    Nimbus Mono L:style=Bold
    Nimbus Sans L:style=Regular Italic
    Playfair Display:style=Bold Italic
    URW Palladio L:style=Roman
    Oleo Script Swash Caps:style=Regular
    Century Schoolbook L:style=Bold Italic
    Roboto:style=Light Italic
    Nimbus Sans L:style=Bold
    Playfair Display:style=Italic
    Oleo Script Swash Caps:style=Bold
    URW Chancery L:style=Medium Italic
    Roboto:style=Black Italic
    Nimbus Roman No9 L:style=Regular
    Century Schoolbook L:style=Bold
    Century Schoolbook L:style=Italic
    Rokkitt:style=Bold
    Nimbus Sans L:style=Regular
    Roboto:style=Italic
    Playfair Display,Playfair Display Black:style=Black Italic,Italic
    URW Palladio L:style=Italic
    Playfair Display:style=Regular
    Nimbus Sans L:style=Bold Condensed
    URW Gothic L:style=Demi
    Roboto:style=Bold
    Roboto:style=Black
    Nimbus Roman No9 L:style=Medium Italic
    Nimbus Mono L:style=Bold Oblique
    Roboto:style=Thin Italic,Italic
    Dingbats:style=Regular
    Nimbus Roman No9 L:style=Medium
    Nimbus Sans L:style=Bold Italic
    Nimbus Mono L:style=Regular
    URW Gothic L:style=Book
    Roboto:style=Thin,Regular
    Playfair Display,Playfair Display Black:style=Black,Regular
    Roboto:style=Regular
    Nimbus Sans L:style=Regular Condensed Italic
    URW Bookman L:style=Demi Bold
    URW Bookman L:style=Light
    URW Gothic L:style=Demi Oblique
    Standard Symbols L:style=Regular
    Roboto:style=Bold Italic
    Roboto:style=Light
    Rokkitt:style=Regular
    URW Palladio L:style=Bold
    Nimbus Sans L:style=Regular Condensed
    URW Bookman L:style=Light Italic
    Century Schoolbook L:style=Roman
    Nimbus Roman No9 L:style=Regular Italic
    DejaVu Sans:style=Bold
    DejaVu Sans:style=Book
    URW Gothic L:style=Book Oblique
    Roboto:style=Medium Italic
    URW Palladio L:style=Bold Italic
    Nimbus Mono L:style=Regular Oblique
    Roboto:style=Medium,Regular
    DejaVu Sans Mono:style=Book
    DejaVu Sans Mono:style=Bold
    Nimbus Mono L:style=Bold


    It will do some rollback to things it consider similar.
     
  4. jpitkin
    jpitkin New Member
    Can you provide any guidance on how to apply the various styles of each font? Changing the text name to include the style information as shown in this list doesn't seem to be working.
     
  5. GambaLabs
    GambaLabs New Member
    In the font name from the list, Just replace ':style=' with a space.

    For example, for "URW Bookman L:style=Demi Bold" use "URW Bookman L Demi Bold", like so:
    var text = new Text(str, "URW Bookman L Demi Bold", width, height, depth, voxelSize);
     
    Last edited: Nov 7, 2014
  6. drloris
    drloris Well-Known Member
    That's pretty useful.
    After a bit of tinkering, I've got a tidier list:

    Code:
    Century Schoolbook L Bold
    Century Schoolbook L Bold Italic
    Century Schoolbook L Italic
    Century Schoolbook L Roman
    
    DejaVu Sans Bold
    DejaVu Sans Book
    DejaVu Sans Mono Bold
    DejaVu Sans Mono Book
    
    Nimbus Mono L Bold
    Nimbus Mono L Bold Oblique
    Nimbus Mono L Regular
    Nimbus Mono L Regular Oblique
    Nimbus Roman No9 L Medium
    Nimbus Roman No9 L Medium Italic
    Nimbus Roman No9 L Regular
    Nimbus Roman No9 L Regular Italic
    Nimbus Sans L Bold
    Nimbus Sans L Bold Condensed
    Nimbus Sans L Bold Italic
    Nimbus Sans L Regular
    Nimbus Sans L Regular Condensed
    Nimbus Sans L Regular Condensed Italic
    Nimbus Sans L Regular Italic
    
    Oleo Script Swash Caps Bold
    Oleo Script Swash Caps
    
    Playfair Display Bold Italic
    Playfair Display Italic
    Playfair Display
    Playfair Display Black 
    Playfair Display Black Italic
    
    Roboto Black
    Roboto Black Italic
    Roboto Bold
    Roboto Bold Italic
    Roboto Italic
    Roboto Light
    Roboto Light Italic
    Roboto Medium Italic
    Roboto Medium
    Roboto Thin Italic
    Roboto Thin
    
    Rokkitt
    
    URW Bookman L Demi Bold
    URW Bookman L Light
    URW Bookman L Light Italic
    
    URW Chancery L Medium Italic
    
    URW Gothic L Book
    URW Gothic L Book Oblique
    URW Gothic L Demi
    URW Gothic L Demi Oblique
    
    URW Palladio L Bold
    URW Palladio L Bold Italic
    URW Palladio L Italic
    URW Palladio L Roman
    
    I re-formatted, sorted, de-duplicated, and tried to remove corrupted lines which didn't function. However, I don't guarantee that they all work - I haven't checked them all methodically and comprehensively..
    Some fonts originally ended with "regular" - and didn't work (that is, change the font) until I dropped the word. However, "Standard Symbols L Regular" and "Dingbats Regular" then didn't draw anything - they may have some symbols defined somewhere in the address space.
    Nimbus fonts do seem to work with and without "regular".
     
    Last edited: Dec 4, 2014
  7. GambaLabs
    GambaLabs New Member
    This list is very handy.

    Thanks @drloris!
     
  8. drloris
    drloris Well-Known Member
    You like that? You'll love this:
    text_d.png

    Not perfect, because I rendered multiple font lines at once, we see the edges. Still, better than nothing for initial font selection.

    Hmmm. DejaVu versions all look identical
    text_e.png

    I also tried variations with no success. We're getting the default font.

    code:
    Code:
    function main(args) {
      var dat=[
    //rem out or delete the lines you're not interested in
    "Century Schoolbook L Bold",
    "Century Schoolbook L Bold Italic",
    "Century Schoolbook L Italic",
    "Century Schoolbook L Roman"
    /*,
    "DejaVu Sans Bold",
    "DejaVu Sans Book",
    "DejaVu Sans Mono Bold",
    "DejaVu Sans Mono Book",
    "Nimbus Mono L Bold",
    "Nimbus Mono L Bold Oblique",
    "Nimbus Mono L Regular",
    "Nimbus Mono L Regular Oblique",
    "Nimbus Roman No9 L Medium",
    "Nimbus Roman No9 L Medium Italic",
    "Nimbus Roman No9 L Regular",
    "Nimbus Roman No9 L Regular Italic",
    "Nimbus Sans L Bold",
    "Nimbus Sans L Bold Condensed",
    "Nimbus Sans L Bold Italic",
    "Nimbus Sans L Regular",
    "Nimbus Sans L Regular Condensed",
    "Nimbus Sans L Regular Condensed Italic",
    "Nimbus Sans L Regular Italic",
    "Oleo Script Swash Caps Bold",
    "Oleo Script Swash Caps",
    "Playfair Display Bold Italic",
    "Playfair Display Italic",
    "Playfair Display",
    "Playfair Display Black",
    "Playfair Display Black Italic",
    "Roboto Black",
    "Roboto Black Italic",
    "Roboto Bold",
    "Roboto Bold Italic",
    "Roboto Italic",
    "Roboto Light",
    "Roboto Light Italic",
    "Roboto Medium Italic",
    "Roboto Medium",
    "Roboto Thin Italic",
    "Roboto Thin",
    "Rokkitt",
    "URW Bookman L Demi Bold",
    "URW Bookman L Light",
    "URW Bookman L Light Italic",
    "URW Chancery L Medium Italic",
    "URW Gothic L Book",
    "URW Gothic L Book Oblique",
    "URW Gothic L Demi",
    "URW Gothic L Demi Oblique",
    "URW Palladio L Bold",
    "URW Palladio L Bold Italic",
    "URW Palladio L Italic",
    "URW Palladio L Roman"*/
      ];
      var text = args[0];
      var w=100*MM;
      var h=10*MM;
      var out=new Union();
      for (var i=0; i<dat.length;i++){
        var fontname=dat[i];
        var textshow=dat[i];
        var txt=new Text(textshow,fontname,2*w,h*0.95,2*MM,0.1*MM);
        txt.setTransform(new Translation(0,-h*i,0));
        out.add(txt);
      }
      var grid = createGrid(-w,w,-h*dat.length,h/2,-0.5*MM,2.5*MM,0.1*MM);
      var maker = new GridMaker();
      maker.setSource(out);
      maker.makeGrid(grid);
      return grid;
    }
     
  9. jpitkin
    jpitkin New Member
    Thanks!
     
  10. AloysHosman
    AloysHosman New Member
    It would be nice to not only be able to emboss or engrave fonts in an object, but also subtract fonts from an object such that it leaves an open space in the form of the text.

    Since it is not possible to print parts that are suspended in mid-air, such as the centre of an "O" (the O itself being an empty space), it would be nice to also include one or more stencil fonts on the server that make this possible. Off course, minimal wall size must be observed, so a font with relatively thick support lines probably work best.
     
  11. AlanHudson
    AlanHudson Shapeways Employee Dev Team
    If you have suggested royalty free fonts I'm all ears. I've been doing some font printing recently for a new feature so I'll add some stencil fonts into the mix. Mostly been pulling from GoogleFonts.
     
  12. AloysHosman
    AloysHosman New Member
    Already checked the Google fonts. There are three stencil fonts, but they look to feeble in their supports. I'll see if I can find some other free fonts.
     
  13. AloysHosman
    AloysHosman New Member
  14. wawwright
    wawwright Active Member
    Has anyone used Text() recently?
    It appears to me that the fontName property appears to be broken.

    Let me know if anyone else has gotten it to work.

    Here is the simple code that I ran:
    changing the fontName (myFont) does not do anything.



    function main(args) {
    var thickness = 1*MM;

    var myFont = "Impact";
    var myText = "Hello World";

    var grid = createGrid(-16*MM,16*MM,-16*MM,16*MM,-16*MM,16*MM,0.1*MM);
    var diff = new Text(myText,myFont,15*MM,7*MM,1*MM,0.1*MM);
    var maker = new GridMaker();
    maker.setSource(diff);
    maker.makeGrid(grid);
    return grid;
    }
     
  15. drloris
    drloris Well-Known Member
    You need to use a font which is available to the server; the code doesn't run on your computer.
    That is, you need to use one in the list I gave above (unless they changed it in the meantime).

    For example, try "Playfair Display Black".
     
  16. wawwright
    wawwright Active Member
    Great!
    Thanks, I got it now.
     
  17. AlanHudson
    AlanHudson Shapeways Employee Dev Team
    In ShapeJS 2.0 we support using custom fonts. The Text2D can now take a user provided font file. Here is an example. I'll try and get something more simple together but this shows the basic concept, select a ttf font for userfont and it will use that.

    var depthMax = 1;
    var depthMin = -1.5;

    var uiParams = [
    {
    name: "userfont",
    desc: "Font",
    type: "uri"
    },
    {
    name: "text",
    desc: "Text",
    type: "string",
    defaultVal: "Shape"
    },
    {
    name: "text",
    desc: "Text",
    type: "string",
    defaultVal : "Shapeways"
    },
    {
    name: "font",
    desc: "Font Name",
    type: "enum",
    defaultVal : "HelveticaRounded LT Std Bd",
    values : ["HelveticaRounded LT Std Bd","Cutive"]
    },
    {
    name: "fontSize",
    desc: "Font Size",
    type: "enum",
    defaultVal : "5",
    values : ["2","3.4","5","6","8","12"]
    },
    {
    name: "textpos0",
    desc: "Text Pos1",
    type: "location",
    defaultVal : {"point":[-0.024,0,0],"normal":[0,0,1]}
    },
    {
    name: "textpos1",
    desc: "Text Pos2",
    type: "location",
    defaultVal: {"point":[0.024,0,0],"normal":[0,0,1]}
    },
    {
    name: "labelpos0",
    desc: "Image Pos1",
    type: "location",
    defaultVal : {"point":[-0.024,-0.01,0],"normal":[0,0,1]}
    },
    {
    name: "labelpos1",
    desc: "Image Pos2",
    type: "location",
    defaultVal : {"point":[0.024,-0.01,0],"normal":[0,0,1]}
    },
    {
    name: "engraveDepth",
    desc: "Engrave Depth",
    type: "double",
    rangeMin: depthMin,
    rangeMax: depthMax,
    step: 0.1,
    defaultVal: 1.1
    }
    ];

    var vs = 0.1*MM;

    function getRotation(from, to){

    var a = new Vector3d();
    a.cross(from, to);
    var sina = a.length();

    var cosa = to.dot(from);
    var angle = Math.atan2(sina, cosa);

    if(Math.abs(sina) < 1.e-8)
    return new AxisAngle4d(1,0,0,0);

    a.normalize();
    return new AxisAngle4d(a.x,a.y,a.z,angle);
    }

    // calculates transformation of text to be placed between point p0 and p1 wih normals n0 and n1
    function getTextTransform(p0, n0, p1, n1){

    // calculation of text transform
    var nn = new Vector3d();
    nn.add(n0,n1);
    nn.normalize();

    var center = new Vector3d();
    center.add(p0, p1);
    center.scale(0.5);
    var xdir = new Vector3d();
    xdir.sub(p1,p0);
    var len = xdir.length();
    xdir.normalize();

    var xaxis = new Vector3d(1,0,0);

    var aa1 = getRotation(xaxis, xdir);

    var m1 = new Matrix3d();
    m1.set(aa1);
    var zaxis = new Vector3d(0,0,1);
    m1.transform(zaxis); // zaxis after first rotation

    var aa2 = getRotation(zaxis, nn);
    var trans = new CompositeTransform();
    trans.add(new Rotation(aa1.x,aa1.y,aa1.z, aa1.angle));
    trans.add(new Rotation(aa2.x,aa2.y,aa2.z, aa2.angle));
    trans.add(new Translation(center));
    return trans;
    }

    // cached data
    var distData;
    var bounds;
    var embossing;
    var shape;
    var textBox;
    var labelBox;

    var stripBuffer = 1*MM;
    var minDepth = 2*MM;
    var loc = 0;


    function createStrip(args,x,y,z,depth,size,sw) {
    var width = sw;
    var height = size + stripBuffer;
    var boxDepth;

    if (depth >= -minDepth) {
    // embossing
    boxDepth = minDepth;
    } else {
    boxDepth = -depth;
    y -= boxDepth / 2 - minDepth / 2;
    }
    var base = new Box(x, y, z, width, height, boxDepth);

    loc += height;

    var tp0 = args.textpos0.point;
    var tn0 = args.textpos0.normal;
    var tp1 = args.textpos1.point;
    var tn1 = args.textpos1.normal;

    tp0 = new Vector3d(-0.024, y, 0);
    tp1 = new Vector3d(0.024, y, 0);
    tn0.normalize();
    tn1.normalize();

    var tp01 = new Vector3d();
    tp01.sub(tp1, tp0);

    var tbx;
    var tby = size; // 12mm makes for ~1mm thick lines
    var aspect = 0.52; // aspect guess from web sources
    var spacing = 0;
    tbx = tby * aspect * args.text.length;
    var tbz = 35 * MM;

    var text2d = new Text2D(args.text);
    if (args.userfont !== undefined) {
    var font = loadFont(args.userfont);
    text2d.setFont(font);
    } else {
    text2d.setFontName(args.font);
    }
    text2d.setSpacing(spacing); // additional spacing between characters
    text2d.setInset(0);
    var tvs = 0.05*MM;
    text2d.setVoxelSize(tvs); // hardcode this or scale by size?
    textBox = new ImageMap(text2d, tbx, tby, tbz);

    textBox.setBlurWidth(tby / 100);
    // textBox.setBlurWidth(0.1 * MM);
    textBox.setBlackDisplacement(depth);
    textBox.setWhiteDisplacement(0*MM);
    textBox.setTransform(getTextTransform(tp0,tn0,tp1,tn1));

    var embossing = new Embossing(base, textBox);
    embossing.setBlend(tby / 50);
    if (depth < 0) {
    embossing.setMinValue(depth);
    embossing.setMaxValue(-depth);
    } else {
    embossing.setMinValue(-depth);
    embossing.setMaxValue(depth);
    }
    return embossing;
    }


    function main(args) {
    var size = args.fontSize * MM;

    if (size / vs <= 20) {
    vs = vs * 0.75;
    }

    var strips = 0;
    var sw = args.text.length * size * 0.6;

    var xresult = new Union();

    var sdepth = 0.5 * MM;
    var msratio = 1;
    loc = 0;

    if (size / sdepth > msratio) {
    xresult.add(createStrip(args, 0, loc, 0, sdepth, size, sw));
    strips++;
    }

    var width = sw * 1.1;
    var height = strips * 2 * (size + stripBuffer);
    var depth = 25 * MM;
    var dr = Math.max(width,height) * 1.1;

    var bounds = new Bounds(-width/2-2*vs, width/2+2*vs, -height/2-2*vs, height/2+2*vs, -depth/2-2*vs, depth/2+2*vs);

    var result = new Union();
    result.add(xresult);

    shape = new Scene(result, bounds);
    shape.setVoxelSize(vs);
    shape.setMeshErrorFactor(0.05);
    shape.setMaxPartsCount(1);
    shape.setName("FontTest_" + "s:" + (size * 1000).toFixed(2) + "mm_vs:" + (vs * 1000).toFixed(4) + "mm");

    return shape;
    }
     
  18. pendarestan
    pendarestan Well-Known Member
    @AlanHudson Could you please give us an updated list of fonts?
     
  19. AlanHudson
    AlanHudson Shapeways Employee Dev Team
    If you'd like a specific font then I'd attach a custom font. Does the above example not get across the concept well?

    It seems like the system fonts change a fair bit across computers we use, so the concept of a solid set of known systems fonts is not great.

    If the custom fonts concept doesn't work well for you tell me what's up and we'll find a solution.
     
  20. pendarestan
    pendarestan Well-Known Member
    Thanks, I understand the concept. I'd like to have a list of fonts already on the Shapeways servers for that menu, not just ["HelveticaRounded LT Std Bd","Cutive"]. If some servers have different fonts, could you please give a list of common fonts?

    A global function that returns this list could be used for setting up script parameters without clutter and would let you change the list without breaking existing scripts.

    Apache license and OFL fonts on Font Squirrel