Google Analytics & Fonts

1

What do people here think about using Google Analytics and Fonts? Is that something I should avoid when designing a web site out of respect for my user’s privacy? It seems like it’s generally accepted that I’d want to keep numbers on what pages are being visited but I don’t feel like it’s necessarily a good idea to feed that data into a larger system given the current atmosphere around data surveillance.

Boing Boing appears to be using Analytics so maybe I’m just being over concerned about that kind of info harvesting?

2

I know @Lee_Ars is using an alternative to Analytics on one of his sites, perhaps he can describe it here?

I don’t think a request for a globally shared font file would be a big privacy concern though.

3

Apologies—I don’t visit for 11 days and I get mentioned. D’oh.

I’m using Piwik, self-hosted, with Discourse. I’m also using locally-hosted typeface files with @font-face; however, the typeface hosting really is more in the interests of keeping http connections to a minimum and helping with page load times.

Piwik does everything that I need in an analytics system, and according to their docs they can scale very large. The advantage, as @patrace points out, is that the analytical data stay local (and Piwik has options to ensure that the data it does hang onto is anonymized, so that it’s useful in aggregate for your metrics but useless to track individual users). If you are leery of Google Analytics, then Piwik is a good way to go.

1 Like
4

Thanks! Looking into Pikwik and Mint and trying to switch to locally hosted typefaces.

5

For local typefaces, I rely pretty heavily on FontSquirrel, since they provide not just the typeface files but also ready-to-go @font-face CSS that you can plug into your site.

For example, to use Arvo, a fun slab-serif suitable for titles, you’d locate it on Fontsquirrel, click the “Webfont Kit” tab and pull down the bundle it gives you, stage the actual typeface files on your Discourse server (I’m sticking them in public/assets underneath my Discourse root directory, though @codinghorror might have an alternate location to suggest), and then add the following to your site’s stylesheet customizations in the Discourse admin panel:

// Fontface definitions
@font-face {
  font-family: 'Arvo';
  src: url('/assets/Arvo-Regular-webfont.eot');
  src: url('/assets/Arvo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/assets/Arvo-Regular-webfont.woff') format('woff'),
       url('/assets/Arvo-Regular-webfont.ttf') format('truetype'),
       url('/assets/Arvo-Regular-webfont.svg#ArvoRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Arvo';
  src: url('/assets/Arvo-Italic-webfont.eot');
  src: url('/assets/Arvo-Italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('/assets/Arvo-Italic-webfont.woff') format('woff'),
       url('/assets/Arvo-Italic-webfont.ttf') format('truetype'),
       url('/assets/Arvo-Italic-webfont.svg#ArvoItalic') format('svg');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Arvo';
  src: url('/assets/Arvo-Bold-webfont.eot');
  src: url('/assets/Arvo-Bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('/assets/Arvo-Bold-webfont.woff') format('woff'),
       url('/assets/Arvo-Bold-webfont.ttf') format('truetype'),
       url('/assets/Arvo-Bold-webfont.svg#ArvoBold') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Arvo';
  src: url('/assets/Arvo-BoldItalic-webfont.eot');
  src: url('/assets/Arvo-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
       url('/assets/Arvo-BoldItalic-webfont.woff') format('woff'),
       url('/assets/Arvo-BoldItalic-webfont.ttf') format('truetype'),
       url('/assets/Arvo-BoldItalic-webfont.svg#ArvoBoldItalic') format('svg');
  font-weight: bold;
  font-style: italic;
}

Now you’ve got a font-family defined, along with weights and styles. To change elements to use the Arvo typeface, just add something like this in the stylesheet editor:

// Typeface adjustment for all body text
body {
    font-family: Arvo;
}

Or this:

// Typeface adjusment for all H1 text
#topic-title h1, .extra-info-wrapper h1 {
    font-family: Arvo;
    font-weight: bold;
    font-size: 28px;
}

Or this:

// Typeface adjustment for nav pills
.nav-pills > li > a{
    font-family: Arvo;
}

…and so on. You typically don’t need to provide fallback font-family arguments, either, since a fallback shouldn’t be necessary when you’re providing the actual typeface files. The multiple src arguments in each @font-face definition are cribbed directly from FontSquirrel’s CSS suggestions and should provide guidance for IE, Firefox, and Webkit-based browsers on what typeface files are available and how to get them (annoyingly enough, typeface file support isn’t universal across browsers, so you need multiple formats of each typeface to cover the whole spectrum of Trident + Gecko + Webkit).

1 Like
6

This topic was automatically closed after 1289 days. New replies are no longer allowed.