Topic: New fonts

How to add more/new fonts to Kosel Theme?

2 (edited by Jack @ Showkase 2012-12-30 09:26:48)

Re: New fonts

Kosel provides a set of 'websafe' fonts which are present on most users' computers plus one special webfont for headings. Anything further would require changes to the theme.

We've added some hints on custom styles and fonts in the showkase support docs – good knowledge of css required.

jack

Re: New fonts

Love the Bebas Neue font for Headings.

Unfortunately it does not appear to render letters with diacritics (foreign accents) well. Specifically, French and German text. The font seems to revert to a wider type on letters that have an accent, which looks.... very odd.

I tried using the "insert special character" button in the text style editor. Same result.

I then tried using a different font, and the issue disappeared. Great. But... none of the other options have a bold-condensed-all-caps look, so the titles seem to merge with the body text, rather than stand out, and the impact is diluted down to blah. :(

Is there any way to check to see if that font (or an equivalent) comes with official diacritics? Or add a font color option to the Customize > Theme > Fonts > Headings Font ?

4 (edited by darcey 2013-01-22 17:13:33)

Re: New fonts

Google webfonts (http://www.google.com/webfonts) have a couple that might be a good substitute for Bebas Neue:

Roboto Condensed Bold (700 weight)

BenchNine Bold (700 weight)

Re: New fonts

With regard to diacritics in Bebas Neue, please see this forum thread which should hopefully help in conjunction with the information in the Adding Custom Styles and Fonts section of the Showkase support pages.

Re: New fonts

Thanks, will give it a shot.

Re: New fonts

Took me awhile to figure out the CSS and directory paths, but I got it sorted in the end.

Re: New fonts

That's great! Thank you for posting back to let me know.

9 (edited by darcey 2013-02-11 23:24:36)

Re: New fonts

New wrinkle.

The font appears to render correctly in the body of the page (http://174.122.127.226/~petraluz/DE/uuraaleet//) but not in the nav area. See the last button on the nav.
My custom.css file contains:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 23, 2013 10:16:30 PM America/New_York */

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

}

header hgroup h1 {
  font-family: 'BebasNeueRegular', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

header hgroup {
  font-family: 'BebasNeueRegular', Arial, sans-serif;

}


Also, on Windows machines in IE 7 and 8, even after installing the Intnl French version of the font, the French accents are not rendering properly: http://174.122.127.226/~petraluz/FR/

Of course it all looks fine on my Mac (Safari 6.0.2, Chrome 24, Firefox 18.0.2). But try explaining that to a client using IE 7 or 8, who are convinced their demographic uses similar.

I think you should replace Bebas Neue. Seriously. It's a default font in Kosel, and the only condensed font option, so it's gonna cause umpteen headaches for anyone else even referencing a foreign text or name within an English site.

As I mentioned above, Google webfonts (http://www.google.com/webfonts) have a couple that are almost identical to Bebas Neue but have full diacritics:

Roboto Condensed Bold (700 weight)

BenchNine Bold (700 weight)

Re: New fonts

The font appears to render correctly in the body of the page (http://174.122.127.226/~petraluz/DE/uuraaleet//) but not in the nav area. See the last button on the nav.

In the UÜRÄALEËT link, the Ü and Ä characters seem to be rendered correctly but the Ë is not.
This looks like all your own code is correct (otherwise the Ü and Ä characters would be rendered incorrectly also) but there may be a deficiency in the font itself. (This is just an observation. I am not laying blame with the font itself as I do not know the reason for the problem.) Does the Ë character render correctly if used in the body of the page?

Also, on Windows machines in IE 7 and 9, even after installing the Intnl French version of the font, the French accents are not rendering properly: http://174.122.127.226/~petraluz/FR/

I have viewed your web page in IE9 on my Windows PC and the French accents are rendered correctly in IE9 (but not in IE7 or IE8 Browser Mode).
This forum thread seems to describe your scenario but it looks like you already implement the solution that is offered.
Unfortunately, I do not have a suitable workaround just now but I will ensure that the developers are aware of your post above.

11 (edited by darcey 2013-02-12 03:37:55)

Re: New fonts

No, it seems to have a problem with the Ë in the body as well: http://174.122.127.226/~petraluz/DE/galerien/  (see the name of the first gallery).

At first I had the wrong fontkit loaded (French instead of German) and everything was fine except the Ä. Then I loaded the correct German fontkit and the problem switched to the Ë. This makes me suspect that they have carved up the diacritics according to each language for each language kit, rather than include all diacritics. Possibly to increase the speed of the page load. But this backfires when you have an English site that mentions, for example, both French and German authors/books/places/adopted phrases and you need both sets. I wish it was a full font, like the alternative font options in the theme, so that all letters would render properly. That, or replace Bebas Neue with another condensed-bold font that comes with a full set of diacritics.(If I didn't love the contrast of a bold-condensed font with plain ol' sans serif Arial, I'd have just chosen an alternative font from the theme options ages ago and spared myself this hassle. But the theme designer made a strong design choice when setting this as the default look for Kosel, and it really is the best pairing IMHO.)

I read the forum entry above and yes, I have already done that and just re-checked my code and it appears correct. I appreciate your forwarding the issue to the developers. The site is due to go live this week, so fingers crossed they address it asap.

Re: New fonts

Just learned that German only has an umlaut accent on O, A and U.  The word "Noël" is French.  Go figure.

And of course, we would have this word on one of the main German pages: http://174.122.127.226/~petraluz/DE/galerien/

This does not negate the need for a full set of diacritics, but it does lower the possibility of it being an issue that crops up in other places on the site in the future.