Inline Google font code?

Off Topic
3

Hi Keith,
There are three things that I thought you could try;

  1. Try adding the stylesheet reference to the CMS just above your own HTML;
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One” rel="stylesheet">
<div style=“font-family: 'Alfa Slab One'; etc.

I suspect you’ve tried this already!

  1. Base64 encoding the font and loading it as a data URI in the style attribute;
<div style=“font-family: ‘Alfa Slab One’; src:url(‘data:application/x-font-woff;base64,d09GRgABAAAAAEwMAA0AAAAAjawA…..’ etc.

Sadly you can’t do this as is confirmed here;
http://stackoverflow.com/questions/8749225/loading-external-font-in-html-page-with-inline-css http://stackoverflow.com/questions/8749225/loading-external-font-in-html-page-with-inline-css
Inlining images works as does web fonts but not within an inline style. Damn!

  1. If the CMS allows you to add scripts to the page then you can boot load the required Google Fonts CSS file while the page is downloading;
<script type="text/javascript">
	var d=document;
	var ls=d.createElement("link");
	ls.type="text/css",
	ls.rel="stylesheet",
	ls.href="https://fonts.googleapis.com/css?family=Alfa+Slab+One",
	d.getElementsByTagName("head")[0].appendChild(ls);
</script>
<div style="font-family: 'Alfa Slab One'; 
color: #000; font-size: 36px; padding: 10px; 
background-color: #f2612b;">
This is a test!
</div>

I’d be surprised if this works as most CMS editors will get upset if you try and insert script tags into the editor as it would be an easy way to inject code into the site.
I seem to recall that eBay allowed scripts into their auction listings many years ago until they realised that they were being used to manipulate the displayed feedback score! :slight_smile:

If you really must have this font in the CMS content then you could probably render your content with an inline SVG or even a regular graphic but then, as you know, this willonly ‘look like’ the intended design and will still be a graphic.
Regards,
Tim.

offtopic mailing list
email@hidden
Update your subscriptions at: