Unbounce Answers/Next Steps/Tips & Tricks
How to Use Google Web Fonts on Your Landing Page
Ryan Engley
posted this on July 21, 2011 05:51 pm
With some copying, pasting, and a little bit of CSS code, you can easily add Google Web Fonts to your Unbounce landing page.
Keep in mind, Web Fonts are not compatible with all browsers.
- Visit www.google.com/webfonts and choose the font you would like to add to your landing page.
- When you've chosen the font you want to use, click 'Quick-Use'
-
Scroll down to the section 'Add this code to you website' then highlight and copy the code from the 'Javascript' tab.
-
Return to your Unbounce landing page and paste this code into the 'Javascript' tab.
From the Placement drop down menu, be sure to choose 'Head' then click Done.
-
Open the 'Custom CSS' dialog box and insert the following code:
<code<style type="text/css"> h1 { paste_font_webcode_here } </style>Note: the 'h1' tag affects the text style this font is applied to. 'h1' applies this font to the 'Heading 1' style but this tag can be changed accordingly (e.g. h2 = Heading 2, h3 = Heading 3 etc.)
- Return to the Google Web Fonts page, navigate to the section 'Integrate the fonts into your CSS,' then highlight and copy that code.
- Navigate back to the 'Custom CSS' dialog box on your Unbounce page and replace the line
paste_font_webcode_herewith the code you copied in step 6.
-
Now bring up the text whose font you would like to change in the text editor.
Highlight it and select 'Heading 1' from the styles drop down menu on the left.
-
Close the text editor, save your page, and view in published mode to see your changes in action.
You'll notice that you cannot see CSS changes in the editor. To double check the appearance of your CSS code, you'll have to re-publish your page and check it out at the published URL.
Comments
Is there any way of adding @font-face yet? Google Web Font's are great, but hey are still few, and they don't (and may never) have the more popular designer fonts.
Thanks
Has anyone had luck using htaccess to enable web fonts using Firefox? I first transferred the font files to the same domain, then when that didn't work, I followed the htaccess as outlined on StackOverflow.
http://stackoverflow.com/questions/2541834/why-dont-web-fonts-in-firefox-work-on-a-different-domain#framed-by-olark
I then tried adding this text to the htaccess file:
AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf
Has anyone gotten this to work?
I've tried adding the Google code as Standard as well as Javascript from the "add code to your website" box.
@Eamonn - The webfonts should work like a charm so just let us know if you're still running into any issues. I'd recommend double checking the CSS to be sure the webfonts are set to apply to right text blocks.
Also, I'm thrilled to let you know that we're adding webfont support directly into the app. You can access some new fonts in our new editor beta by editing your pages at https://ned.unbounce.com/
Hope that helps!
Mmmm this is not working for me.'
JavaScript placed in head:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans:300:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
CSS
<style type="text/css">
h3 {
font-family: 'Open Sans', sans-serif;
}
</style>
I end up with another font... http://unbouncepages.com/ielts/
Using this javascript method, can one use more than one google font on the same page?
Hey Jess - you sure can. You'll just customize the CSS so that one font applies to say, <h1> text while the other modifies your <p> text.