Streaming live at 10am (PST)

Glyphs for Web Font


#1

Hi!

We've installed a web font but would like to have the glyphs available as well, the way we are able to view them in InDesign. Could anyone advise?

Thank you!


#2

Hi Hannah,

Where did you install the font from? Was it from the Webflow control panel i.e. one of the Google Fonts or TypeKit fonts or did you install one yourself from your computer?

Best wishes,

Mark


#3

Hey @Allix_Hannah

I ran into this issue a while back as well. I dont know much about Indesign but you can access the glyphs by turning on the Glyphs Panel in Photoshop (Window > Glyphs). You can then paste them over into Webflow. Long process but it works.


#4

Hi Alex! I've tried copying and pasting the Glyph from PS6 to Webflow but no luck! Am I missing a step?

Thank you!


#5

Hi Mark! I've installed a font that we had purchased into the fonts section in the Webflow CMS - would it help to provide the URL of where we've purchased this font from?

http://www.dafont.com/baron-neue.font <--the font


#6

Hi Hannah,

Which glyph are you having problems with exactly? Are you on a Mac as I just downloaded that font, installed it to Webflow (actually just the bold version to save time for testing) and held down the option key whilst typing the letter z and I got the omega symbol glyph as expected. Are you unable to get that when holding down the key combination?

I also tried quite a few of the other key combinations and got the expected result too.

Does the font work fine in all other ways though?

Best wishes,

Mark


#7

I am on a Mac, yes!

So, for example, the E that's in our main logo is a glyph - if you take a look at the "Are you Blurred" text, the E is back to normal (as the logo is an image, the E is the text) - I'm trying to get the E to look similar to the logo, that's what I'm figuring out at the moment :slight_smile:


#8

Hmmm I see what you mean and just tried with some of the other glyphs in that font and couldn't get the 3 lined one that you're trying to get working to work either.

Really not sure on that one, the only thing I can think is that perhaps the font hasn't been fully unicode tagged maybe?

If you contact the author of the font (you're paying for it so he'd be able to help you out best) then he should be able to tell you if that's the case or not.

If not then I'm afraid I'm not too sure. I've read most of the threads on the forums here regarding this sort of problem but I believe most of them had been fixed within Webflow so the Webflow support would be best to answer this one.

Hope you get it sorted soon though. Would like to know what the problem is myself now! :slight_smile:

Best wishes,

Mark


#9

Hmmm okay got this working with a different character but I had to find the Unicode equivalent for the character and then had to use some custom CSS in the pages settings in order for it to work.

I also downloaded a free app for Mac called BirdFont which is an editor for fonts just so I could see the Unicode characters for each glyph.

Scrolling through though I couldn't see the 3 horizontal lines one anywhere though. That said there are over 24k glyphs in that font so I may have missed it somewhere!!

I'll have to bow out now and leave this down to the webflow experts I'm afraid. Definitely interested to see the outcome of this though.

Best wishes,

Mark


#10

Just to let you know what I did incase you manage to find the Unicode for that glyph I first of all typed BlURRD and made the D a span class.

Then in the code for the site I did this :

This renders on the page as :

Obviously I don't think that's quite the character that you're after but my eyes were going very weird after trying to look through the 24,000 glyphs in that font!! :wink:

If you don't mind my asking I was wondering how you got to that glyph in Photoshop? Might help me to find the same glyph and let you know what the Unicode equivalent is.

Best wishes,

Mark


#11

Sorry about all the posts here. Okay I've found out how to enter weird glyphs!! :slight_smile:

Still can't find the exact one you're after but hopefully the font author can help you with that or perhaps you know the Unicode for it.

Anyway what you want to do is go into :

System Preferences -> Keyboard -> Input Sources

Click on the plus (+) sign on the bottom left of that system preference panel. Find Unicode Hex Input and enable it. It will probably be in the Others section at the very bottom of that list.

Next up make sure you have the Show keyboard and emoji viewers in menu bar option selected in :

System Preferences -> Keyboard in the first keyboard section.

You should see a menu bar extra which allows you to now choose the Unicode Hex Input as your standard keyboard (you don't want to leave it like this all the time but it's what we need in order to type these characters in) .

Choose that option :

Now when you know the Unicode for a character you can just hold down the Option / Alt key on the keyboard and type the four digit / letter hex code and it will insert the character for you all within Webflow without having to do any of the jiggery pokery I was doing with CSS!!

Such as the one I showed above was (Hold down Alt first) then type 2CB6 and you will see the 3 lines appear.

Once you've found out the correct Unicode equivalent for that 3 lines that you're using then you should hopefully be good to go.

Don't forget to turn the keyboard input back to US or British or whatever your normal keyboard is set to or you'll have problems using certain keys on the keyboard.

Hope that helps a bit.

Best wishes,

Mark


#12

To go along with this if you don't like having to type in the Unicode number and messing with your keyboard settings then you can just pull up the Show Emoji & Symbols palette from the same keyboard menu and control click on the character / glyph that you want and choose Copy Character Info :

This will copy a load of items to the clipboard but the important one being the character you wanted at the start of what's copied so you can just paste it into Webflow and then delete the bits that you don't need. Pretty much everything after the first character.

Just another quick way of getting what you need once you've found the glyph you're after.

Best wishes,

Mark


#13

I still have to look into this!! Thank you sooo much!


#14

No problem. Let me know how you get on.

Best wishes,

Mark


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.