How to use a custom font?

[Caronte3D]

I try LoadFont with the full path to the ttf font, but it doesn't seem to change the font in the texts

[Mijikai]

Im not sure if that is possible.
In PB there is a extra function for it RegisterFontFile(FileName$).

[munfraid]

You could try this:

https://forums.spiderbasic.com/viewtopic.php?t=1687

Worked fine for me in several projects.

[Caronte3D]

Yes that is what i was doing thanks
Anyway my app have more and more JS and less SP syntax

[Mijikai]

Nice thanks, should be added to SB.

[Mijikai]

Is there a way to use this font: https://ggbot.itch.io/zector-font ?
I cant get it to work (im trying to load the css below with RSBasic's OpenLibrary() command)

css:

Code: Select all

@font-face {
  font-family: 'Zector';
  src: url('Zector.woff2') format('woff2'),
       url('Zector.woff') format('woff'),
       url('Zector.ttf') format('truetype');
}

[Caronte3D]

This way works:

Code: Select all

; TEST LOAD GLOBAL FONT =======================================================================================

  EnableJS
if ('FontFace' in window) {
    var font = new FontFace('Zector', 'url(./resources/Fonts/Zector.ttf)');
    font.load().then(function(loadedFont) {
        document.fonts.add(loadedFont);

        // Make a global style
        var style = document.createElement('style');
        style.textContent = `
            * {
                font-family: 'Zector', sans-serif;
            }
        `;
        document.head.appendChild(style);

        console.log('Font applied to whole document.');
    }).catch(function(error) {
        console.error('Error loading font:', error.message || error);
    });
} else {
    console.error('FontFace not compatible with this environment.');
}
DisableJS;    

; TEST LOAD FONT =======================================================================================



  If OpenWindow(0, 0, 0, 270, 190, "TextGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    TextGadget(0, 10,  10, 250, 20, "TextGadget Standard (Left)")
    TextGadget(1, 10,  70, 250, 20, "TextGadget Center", #PB_Text_Center)
    TextGadget(2, 10,  40, 250, 20, "TextGadget Right", #PB_Text_Right)
    TextGadget(3, 10, 100, 250, 20, "TextGadget Border", #PB_Text_Border)
    TextGadget(4, 10, 130, 250, 20, "TextGadget Center + Border", #PB_Text_Center | #PB_Text_Border)
    TextGadget(5, 10, 160, 250, 20, "<b>Bold</b> TextGadget") ; Using HTML markup
  EndIf
  

If do you want to apply the font to only an element:

Code: Select all

  If OpenWindow(0, 0, 0, 270, 190, "TextGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    Define textwithfont=TextGadget(0, 10,  10, 250, 20, "TextGadget Standard (Left)")
    TextGadget(1, 10,  70, 250, 20, "TextGadget Center", #PB_Text_Center)
    TextGadget(2, 10,  40, 250, 20, "TextGadget Right", #PB_Text_Right)
    TextGadget(3, 10, 100, 250, 20, "TextGadget Border", #PB_Text_Border)
    TextGadget(4, 10, 130, 250, 20, "TextGadget Center + Border", #PB_Text_Center | #PB_Text_Border)
    TextGadget(5, 10, 160, 250, 20, "<b>Bold</b> TextGadget") ; Using HTML markup
    
    
EnableJS  
  var font = new FontFace('Zector', 'url(./resources/Fonts/Zector.ttf)');

  font.load().then(function(loadedFont) {
  
    document.fonts.add(loadedFont);
    $(v_textwithfont.gadget).css('font-family', 'Zector, sans-serif');
  
  }).catch(function(error) {
    spider.debug.Print('Error loading the font:'+error.message+'   '+error);
  })          
DisableJS;    
    
  EndIf

[Mijikai]

Perfect, got it working for a canvas with vector drawing (first example + LoadFont()).
The second example worked great with gadgets (if #PB_Any is used the GadgetID() is needed).
I am working on a little game project using the vector drawing library.

Thank you very much.

[Mijikai]

Is there a way to supply the font name, type and path as procedure parameters?

Code: Select all

Procedure.i LoadFontZector(gadget_id.i);<- would be nice to have the font family and path as parameters
  !var font = new FontFace('Zector','url(./font/Zector.ttf)');
  !font.load().then(function(loadedFont) {
  !document.fonts.add(loadedFont);
  !$(v_gadget_id.gadget).css('font-family','Zector, sans-serif');
  !}).catch(function(error) {
  !return 0;
  !})  
  ProcedureReturn LoadFont(#PB_Any,"Zector",12,#PB_Font_HighQuality)
EndProcedure

[Caronte3D]

I'm not in my house (so... no tested) but this way should work:
Tweak as you want:

Code: Select all

Procedure.i LoadCustomFont(gadget_id=#PB_Any,FFamily.s="Arial", FPath.s="", FSize=10);<- would be nice to have the font family and path as parameters
  !var font = new FontFace(v_ffamily,'url(v_fpath)');
  !font.load().then(function(loadedFont) {
  !document.fonts.add(loadedFont);
  !$(v_gadget_id.gadget).css('font-family',v_ffamily+', sans-serif');
  !}).catch(function(error) {
  !return 0;
  !})  
  ProcedureReturn LoadFont(gadget_id,FFamily,FSize,#PB_Font_HighQuality)
EndProcedure