Inline Google font code?

Off Topic
1

I need help with a bit of custom code. I want to style some HTML text using a custom web font – anything from Google fonts would be cool, or I can host the fonts myself. The trouble is the formatting code has to be inline… I can use

(for example) but the src:url part doesn’t seem to work, and I really can’t use regular CSS.

This is in a CMS that doesn’t allow that level of customising. It’s a university-wide system; I simply cannot alter how it actually handles attempts at inserting CSS properly, although I have the admin’s blessing to try and find a way to do this. :frowning:

So… anyone have any ideas on custom web fonts through real inline code?

k

offtopic mailing list
email@hidden
Update your subscriptions at:

2

FYI, here’s part of one experiment:

It only works if I have the right font locally installed; the src URL doesn’t work at all. I realise this may simply not be possible… but then again it just might!

k

offtopic mailing list
email@hidden
Update your subscriptions at:

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:

4

Thanks Tim! I’ll check with the person who’s the official expert on the system we’re using here (Moodle).
I already have graphics set up but I have to keep generating them, I’m hoping to be able to make this entirely self-contained so others can edit the text. :slight_smile:

offtopic mailing list
email@hidden
Update your subscriptions at:

5

offtopic mailing list
email@hidden
Update your subscriptions at: