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?

4
  • 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, 2013 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. Jun 6, 2013 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}" />? Jun 6, 2013 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 Jun 6, 2013 at 2:50

1 Answer 1

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
  • 1
    changing http to https was the trick! Jun 6, 2013 at 3:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .