How to edit 'font-family'?

#1

I need to design sites in the Japanese language. Because there are a couple thousand characters in Japanese, web fonts that include all those characters don’t exist because they would be too large to download. In SoftPress Freeway it’s easy to get around this because I can directly edit the font family and type in local font names like Osaka (an old MacOS Japanese font) or Heisei Kaku Gothic (a modern MacOS Japanese font) or Meiryo (a modern Japanese font on Windows). I can even type on bold variants of those fonts to make the text appear more bold (assuming the end user viewing my site has the fonts, which is likely the case). But I cannot figure out how to accomplish this very important task in Blocs.

Blocs is clearly aimed at an audience that use English and similar “roman” fonts that have very few letters and therefore web fonts exist. But again, Japanese web fonts (completely ones, not just Katakana) don’t exist, so I need to manually type in local font names. Most everyone coming to our site either uses Windows or MacOS, so my manually built font-family works great. I have years of experience with that in Freeway, so I know that. But how do I do this in Blocs?

Thanks,

James

#2

You could write a little css and add that to the page header and also attach the fonts in a directory via the project attachments in project settings.

If you upload a zip of some fonts I’ll pull together a sample project for you :+1:

#3

I wouldn’t want to attach any Japanese fonts to my web pages. Many of those fonts are 6.8MB in size. That’s why in Freeway I merely reference them by name, and if the fonts are on the device of the person browsing my website, those fonts get used. And like I said, Meiryo is on all modern Windows computers, and the other fonts like Heisei Kaku Gothic are in almost all versions of MacOS X. So merely referencing them by name usually ends up with the correct font being displayed on the user’s device. It works well even when browsing on mobile devices.

#4

You could add an internal style via page settings additional code

<style>body{font-family: "Font name!important";}</style>

Add the font name and keep important just to make sure it’s forced.

#5

When adding the fonts I use for BOLD Japanese, I think the code would be structured like the following (not sure about placement of the “!important” though):

<style>body{font-family: 'ヒラギノ角ゴ Std W8', 'Hiragino Kaku Gothic Std', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', Osaka, Sans-serif!important;}</style>

But I also have font-families for non-bold Japanese, and also a Japanese font-family that is akin to English serif fonts. I’m not sure how to link the font families to specific text on the page in Blocs. This is important since I wouldn’t want all the text on the entire page to be the same. It seems your suggestion would apply the same font-family to all text on the page, which of course is not desirable.

When Freeway generates a separate CSS file, it’s formatted like the following:

.DisplayBLKsysGRY { color: #c2c0c0; font-family: 'ヒラギノ角ゴ Std W8', 'Hiragino Kaku Gothic Std', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', Osaka, Sans-serif; font-size: 24px; text-align: center }

“DisplayBLKsysGRY” is what links that CSS “font-family” to particular text within the page. All I do in Freeway is just select text on the page (a single word, a sentence, a paragraph, etc.) and then I can assign the “DisplayBLKsysGRY” style to it. So I’m trying to figure out how to accomplish the same in Blocs such that I can use different font-families on the same web page in Blocs.

Thanks.

#6

Add this to your page settings then in blocs assign the class name (DisplayBLKsysGrey) to the text element you want to style. When you export you should see the correct font. Just not in app.

#7

I added the following code to the Header within Page Settings:

<style>.displayblksysgry {font-family: 'ヒラギノ角ゴ Std W8', 'Hiragino Kaku Gothic Std', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', Osaka, Sans-serif!important;}</style>

Note that you must use all lowercase because Blocs doesn’t seem to allow uppercase for class names. When I applied the “displayblksysgry” class name to selected text, as you said, it doesn’t show the bolder font in page view, but when I preview in Blocs (or the browser) it displays perfectly.

Thank you for the guidance, Norm!

#8

In future this will not be as much of a mess around as this. I have some bug improvements coming to Classes and the editor in 3.3.

Im glad this works for now.