• Registered: 2012-08-16
  • Posts: 4

Topic: Need help with font formatting...

Hi just want to say loving Juicebox galleries!

Just having trouble with formatting in the gallery title box to use my @font-face font for the text. If someone could help me out with the syntax I'd appreciate it.

I have a @font-face folder downloaded from http://www.fontsquirrel.com/fontface/generator which I have uploaded to my server. So I would just need to have the syntax with a placeholder description of where to put the url or urls. I have tried some syntax, but I couldn't get it to work.

Got this to work though:
<p><i><font face="Comic Sans MS" size="3">Sample text</font></i></p>

or this:
<p><i><font face="Times" size="3">Sample text</font></i></p>

but not my custom font. Any help would be appreciated... Thanks!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Need help with font formatting...

Try defining your @font-face in the gallery's 'index.html' page like this:

@font-face {
    font-family: Delicious-SmallCaps;
    src: url('Delicious-SmallCaps.otf');
    font-weight: 400;
}

... and use something like the following as your Gallery Title

<span style="font-family: Delicious-SmallCaps;">Juicebox Lite Gallery</span>

... replacing 'Delicious-SmallCaps' with the name of your own chosen font.

Alternatively, you could add the following to your gallery's 'index.html' page CSS:

.jb-area-large-mode-title  {
    font-family: Delicious-SmallCaps;
}

... and then just use plain text for your Gallery Title.

3 Reply by redwings (edited by redwings 2012-09-02 06:12:14)

  • Registered: 2012-08-16
  • Posts: 4

Re: Need help with font formatting...

Hey forgot to say thanks for the help. Been on vacation so I've let this slip.

Anyway, I got the desired effect, but I think I did it in a round about way. On Mac, I opened the Juicebox.app contents, went to the jbcore/classic/theme.css file and added this:

@font-face {
    font-family: 'champagne__limousinesregular';
    src: url('http://amandakwokcreative.com/files/champagne_limousines_web/champagne__limousines-webfont.eot');
    src: url('http://amandakwokcreative.com/files/champagne_limousines_web/champagne__limousines-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://amandakwokcreative.com/files/champagne_limousines_web/champagne__limousines-webfont.woff') format('woff'),
         url('http://amandakwokcreative.com/files/champagne_limousines_web/champagne__limousines-webfont.ttf') format('truetype'),
         url('http://amandakwokcreative.com/files/champagne_limousines_web/champagne__limousines-webfont.svg#champagne__limousinesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

to the top. and put in this as the gallery title:

<p><SPAN style="position: relative; top: 38px; left: 5px;"><font size="5" face="champagne__limousinesregular">Cottage</font></SPAN><img src="http://amandakwokcreative.com/akcreative/AKC-Logo-Simple.png" align="left" alt="Logo" width="100" height="100" /></p>

This got me my Logo with the title Cottage (in my champagnes & Limo font) beside it. Though this seems like a lot of code to write in, where as the css method appears to be cleaner. So do I input this (.jb-area-large-mode-title) to the theme.css in the juice box.app folder or to another? Also, looking at this css code it brings up another question: Is it possible to have different gallery titles for the small (iPhone) version, and the large version. Cause by using this method in the gallery title, when I view the gallery on the iPhone thumbnail version, the logo and the gallery title fall behind the thumbnails & are static, as one swipes through the pics (i.e.. looks like shit). Where as if I can turn off the gallery title & logo for the small version. It would look better. This would be better than the compromise I'm using now which is just turning off thumbnails on the iPhone version. Might need to be hand held on walking through where to enter the code if this is possible.

PS. wanted to add that I'm not sure what jpeg encoder you use, but I've been noticing a slight colour shift (desaturation) and artifacting (pixelation) on export, when resized in program. Minor, but maybe something to check out.

PPS. But to add, just want to say that this is a great product & can only get better. It's perfect... as it allows my gf to create quick device agnostic promo galleries for our business, with no need for the knowledge of coding! Thus, allowing her more time for her photography & us not having to wait for a developer to code them for us.

Look forward to hearing back from you.

mark.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Need help with font formatting...

Though this seems like a lot of code to write in, where as the css method appears to be cleaner. So do I input this (.jb-area-large-mode-title) to the theme.css in the juice box.app folder or to another?

It does not matter where the CSS is located (e.g. in the <head> section of your gallery's 'index.html' page or in the 'theme.css' page) as long as it is loaded by the browser.
You could put both the @font-face {} block and the .jb-area-large-mode-title CSS rules in the <head> section of your gallery's 'index.html' page (within <style></style> tags) or just add them to the bottom of the 'theme.css' page.

Also, looking at this css code it brings up another question: Is it possible to have different gallery titles for the small (iPhone) version, and the large version.

No. Only one <title> and <caption> are able to be associated with each image and are used in both Small Screen and Large Screen modes.

Cause by using this method in the gallery title, when I view the gallery on the iPhone thumbnail version, the logo and the gallery title fall behind the thumbnails & are static, as one swipes through the pics

Perhaps you could get around this by either repositioning your Gallery Title (using the galleryTitlePosition option) or setting screenMode="LARGE" to force the gallery to be displayed in Large Screen Mode no matter what device the gallery is being displayed in. Also, you can change the stacking order of elements (to bring them to the front) by using the CSS z-index property.

PS. wanted to add that I'm not sure what jpeg encoder you use, but I've been noticing a slight colour shift (desaturation) and artifacting (pixelation) on export, when resized in program. Minor, but maybe something to check out.

You may like to try increasing the default quality (from 80 to something higher such as 90) when resizing images in JuiceboxBuilder-Pro (by selecting the 'Change...' button in the 'Image Size' control panel on the 'Images' tab).
Otherwise, you could deselect the 'Resize Images' checkbox, create your own images in an image manipulation program such as Photoshop and feed them to JuiceboxBuilder-Pro. The application will then simply copy your original images across to the output 'images' folder (without resizing them) and will use them in the gallery.

PPS. But to add, just want to say that this is a great product & can only get better.

Thank you. We are continuously trying to improve Juicebox by fixing bugs and adding new features with each new release.