Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows and more...

Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.

Initial Email From: Alexi
Initial Email Subject: Custom Fonts
Support Case Month: January 2013

I'm trying to use a custom font for the navigation menu called "Neutraface Condensed Titling", which is what the logo in the top left of the page is done with. I read the two knowledgebase posts about custom fonts, but do not have the syntax correct to apparently get this font to load. Please check the URL, and see the reference to the font in the css file at:

/css/styles.css

Also, on my local PC they are viewable, but looked a bit bitmapped/jagged. Why does the font not look better? I'm feeling like I need to create images of these, so they look cleaner/clearer, but that should not be the case.

Thanks,
Alexi

Reply From: Likno Customer Support

Dear Alexi,

In order for your Custom Fonts to work, they must be available online so that they can be downloaded to any browser viewing your site.

This is done with Web-Fonts, such as Google Fonts. You cannot upload a custom font that you have in your PC (e.g. in Photoshop or Corel).

First of all because it is very tricky technically (and requires full access to the server) and secondly because their license would never allow this…

If you are using a Web Font, then make sure that it is properly included in your page (try it with a simple <div> that uses the font). If it works there it will also work in the menu without doing anything else.

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.

Initial Email From: Daniele
Initial Email Subject: Custom fonts
Support Case Month: May 2012

Hello, I have contacted you about this a while ago, I thought I had fixed it but it doesn't work.

I'm trying to use custom fonts with this menu, but I can see them only on my pc, probably because the font is already installed on my system.

Adding this code to the page containing the menu doesn't help:

@font-face {
    font-family: ELEGANCE;
    src: url('fonts/ELEGANCE.TTF');
}

I chose ELEGANCE as a custom font in Allwebmenus, to no avail.

Here's how the menu's supposed to look:

http://www.deathless.it/theory.jpg

and here's how it looks on a random pc:

http://www.deathless.it/reality.jpg

Thanks in advance for your help.

Reply From: Likno Customer Support

Dear Daniele,

In your project you are calling a “Flash D” font. Is this what you wanted? In your code before you said you were adding the “ELEGANCE” font.

Please make sure that you are entering the font with the correct name, or it will not be recognized.

After searching your CSS files online, I also saw that you are loading “FlashDLight”. Can you try adding this in AllWebMenus?

(be sure to enter it EXACTLY as it is in your CSS with the same capital letters etc.)

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Daniele

These are the fonts I embedded:

@font-face {
    font-family: 'FlashDLight';
    src: url('flash_d_light-webfont.eot');
    src: url('flash_d_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('flash_d_light-webfont.woff') format('woff'),
         url('flash_d_light-webfont.ttf') format('truetype'),
         url('flash_d_light-webfont.svg#FlashDLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

I have corrected the menu so it points to FlashDLight and it seems to work now.
Thanks for your help,
best regards.
Daniele