diff --git a/bar.go b/bar.go
index 049dadf..c5b2980 100644
--- a/bar.go
+++ b/bar.go
@@ -13,10 +13,10 @@ var barTPL = `
   <rect x="0" y="0" width="100%" height="{{.Height}}" fill="{{.BackgroundColor}}" rx="{{.CornerRadius}}" ry="{{.CornerRadius}}" />
   <rect x="0" y="0" width="{{.ProgressWidth}}" height="{{.Height}}" fill="{{.ProgressColor}}" rx="{{.CornerRadius}}" ry="{{.CornerRadius}}" />
   {{if .ProgressCaption}}
-  <text x="50%" y="{{.HeightHalf}}" font-family="sans-serif" fill="{{.TextColor}}" font-size="{{.TextSize}}px" font-weight="bold" text-anchor="middle" alignment-baseline="middle">{{.ProgressCaption}}</text>
+  <text x="50%" y="{{.HeightHalf}}" font-family="Helvetica Neue,Helvetica,Arial,sans-serif,sans-serif" fill="{{.TextColor}}" font-size="{{.TextSize}}px" font-weight="bold" text-anchor="middle" alignment-baseline="middle">{{.ProgressCaption}}</text>
   {{end}}
   {{if .Caption}}
-  <text x="50%" y="{{.CaptionY}}" font-family="sans-serif" fill="{{.CaptionColor}}" font-size="{{.CaptionSize}}px" text-anchor="middle">{{.Caption}}</text>
+  <text x="50%" y="{{.CaptionY}}" font-family="Helvetica Neue,Helvetica,Arial,sans-serif,sans-serif" fill="{{.CaptionColor}}" font-size="{{.CaptionSize}}px" text-anchor="middle">{{.Caption}}</text>
   {{end}}
 </svg>
 `
diff --git a/battery.go b/battery.go
index bdd6630..33d1c2b 100644
--- a/battery.go
+++ b/battery.go
@@ -18,10 +18,10 @@ var batteryTPL = `
   <rect x="{{.X}}" y="0" width="{{$.SegmentGapWidth}}" height="{{$.Height}}" fill="{{$.BackgroundColor}}" />
   {{end}}
   {{if .ProgressCaption}}
-  <text x="50%" y="{{.HeightHalf}}" font-family="sans-serif" fill="{{.TextColor}}" font-size="{{.TextSize}}px" font-weight="bold" text-anchor="middle" alignment-baseline="middle">{{.ProgressCaption}}</text>
+  <text x="50%" y="{{.HeightHalf}}" font-family="Helvetica Neue,Helvetica,Arial,sans-serif,sans-serif" fill="{{.TextColor}}" font-size="{{.TextSize}}px" font-weight="bold" text-anchor="middle" alignment-baseline="middle">{{.ProgressCaption}}</text>
   {{end}}
   {{if .Caption}}
-  <text x="50%" y="{{.CaptionY}}" font-family="sans-serif" fill="{{.CaptionColor}}" font-size="{{.CaptionSize}}px" text-anchor="middle">{{.Caption}}</text>
+  <text x="50%" y="{{.CaptionY}}" font-family="Helvetica Neue,Helvetica,Arial,sans-serif,sans-serif" fill="{{.CaptionColor}}" font-size="{{.CaptionSize}}px" text-anchor="middle">{{.Caption}}</text>
   {{end}}
 </svg>
 `
diff --git a/circular.go b/circular.go
index e79d1e9..19d47a4 100644
--- a/circular.go
+++ b/circular.go
@@ -16,12 +16,12 @@ var circularTPL = `
   <circle r="90" cx="100" cy="100" fill="transparent" stroke="{{.CircleColor}}" stroke-width="{{.CircleWidth}}px" stroke-dasharray="{{.CircleDashArray}}" stroke-dashoffset="0"></circle>
   <circle r="90" cx="100" cy="100" stroke="{{.ProgressColor}}" stroke-width="{{.ProgressWidth}}px" stroke-linecap="round" stroke-dasharray="{{.ProgressDashArray}}" stroke-dashoffset="{{.Offset}}px" fill="transparent" style="transform:rotate(-90deg); transform-origin: 50% 50%;"></circle>
   {{if .ShowPercentage}}
-  <text x="100" y="100" font-family="sans-serif" fill="{{.TextColor}}" font-size="{{.TextSize}}px" font-weight="bold" text-anchor="middle" alignment-baseline="middle">{{.Progress}}%</text>
+  <text x="100" y="100" font-family="Helvetica Neue,Helvetica,Arial,sans-serif,sans-serif" fill="{{.TextColor}}" font-size="{{.TextSize}}px" font-weight="bold" text-anchor="middle" alignment-baseline="middle">{{.Progress}}%</text>
   {{else}}
-  <text x="100" y="100" font-family="sans-serif" fill="{{.TextColor}}" font-size="{{.TextSize}}px" font-weight="bold" text-anchor="middle" alignment-baseline="middle">{{.Progress}}</text>
+  <text x="100" y="100" font-family="Helvetica Neue,Helvetica,Arial,sans-serif,sans-serif" fill="{{.TextColor}}" font-size="{{.TextSize}}px" font-weight="bold" text-anchor="middle" alignment-baseline="middle">{{.Progress}}</text>
   {{end}}
   {{if .Caption}}
-  <text x="100" y="220" font-family="sans-serif" fill="{{.CaptionColor}}" font-size="{{.CaptionSize}}px" text-anchor="middle">{{.Caption}}</text>
+  <text x="100" y="220" font-family="Helvetica Neue,Helvetica,Arial,sans-serif,sans-serif" fill="{{.CaptionColor}}" font-size="{{.CaptionSize}}px" text-anchor="middle">{{.Caption}}</text>
   {{end}}
 </svg>
 `