You can simply embed your custom font via CSS:
@font-face{
font-family: MyFont;
src: url('fonts/myfont.svg'); /* For IE */
src: local('myfont'), url('fonts/myfont.svg#Font2') format(svg); /* For non-IE */
}Not sure about SVG font support in IE though... I think the standard there is .EOT
Lithium has helped several customers with the past integrate custom fonts into their community. Typically they have either used typekit or cufon.
If your company was using and hosting a .EOT file and applying it with css on their .com, lithium could accommodate this so you could apply the custom font via css for the community, but lithium would still need to edit the apache config to allow the file type for .com domains (your community).
Also, doing a quick search lead me to this chart. It looks like SVG is not supported by IE 9 and older or Firefox.
I've tried using a Google font but it doesn't seem to work -- have I simply done something wrong or does Lithium block external file calls?
Hi Inactive User
are the fonts uploaded as assets in Studio and referenced using ${asset.get("...")} , or linked externally? Some browsers can prevent loading external fonts as a security risk (also depending on the settings) , thus preventing them from being viewed? Also, by any chance are you sourcing fonts over HTTP on a SSL page?
Lithium does not block external calls normally.
Hope it helps,
Hi Inactive User ,
To use google fonts, you shouldn't have to download and add the font file to your community's assets folder. Just make sure you've added the external link correctly to your header's head content, like so; for the font family Source Sans Pro;
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
When I'm specfing the font in my css, its written like so;
.blah { font-family: 'Source Sans Pro', sans-serif;}
When adding the font to your custom skin's skin property page font values, it should be entered like so;
font-family:Source Sans Pro, sans-serif; font-weight:normal;
Hope this helps
Thanks for the replies. I understand that one doesn't have to upload google fonts -- I've linked it exactly as you have described above :)
Upon inspection of the stage source html the correct css is there, the google font is linked and and right class is being applied in the markup. I wondered if the font didn't work because it couldn't import external files -- now I'm thinking it might be because the css is loaded before the font is.
Is there any way to change the order in which the head wrapper and the custom css is applied?
