The easiest way to integrate a Google Font into the Juicebox plugin for Lightroom would be to:
(1) Choose the Google Font you want to use from http://www.google.com/fonts
... click the 'Add to collection' button and then click the 'Use' button to get the code you need.
(2) Open the plugin's 'index.html' template file ('juicebox.lrwebengine/index.html') in a plain text editor and add the Google Font standard or JavaScript code to the <head> section of the 'index.html' file.
(3) Use the Juicebox-Pro configuration option galleryFontFace (setting its value to the name of the font you have chosen) in the embedding code, e.g. galleryFontFace: 'Rock+Salt'
The modified 'index.html' file should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= model.nonCSS.jb_galleryTitle %></title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="This is a Juicebox Gallery. Get yours at www.juicebox.net" />
<% if mode == 'preview' then %>
<script type="text/javascript" src="resources/js/live_update.js"></script>
<% end %>
<style type="text/css">
body {
margin: 0px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
</head>
<body>
<%
function rgba(hex, opacity)
hex = hex:gsub("#", "")
r = hex:sub(1, 2)
g = hex:sub(3, 4)
b = hex:sub(5, 6)
return "rgba(" .. tonumber(r, 16) .. ", " .. tonumber(g, 16) .. ", " .. tonumber(b, 16) .. ", " .. opacity/100 .. ")"
end
%>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
backgroundColor: '<%= rgba(model.nonCSS.jb_backgroundColor_, model.nonCSS.jb_backgroundOpacity) %>',
containerId: 'juicebox-container',
galleryHeight: '100%',
galleryWidth: '100%',
galleryFontFace: 'Rock+Salt'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>
Now, all galleries created by the plugin will use your chosen Google Font as the gallery font.