Alpha Video Training
Results 1 to 5 of 5

Thread: Using @font-face

  1. #1
    Member
    Real Name
    Cameron Smith
    Join Date
    Oct 2018
    Posts
    14

    Default Using @font-face

    Hey there,

    I'm trying to install a font but it's proving to be quite the challenge. I've found the documentation here but can't seem to get the font to load. The font only comes in otf format. Here's what I've tried:

    1. Uploaded the font to: Default.WebProject/css/fonts/VerminVibes2.otf
    2. Opened the "Edit Style in Style Builder" property in a UX component.
    3. Clicked the 'Code' tab, added the following to the top of the CSS file:
    Code:
    @font-face { 
     font-family: 'VerminVibes2';
     src: url('css/fonts/VerminVibes2.otf');
     src: url('css/fonts/VerminVibes2.otf') format('opentype');
    }
    4. Changed the font-family of a static text control to:
    Code:
    font-family: 'VerminVibes2', sans-serif;
    I've tried putting the CSS locally in the UX and changing the font-family, but no luck. I've also tried converting the font from otf to woff format using an online converter but no luck. Any suggestions?

    My Alpha Anywhere installation is on version 5487_5217.

  2. #2
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,541

    Default Re: Using @font-face

    The file downloads and unzips as "Vermin Vibes 2.otf" with spaces... have you removed those?

    Also, if you're using Security, you must set security to Allow All Files in Folder.

    Your fonts folder needs to be published. If you're testing with LivePreview, then just copy the folder and file in place under the CSS folder.

    I added your @font-face code to a UX in the "Local CSS Definitions" property... and then changed the label of a text field to use it... setting Style to font-family: VerminVibes2;

    This worked for me...

    VerminVibes2Test.PNG
    Last edited by Davidk; 02-12-2019 at 12:08 PM.

  3. #3
    Member
    Real Name
    Cameron Smith
    Join Date
    Oct 2018
    Posts
    14

    Default Re: Using @font-face

    Thanks so much for your help David! Tried making adjustments to the css/fonts folder security settings as you suggested but still having problems getting this font to load.

    The file downloads and unzips as "Vermin Vibes 2.otf" with spaces... have you removed those?
    Yessir, renamed the file to be in Pascal casing.

    Also, if you're using Security, you must set security to Allow All Files in Folder.
    I am using security; I had right clicked the font in the Web Projects Control Panel and set the page security to always allowed. This didn't work, so I changed the css/fonts folder's security to Allow All Files in Folder as you suggested... still not getting the font to work.

    Your fonts folder needs to be published. If you're testing with LivePreview, then just copy the folder and file in place under the CSS folder.
    I'm thinking this is where the problem is. I can't seem to find where the LivePreview files are stored. Here's the file path of the font for me: <MyWorkspace>/<MyWorkSpace.WebProjects>/Default.WebProject/css/fonts

    How I added the font: I went into Web Projects Control Panel, clicked All Files on the left, opened the css folder, created and opened a fonts folder, clicked "Add File" and selected the .otf file. Is there somewhere else I should store this file?

    I added your @font-face code to a UX in the "Local CSS Definitions" property... and then changed the label of a text field to use it... setting Style to font-family: VerminVibes2;
    I tried this using VerminVibes2 and Vermin Vibes 2 (with spaces) but no luck. When I type font-family: in the CSS editor, Alpha's "intellisense" shows a lists of the fonts available, and Vermin Vibes 2 shows up with spaces. So Alpha recognizes the font through that, but it's not using that font on my static text control.

  4. #4
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,541

    Default Re: Using @font-face

    Regarding LivePreview... on the drive where your published files reside... if you were to perform a publish to Local Webroot... you'll find a folder name A5Webroot. Under A5Webroot you'll find the LivePreview folder... plus the folder for your Local Webroot Target Folder, if you have one.

    Under LivePreview, you'll see CSS etc. Put your fonts folder under css... so that the whole structure (viewed from Explorer) would be...

    Code:
    D:\A5Webroot\LivePreview\CSS\fonts
    My Local Webroot publishing goes to my D: drive.

    The folder you show...
    Code:
    <MyWorkspace>/<MyWorkSpace.WebProjects>/Default.WebProject/css/fonts
    is fine, but it is for your development environment... not LivePreview or Published.

    Another example from my machine is when I publish to Local Webroot. My Target Folder is "AlphaTest", and so the font resides here (shown in Explorer)...

    Code:
    D:\A5Webroot\AlphaTest\CSS\fonts
    Once you copy your fonts folder to A5Webroot\LivePreview\CSS then LivePreview of your font should work.

    Something else you can check if you're using a browser, is to right-click an empty space in the rendered page... and choose Inspect... then look at the Console tab. See if you have any errors there regarding the loading of your font.
    Last edited by Davidk; 02-12-2019 at 01:00 PM.

  5. #5
    Member
    Real Name
    Cameron Smith
    Join Date
    Oct 2018
    Posts
    14

    Default Re: Using @font-face

    THANK YOU! That was it. Really appreciate it, David!

Similar Threads

  1. Face Recognition
    By hallidayo in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 01-15-2016, 04:31 AM
  2. Question - Are face-to-face User Group meetings still relevant?
    By Steve Wood in forum General Questions
    Replies: 14
    Last Post: 06-12-2014, 01:01 AM
  3. IADN website face lift - critique
    By Steve Wood in forum General Questions
    Replies: 8
    Last Post: 02-15-2014, 03:45 PM
  4. Font face
    By Martin in forum Alpha Five Version 4
    Replies: 6
    Last Post: 08-26-2003, 09:16 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •