Enabling custom fonts in Lectora Online

Pardon my silly question.. Did you actually upload the Streetwear.otf to the additional files? This is very easy to miss.

Also, I've followed the procedure carefully and this is what I got at first (see pic 1). The font wasn't visible in Edit and Preview but worked in Browser Preview. This is because it wasn't installed on my system. I installed it (right click, install, if you're on Windows or use Font Book on Mac) and it was immediately visible in Lectora as well (see pic 2).

Overall, the current system seems to work but is in the "workaround" state. I'd expect a better UX at some point, where users could add fonts on the Org level by simply uploading those in the Org Settings and specifying a couple properties like local name, family name, etc. As a result:

- Org webfonts are linked in Lectora Editor CSS and work on any machine (no need for local install.. wasn't that the point of Lectora Online)

- Org webfonts are automatically attached to Org titles (if used to style any textbox), no need to attach manually

- CSS styles for the title are automatically created, no need to add Ext HTML object and type some code in it. By the way, the sample code in Lectora Online works but isn't very robust or even commented. You'd need some CSS knowledge to repurpose it or make it work robustly on any browser.

Check your capital letters spelling. The file is "Streetwear.otf" and your code says "streetwear.otf". Fix it in the HTML Extension and try.

Here's my Admin Org Settings:

["';Font Awesome';, FontAwesomeundefined';Street Wear';, Streetwearundefined

src: local(Streetwear),

url(';Streetwear.otf';)

format(';opentype';);

}

undefined

Hi Sergey

Thank you for your time.

Yes it is attached (ive attached some screen shots).

I imagine that it must be the css. It's a shame that we cannot attach folders, like lectora inspire, otherwise I could implement your solution on the blog.

Kind regards

Simon

Hi Simon,

When you say, "embedding the fonts is not working" I am assuming you see the fonts in edit and run mode in Lectora Online, and only when you publish and view the content on a machine without the font installed it doesn't work. Is that correct?

You should see the font (in Lectora Online) if you have the font installed on your computer and specified it properly in the organization setting.

If this is the case, then viewing the content on a machine without the font (not working) may have to do with the browser too. Not all font types work cross browser. What browser are you using to view the published content?

We do have plans to make this a better implementation, but we did not want to delay in allowing our customers to do something. Sorry for any inconvenience this may cause but the intent was to get something out to accommodate authors who needed this immediately. Sergey thank you for the suggestions also.

There are a lot of good resources out there if you search for "font-face"

If you have to deal with IE 8 (I hope you don't) here is a good link:

https://github.com/CSSLint/csslint/wiki/Bulletproof-font-face

A few others:

http://zoerooney.com/learn-web-fonts/

http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website

undefined

Hello Joe,

Long shot as this is a four year old post but do you know if the table you included above is still correct? I'm having some difficulty with IE and this may be the reason.

Thanks,

Thomas