Enabling custom fonts in Lectora Online

Hello

I am currently attempting to enable custom fonts on lectora online.

I have followed the instructions on the enabling custom fonts section of lectora help but it is not working.

I can see the fonts on my PC, so the organisation settings part is working, its just the embedding the fonts that is not.

I think it has something to do with my coding in the edit section of the html extension. I have keyed:

<style>
@font-face {
font-family: streetwear;
src: local(streetwear),
url('Streetwear.otf')
format('opentype');
}
</style>

can anyone see any obvious problems?

(I added this comment to a thread I found from 2012 but I wasn't sure if anybody would see it).

Thank you :-)

 

Comments

  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    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.
  • 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
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    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:
    ["&#039;Font Awesome&#039;, FontAwesome", "&#039;Street Wear&#039;, Streetwear"]

    And here's the code from HTML Ext:
    <style> 
    @font-face { 
      font-family: Streetwear;
      src: local(Streetwear),
      url(&#039;Streetwear.otf&#039;)
    format(&#039;opentype&#039;);
    }
    </style>
  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 528 eLearning ROCKSTAR Admin Team
    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?

    enter image description here

    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

     

     

     
  • tmooney5425
    tmooney5425 Community Member Posts: 1
    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
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!