Having problems on defining typefaces

#1

I'm having pa hard time trying to define typefaces.
I tried font-family: -apple-system, sans-serif; to use San Francisco font and didn't work. Then I tried the CSS Font field and then I was partly successful as I didn't know how to actually define the font-weight.

So how do I solve these typography issues? What am I missing?

#2

Hey Mateus,

Right now the font system uses the format of CSS' font property. So definitions should be formatted as size font-family.

Screenshot 2016-11-12 13.58.31.png1690x1010 64.9 KB

Typography controls definitely need a lot of love, it's an area that we hope to spend more time on soon.

#3

I'll throw this into the Subform 101 as well, but another thing to keep in mind is that font-family names need to be specified as they are on the system.

So San Francisco Display Regular would be typed into the font field as SFUIDisplay-Regular. You can find the system name in your font manager: Font Book, Suitcase, FontExplorer, etc.

#4

No matter what I type in for a font-face, I'm getting a serif font. Even the basics like Arial, Helvetica, Verdana display a serif face. Also, bold and italic don't seem to apply either. I am using FontExplorer X Pro as a font-management system, so perhaps there is an incompatibility since it's an older version?

#5

Figured it out – the Tutorial Video shows you typing '22px Helvetica Bold' but that doesn't work. It only worked if I typed '22px Helvetica' without the addition of the font-weight.

#6

You're missing the hyphen between Helvetica and Bold. You have to type the names as their postscript names which will be all one word. So Helvetica Bold is Helvetica-Bold. You can find out the name by going to your font manager (so for me it's Font Book on Mac) and then getting the font information.

#7

Thanks for jumping in on this one, Toby.

I should say this, as well: we know the font handling is lousy right now. :wink: It's going to get polished up, so thanks for being patient on it.

#8

@erick
I was having issues with declaring fonts as well. My issue was that I declared the font weight after the font family.

Like this:

22px Helvetica Bold :no_entry_sign:

But in the css syntax for Font properties it says that the font weight should be declared before Size and Family name.
Like this:

Bold 22px Helvetica :white_check_mark:

Check this out as reference:
http://www.w3schools.com/cssref/pr_font_font.asp

#9

sorry if I overreact here..
but I always have to change the font and size by typing it? please tell me you will add more options!

why make it harder than it is? and make me think way too much, not everyone knows CSS or even needs the CSS code.

#10

@daniel.keller I believe that the type panel is in very early stage of development as @kevin mentions in the tutorial videos.

#11

ok thanks for clarification!

#12

Thanks, I'm aware – I was merely pointing out how it was appearing in the video, vs. what actually worked on my system.

#13

Your solution sort of works.

:white_check_mark: Bold 20px Roboto

:no_entry_sign: Medium 20px Roboto

I have all weights installed, but Subform doesn't seem to recognise them.