6

I am trying to use Google fonts in a Visualforce page. Google offers three ways to use their fonts:

  1. <link href="http://fonts.googleapis.com/css?family=Alef" rel="stylesheet" type="text/css">

  2. @import url(http://fonts.googleapis.com/css?family=Alef);

  3. <script type="text/javascript"> WebFontConfig = { google: { families: [ 'Alef::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>

Problems with above approaches:

  1. When I try this option, I get an error that <link> needs to be closed with a </link> tag (even when I enclose this and the CSS styling around <head> ... </head> [I've read that <head> and <head> get ignored anyways when the VF page is interpreted into HTML.]). If I try to add a </link>, the fonts don't display. Also, I've tried an <apex:stylesheet value="http://fonts.googleapis.com/css?family=Alef"> with no luck.
  2. This option doesn't work either. I've thought of trying to download the CSS and saving it to a static resource, but I haven't been able to accomplish this either.
  3. This method does work. However, when the page loads, there is a quick glitch when loading the page where the Javascript is processing the font -- which is undesirable.

Are there any ways to use option (1) or (2) that I'm missing?

  • On #1, what gets rendered in the final output from the apex:stylesheet component? Also, have you tried <link href="fonts.googleapis.com/css?family=Alef" rel="stylesheet" type="text/css" /> (note the trailing slash) – jkraybill Jun 6 '13 at 1:35
  • Yea, I tried that, and the Google font never renders. I just tried now not using the "http://" in front of the link, and it didn't work for me either. – Scott Pelak Jun 6 '13 at 1:46
  • What about saving #1 css as a static resource and then import it with <link rel="stylesheet" type="text/css" href="{!$Resource.RESOURCENAME}" /> or <apex:stylesheet value="{!$Resource.RESOURCENAME}" />? – Boris Bachovski Jun 6 '13 at 2:09
  • I couldn't figure out how to do that from Google. This is what fonts.google.com/css?family=Lobster gives: ` @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 400; src: local('Lobster'), url(themes.googleusercontent.com/static/fonts/lobster/v5/…) format('woff'); }` Maybe the issue is with the woff format or the url for the .woff file – Scott Pelak Jun 6 '13 at 2:50
9

I was able to get it to work with a bit of tinkering. I'm not a pro (or even an amateur) at CSS, but I wasn't able to style using elements. I had to use class ids instead.

<apex:page >
  <apex:stylesheet value="https://fonts.googleapis.com/css?family=Alef"/>
  <style>
      .alef {
        font-family: 'Alef', serif;
        font-size: 24px;
      }
    </style>
  <body>
    <div class="alef">Making the Web Beautiful!</div>
  </body>
</apex:page>
  • 1
    changing http to https was the trick! – Scott Pelak Jun 6 '13 at 3:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.