TypeKit, Web Fonts, Google Fonts, etc..

Author Message

Posted: 1/17/2012
Quote message 

Has anyone had success using these kits, add-ons, etc with Artisteer?
If good, bad, or different - your experience is greatly appreciated

Posted: 3/5/2012
Quote message 

I have been able to successfully implement non-standard fonts via Artisteer and the html modules on a site.

I personally think this is crucial for superior web development rather than rely on universal fonts or text images with transparent background to achieve the perceived effect of type-matching a brands logo font, etc..

The solution is multi-part and requires the use of an online provider for the non-standard font. In my case I will step through this task with my own challenge of implementing "Sue Ellen Francisco". This font is available via Google Web Fonts and is free.

Google Web fonts provides two pieces of code that were utilized: a CSS snipet and an HTML header link telling the clients browser where to find the font, instead of having to have it installed on their PC or device.

CSS Snipet: font-family: 'Sue Ellen Francisco', cursive;
HTML header link: ^link href='http://fonts.googleapis.com/css?family=Sue+Ellen+Francisco' rel='stylesheet' type='text/css'^
(the opening greater than and closing less than characters are replaced with ^ characters to prevent it from rendering in this forum editor)

Within Artisteer the CSS should be added to when exporting the template. Select 'Options...' , 'CSS Options...' and paste the CSS Snipet.

This will update the CSS stylesheet and it also makes this font available under most Format Text menus allowing menus, H1, H2, etc.. to be styled.

Once exported and installed on a site, the link above must be placed on the page in a header area either on the page or an HTML module.

Couple of details - if in Artisteer you didn't style the body text of a block/article you can define the font style via the HTML view of the HTML module. ^span style="font-size: 20px; font-family: 'sue ellen francisco';"^

If it was defined in Artisteer then it doesn't have to be included in HTML view of the text module.

I haven't attempted this with other web font or type kit providers but I am familiar with them and they employ similar methods for publishing.

Hope you find this useful, I know I will.
Aaron P

Posted: 8/29/2012
Quote message 

I added the HTML header link to all the exported files by adding a fake metaname placeholder in the global options.

<meta name="placeholder" content="change" />

Then, after my export occurs, I grep out the line in every HTML file in the dir using Dngrep (http://code.google.com/p/dngrep/) and replace it with the line of choice. In my case,

<link href='http://fonts.googleapis.com/css?family=Crimson+Text:700' rel='stylesheet' type='text/css'>

I also jump in style.css and change the fonts accordingly.


Posted: 3/16/2015
Quote message 

Hi, folks. I'm having an odd problem.... can't get "Verdana content" which is basic to Artisteer, to render as designed once exported & uploaded.

I cannot find any font online called "Verdana content". My PC has 500 fonts installed, including Verdana. But this is what this theme font looks like when exported for WordPress and uploaded in localhost, whether online or offline:


This is for a kids' poetry site, the font selected is crucial for readability and style, but it comes out quite different from the design, see print screen:

Obviously, I don't know anything about code, but I would have presumed the basic fonts would stay the same as designed in Artisteer. I'm using Artisteer 2, Standard Edition.

All advice warmly welcomed. Thank you.