[Tip] Embedded WOFF Fonts

Hi,

For a Website I’m working on I needed to use a custom font that is not available on Google fonts and other similar services, so I studied a way to use custom embedded fonts in Xojo Web Applications.

I’ve red a few threads about this but none of them gave a concrete solution. So here is my solution, perhaps there is a better one but this solution is working pretty well and might help others to use embedded fonts in their Web Applications:

  1. First you need a WOFF font, you can create such fonts from any TTF fonts for instance, look on Google you will even find online services doing that for free. You can add several variations of your fonts (bold, italic, etc…), each one being a different WOFF file.

  2. Once you have your WOFF font, simply drag & drop it into your Web Application project somewhere, probably in a Fonts folder.

  3. Then add this code to your App.HandleSpecialURL:

Select Case Request.Path Case "fonts/myFont.woff" Request.Print(myFont) Return( True ) Case "fonts/myFontBold.woff" Request.Print(myFontBold) Return( True ) Case etc.. Request.Print(etc..) Return( True ) End Select
This will handle fonts requests from anywhere, no Session needed here.

  1. Add this code to your App.HTMLHeader:

<style type="text/css"> @font-face { font-family: myFont; src: url('special/fonts/myFont.woff'); font-weight: normal; font-style: normal; } @font-face { font-family: myFont; src: url('special/fonts/myFontBold.woff'); font-weight: bold; font-style: normal; } etc.. </style>
This defines your custom font, you can Google @font-face to have more informations about this CSS definition.

Now your application is ready to answer ‘myFont’ requests, but for this you have to set somewhere which font you want to use and select ‘myFont’. Normally you would do this inside a WebStyle. Unfortunately you can’t enter arbitrary font names in the font family property of a WebStyle (Or can you ? But I didn’t find a way yet).

  1. So we have to ‘inject’ some CSS at run time. Add this little function into your App.HTMLHeader:

<script type="text/javascript"> function addCss(cssCode) { var styleEl = document.createElement("style"); styleEl.type = "text/css"; if (styleEl.styleSheet) { styleEl.styleSheet.cssText = cssCode; } else { styleEl.appendChild(document.createTextNode(cssCode)); } document.getElementsByTagName("head")[0].appendChild(styleEl); } </script>

  1. Then lets say you have a WebLabel with which you want to use your font. Simply add this code the Shown event of your label:
Me.ExecuteJavaScript( "addCss(""#"+ Me.ControlID +" { font-family: myFont; } "")" )

That’s it. Your label will now use your ‘myFont’ embedded WOFF font.

Even if you use Google fonts or similar services, using embedded WOFF fonts has the benefit of not doing external queries to retrieve your fonts. You launch your application and it just work (this may be convenient if you use a Web Application on an Intranet without access to the Internet, for instance).

Hope this helps.

Cheers,
Guy.

This is a very nice, very precise and easy to apply tutorial.

Thanks Guy :slight_smile:

To generate WOFF, FontLab offers Transtype, a font converter program for Windows or Mac OS X at
http://www.fontlab.com/font-converter/transtype/

Thanks Michel, you’re welcome.

Just to add to the tip:

You will probably use a WebStyle on your WebLabel element to set the color, the size, etc… For the size, Xojo calculate a bounding height according to the Font it thinks it will be used and add a

element which may ‘crop’ your text (for example the bottom of a ‘g’ or a ‘y’).

If this happens to you, you must add to the WebLabel Shown Event:

Me.ExecuteJavaScript( "addCss(""#"+ Me.ControlID +" > div { height: 24px !important; max-height: 24px !important; } "")" )

and use the right value in place of ‘24’.

If you don’t known the original value you can check it with FireBug for instance, or use arbitrary values up until your letters are not cropped anymore.

Cheers,
Guy.

Keep in mind that manipulating the DOM of our controls is strongly discouraged and certainly unsupported.

Hi Greg,

Yes, this is perfectly understood.

Being unsupported is very understandable.

Being strongly discouraged is subject to discussion, as in some case, manipulating the Xojo DOM is the only way for us to workaround some of the Xojo limitations or issues. Depending on the work we have to do, we - sometimes - have to manipulate the Xojo DOM to reach our goal(s) or our clients goal(s).

I’m sure you very well understand this.

Cheers,
Guy.

The only reason we say this is that we reserve the right to change how the DOM is rendered without warning you. If you are directly manipulating the DOM, your projects may break unexpectedly with a future release.

Absolutely, this is perfectly normal.

Cheers,
Guy.

I don’t understand the need for this step 3 - is that required for my app to use the new fonts I want to use?

If you look at step 4, the request for the font is made to src: url('special/fonts/myFont.woff'); which is your app special request URL , and then step 3 serves the font to your style sheet. If you used a Google font, Google would serve it instead.

Got it! thanks - I was looking for that reference but didn’t notice it.

This would make a good project in the example folder for web projects! :wink:

Does anyone know if this could be used to add emoji support? I often want to use unicode but due to the fact that (typically windows) users dont have full support on top of the fact that sometimes they render differently, it would be nice to have an ICON font (think modern day WebDings). Is this out of line or are there already some fonts like this or ways to even build your own icon fonts with multiple svg files or something…

Also instead of having to use:

Me.ExecuteJavaScript( "addCss(""#"+ Me.ControlID +" { font-family: myFont; } "")" )

I often overwrite the Xojo styles I’ve created.
That’s how I can have different web endpoints (Company1.myWebsite.com and Company2.myWebsite.com) have different colored themes. You could do the same with fonts and have each company have their own font selection.

The name of the CSS Style is the same name of it in your project so it is easy to overwrite properties on the class. Also properties you dont overwrite inherent from what they normally are on that css style. So if you dont want to change the border-color or width from what you have in your Xojo style then you just dont change those values when you overwrite the CSS class in the header.

[quote=116337:@Brock Nash]This would make a good project in the example folder for web projects! :wink:

Does anyone know if this could be used to add emoji support? I often want to use unicode but due to the fact that (typically windows) users dont have full support on top of the fact that sometimes they render differently, it would be nice to have an ICON font (think modern day WebDings). Is this out of line or are there already some fonts like this or ways to even build your own icon fonts with multiple svg files or something…[/quote]

Interesting idea. Fonts being vectors also probably display much faster than bitmaps.

Tools like Fontographer and FontLab Studio (fontlab.com) will enable you to create your own fonts from pictures, and Transtype, or maybe online services, will turn them into WOFF. Then follow Guy Rabiller’s recipe.

This technique is of interest in the method you posted in https://forum.xojo.com/947-we-drag-and-drop-files-into-webpage to drag and drop objects on a web page. If I read correctly what you posted, weblabels can be moved the same way, so using fonts to display logos or emojis can make it really attractive, as it seems images are not available.

Without using webfonts, you may want to look into the dingbat fonts from Microsoft, which are available on every Mac and Windows machine :

  • Webdings (see below)
  • Wingdings (contains happy face :slight_smile: , sad face :frowning: , placid face :expressionless: )

That is exactly the use case I had in mind when I started exploring this whole topic.

Well it would help if Xojo has built in support for CSS Sprite Sheets so all our icons wouldn’t be sent over one by one…

There is a catch, though : vector fonts are inherently monochromatic, so if you want color, you need to superimpose several characters for different color areas. Doable, but not as simple as images. I have a few colleagues font designers who have done that in the past, but when FontLab came up with color bitmap fonts for Windows, these experiments went away.

Would it not be nice ? But could it not be possible to take advantage of CSS Sprite Sheets through WebDSK ?

These days for web, monochromatic is fine with me for many situations.

Guy Rabiller tricks works very well for Labels.

Now I tried it for a Button, but the button don’t change there font. Does anyone found a simple solution for fonts of buttons?

This is kind of ancient now.

Today browsers support TTF fonts.

Here is a new way :

  • Drag the TTF font into the project. Here I use Calebasse.ttf from my collection
  • Add a property wf as Webfile to App
  • In App.Open :

Sub Open(args() as String) dim f as folderitem = ExecutableFile.Parent.Child("Resources").Child("Calebasse.ttf") wf = Webfile.Open(f) End Sub

  • Drag a PageSource to your WebPage ; leave is as “Before content”
  • In that PageSource EditSource event :

Sub EditSource(ByRef Source As String, Location As Integer) Source = "<style>@font-face {"+EndOfLine Source = Source + "font-family: myFirstFont; src: url("+app.wf.URL+");}"+EndOfLine Source = Source + ".myStyle {font-family: myFirstFont;} "+EndOfLine Source = Source + "</style>" End Sub

  • Drag a WebStyle to the project.
  • Call it “myStyle”. That’s it.
  • Apply myStyle to the button or whatever control.

Michel Bujardet you are awesome!
Thats much cooler than the old way. THANK YOU!!!