Explore the community Forums Lectora Online Lectora Online Questions & Answers Enabling custom fonts in Lectora Online

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #298226 Score: 0
    Profile photo of
    Anonymous
    2 pts
    @

    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 🙂

     

    #298227 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    333 pts
    @ssneg

    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.

    #298237 Score: 0
    Profile photo of
    Anonymous
    2 pts
    @

    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

    #298244 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    333 pts
    @ssneg

    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', FontAwesome", "'Street Wear', Streetwear"]

    And here’s the code from HTML Ext:

    <style> 
    @font-face { 
      font-family: Streetwear;
      src: local(Streetwear),
      url('Streetwear.otf')
    format('opentype');
    }
    </style>
    #299299 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    38 pts
    @wheels

    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

     

     

     

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.