How are fonts defined to bold and italic text, within the Blocs5 interface?
Loading fonts is straight forward enough and super easy. How to allocate a bold font to bold or strong text is the the bit I can’t seem to find.
Eg. In paragraph text, how would I use the italic or bold font for italic or bold text?
At present if you select a font, that is bold for example, it should be visible in the side panel with the relevant name if you click on that text bric, whether header or paragraph.
There is the possibility to apply a custom class to any particular piece of text and allocate a weight setting or style, however that physically changes the appearance of the text and it’s better to use appropriate fonts types, rather than applying italic styling to a regular font for example. No doubt you already knew that.
Thanks. Yes, I am familiar with selecting a font for text.
I’ll procedd by just loading my italic and bold fonts in the Font Manager and then override the default weight and style with some CSS, for bold and italic.
Were you thinking about semantic @font-face declaration? I think that was something Norm was going to look at.
What I specifically meant in code is:
strong {font-family:'font-bold-weight'; font-weight: normal}
i {font-family:'font-italic'; font-weight: normal; font-style: normal}
This avoids the faux rendering of slanting a font for italic and enlarging a font to create approximate looking italic and bold looking fonts. These can look OK on some monitors and not OK on other monitors but many don’t notice it.
It also gives you full control on the the font version and the weight.
Good subsetted woff2 fonts are small enough, that the small overhead of doing this is well worth it.
Sounds like something that should be added as a feature suggestion.
Yes it would be a good feature in the future.
you can with a class. Say you have some paragraph text and you select a word and set it as bold. You could define this bold with p strong
Change the typefont, weight, etc etc.
Sure, but I think that is beyond the scope of many users and requires some knowledge of html and css. The result is probably that many use italic and bold without knowing the implications of not having a an italic or bold font defined. Although many won’t notice any issue on their monitor but italic and bold fonts can look unpleasant on some users monitors. At least I think they do.
Even if you didn’t know the HTML to know what classes to add in the class manager (you don’t need to know css), you can wrap in a span and add a class too. Maybe you don’t end up with the correct markup, but you could style it the same.
Of course this all become mute, if you use a variable font.
Although you still need to define them AND include font-synthesis: none. Without the font-synthesis: none, some browsers will still apply faux rendering. I wasted a few hours on that one that I won’t get back.
Ok, I might be missing something, but if you are defining the correct font with weight using the class editor then it should be no issue. ??
eg.
Typeface = Raleway - Bold
You have a valid point, that this is beyond the scope of most users… but then the entire industry is a shifting goal post, and keeping up is always fun.
You mentioned using a variable font. If using a variable font then you also have to define the weight, slant degree or oblique (depending on the variable font features) for the italic, and also add font-synthesis: none. Otherwise browsers will just detfault to the variable front fallback weight, and faux render it.
The main advantage using a variable font is to be able to specify exactly how you want the bold and italic to be rendered without adding additional font files. This needs to be done correctly in teh CSS and if not the browser will render it.
In my experience, variable fonts are not worth the hassle/benefits for web pages. 4 subsetted font woff2 files (normal, italic, bold & bold italic) are usually about the same size as 1 same subbsetted variable font woff2 file.
How do we use this cool feature in Blocs?
This is a huge question and way beyond a simple answer, but to summarise, YES it is possible to use Variable Fonts in Blocs, by writing or adding the full CSS to implement them properly.
The bottom line is that the benefits of using Variable fonts are usually not significant enough to justify the effort required to use them, when you factor in the ALL of the factors. Usually, for each main font you use, a well subsetted Variable version will take longer to download than 4 subsetted normal versions of that font, which is more than most users use anyway.
The much bigger question is why use a Variable font? That demo for example loads a Variable font that is 772Kb! While that Variable Roboto is a multi language font to show many of the variable font capabilities, IMO, it would have no place on a web site other than a Variable Font Capability web site.
Here is a good place start your Variable font journey.