Jump to content
Search Community

Self hosted fonts, is there a downside?

somnamblst test
Moderator Tag

Go to solution Solved by ohem,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

In a situation where fonts are deemed !important by print designers who expect pixel perfect execution by digital, for instance a font such as Rockwell that comes with Office. What would be the risk of self hosting. It isn't like someone can sell Rockwell on Craigslist.

 

I can see the tag that DCM generates for an HTML5 creative. I don't see anyone being able to sniff out the path to a self hosted font.

 

Just as an FYI if you use Flash Talking for HTML5 ads, anyone can view your creative by right clicking > view frame source.

 

DCM tag in case anyone wants to see what DCM auto generates.

  <script type="text/javascript">
    if ('%pdcapp=!;' == '1') {
  if (window['mraid']) {
    document.write('<scr' + 'ipt type="text/x-do-not-download" src="mraid.js"></scr' + 'ipt>');
  } else {
    document.write('<scr' + 'ipt type="text/javascript" src="mraid.js"></scr' + 'ipt>');
  }
    } 
  </script>
<script type="text/javascript">
(function() {
  var DEBUG = '%pdebugjs=!;'.toLowerCase() == 'true';
  var csiStart = (+new Date);
  var studioObjects = window['studioV2'] = window['studioV2'] || {};
  var eventTags = %evtags!;
  var publisherSideFilePath = unescape('%pmtfIFPath=!;');
  if(publisherSideFilePath == '') {
    publisherSideFilePath = '/doubleclick/DARTIframe.html';
  } else if (publisherSideFilePath.charAt(publisherSideFilePath.length - 1) == '/') {
    publisherSideFilePath += 'DARTIframe.html';
  }
  var bookingTimeMetaData = {
  };

  var runtimeMetaData = {
  };

  var exitUrlPatternMacroValues = {
  };
  var macroParser = function (macroName, value) {
    return (value.indexOf(macroName) < 0) ? value : '';
  };
  var adServerData = {
    eventReportingUrl: '%a/activity;src=%eadv!;met=1;v=1;pid=%epid!;aid=%eaid!;ko=%ekid!;cid=%ecid!;rid=%erid!;rv=%erv!;',
    clickUrl: '%c',
    clickUrlTimesToEscape: '%p;click!=',
    clickEventTagUrl: eventTags['click_event_tag'],
    impressionUrl: '%i',
    geoData: '%g',
    siteName: '%s',
    siteId: '%esid!',
    adId: '%eaid!',
    exitSuffix: macroParser('exit_suffix', '%exit_suffix!'), // XFA GA Beacon.
    buyId: '%ebuy!',
    creativeId: '%ecid!',
    placementId: '%epid!',
    advertiserId: '%eadv!',
    keyValueOrdinal: '%ekid!',
    renderingVersion: '%erv!',
    renderingId: '%erid!',
    randomNumber: '%n',
    dynamicData: '',
    stringReportingUrl: '%a/activity;src=%eadv!;stragg=1;v=1;pid=%epid!;aid=%eaid!;ko=%ekid!;cid=%ecid!;rid=%erid!;rv=%erv!;rn=%n;',
    urlToGetKeywordsFor: '%LivePreviewSiteUrl',
    bookingTimeMetaData: bookingTimeMetaData,
    generatedAdSlot: false,
    exitUrlPatternMacroValues: exitUrlPatternMacroValues,
    activeViewClkStr: macroParser('eav', '%eav!'),
    renderingEnvironment: ('%pdcapp=!;' == '1' ||
        window['mraid']) ? 'IN_APP' : 'BROWSER',
    placementDimensions: {
      'w': '%ew!',
      'h': '%eh!'
    },
    tag: {
      adContainerElementId: macroParser('ad_container_id', '%pad_container_id=!;'),
      hideObjects: '%phideObjects=!;',
      top: '%pmtfTop=!;',
      left: '%pmtfLeft=!;',
      zIndex: '%pzindex=!;',
      duration: '%pmtfDuration=!;',
      wmode: '%pwmode=!;',
      preferFlash: '%ppreferFlash=!;' == 'true',
      preferHtml5Artwork: '%pdisplayHTML5=!;' == 'true',
      adSenseKeywords: '%pas_kw=!;',
      adSenseLatitude: '%pas_lat=!;',
      adSenseLongitude: '%pas_lng=!;',
      publisherSideFilePath: publisherSideFilePath,
      runtimeMetaData: runtimeMetaData,
      lidarEnabled: false,
      expansionMode: '%pexpansionMode=!;',
      renderFloatInplace: '%pmtfRenderFloatInplace=!;'.toLowerCase() == 'true',
      tryToWriteHtmlInline: '%ptryToWriteHtmlInline=!;'.toLowerCase() == 'true'
    }
  };

  var scheme;
  if ('%ers!' == 'http' || '%ers!' == 'https') {
    // DCM scheme macro usage.
    scheme = '%ers!' + ':';
  } else if ('%%SCHEME%%' == 'http' || '%%SCHEME%%' == 'https') {
    // XFP scheme macro usage.
    scheme = '%%SCHEME%%' + ':';
  } else {
    // preview usage.
    scheme = location.protocol;
  }
  var staticResourceMediaServer = scheme == 'https:' ?
       'https://s0.2mdn.net' :
       'http://s0.2mdn.net';

  var creativeMediaServer = scheme == 'https:' ?
       'https://s0.2mdn.net' :
       'http://s0.2mdn.net';

  var backupImageUrl = '/1828269/********_300x600_backup.jpg';
  if (!/^https?:/.test(backupImageUrl)) {
    backupImageUrl = creativeMediaServer + backupImageUrl;
  }
  var backupImage = {
    exitUrl: '%y2574117%chttp://',
    target: '_blank',
    imageUrl: backupImageUrl,
    width: '300',
    height: '600',
    backupDisplayActivityUrl: [
      adServerData.eventReportingUrl,
      '&timestamp=', (+new Date), ';',
      'eid1=9;ecn1=1;etm1=0;'].join(''),
    thirdPartyBackupImpressionUrl: ''
  };

  var versionPrefix = DEBUG ? 'db_' : '';
  var templateVersion = '200_100';
  var renderingScriptPath = '/879366';
  var rendererDisplayType = '';
  rendererDisplayType += 'express_';
  rendererDisplayType += 'html_';
  var rendererFormat = 'inpage';
  var rendererName = rendererDisplayType + rendererFormat;
  var renderingLibrary = renderingScriptPath + '/' + rendererName + '_rendering_lib_' +
      versionPrefix + templateVersion + '.js';
  // Adserver has a logic to detect media files and prepend host name.
  if (!/^https?:/.test(renderingLibrary)) {
    renderingLibrary = staticResourceMediaServer + renderingLibrary;
  }

  var adCreativeDefinitions = {};
    adCreativeDefinitions['295577076'] = '//s0.2mdn.net/ads/richmedia/studio/creative/65350419/0_3f686addf51dd01e9175b90d9ecbc5e4_295577076_creative_override.js';
    adCreativeDefinitions['295577180'] = '//s0.2mdn.net/ads/richmedia/studio/creative/65350419/0_f19d1eb71348977464728626c805b320_295577180_creative_override.js';
    adCreativeDefinitions['295577181'] = '//s0.2mdn.net/ads/richmedia/studio/creative/65350419/0_205e18ea9c2f4510eeb37c821f13aecb_295577181_creative_override.js';

  var creativeId = '65350419';
  var adId = adCreativeDefinitions[adServerData.adId] ? adServerData.adId : 0;
  // The unique creative is identified by combination of creative id and ad id.
  // When the same creative(same creative id and same ad id) is served on the page more
  // than once then they will share the creative definition yet there will be
  // multiple instances of 'adResponses'.s
  var creativeKey = [creativeId, adId].join('_');
  var creativeDef = adCreativeDefinitions[adServerData.adId] ?
      adCreativeDefinitions[adServerData.adId] :
      '//s0.2mdn.net/ads/richmedia/studio/creative/65350419/c190709bf7519f3359de7002ecf5bd43_preview_creative_def.js';
  if(!/^https?:/.test(creativeDef) && creativeDef.substring(0, 2) != '//') {
    creativeDef = creativeMediaServer + creativeDef;
  }
  studioObjects['creativeCount'] = studioObjects['creativeCount'] || 0;
  var creativeDto = {
    id: creativeId,
    uniqueId: creativeId + '_' + studioObjects['creativeCount']++,
    templateVersion: templateVersion,
    adServerData: adServerData,
    isPreviewEnvironment: '%PreviewMode' == 'true',
    hasFlashAsset: false,
    hasHtmlAsset: true,
    requiresCss3Animations: false,
    flashVersion: '',
    httpsMediaServer: 'https://s0.2mdn.net',
    httpMediaServer: 'http://s0.2mdn.net',
    renderingScriptPath: renderingScriptPath,
    renderingLibrary: renderingLibrary,
    rendererName: rendererName,
    creativeDefinitionUrl: creativeDef,
    creativeKey: creativeKey,
    thirdPartyImpressionUrls: eventTags['img_event_tag'],
    thirdPartyArtworkImpressionUrl: '',
    breakoutToTop: false,
    dimensions: {
      width: '300px',
      height: '600px'
    },
    backupImage: backupImage,
    csiStart: csiStart,
    csiAdRespTime: csiStart - (parseFloat('%kkts=!;') || 0),
    csiEvents: {},
    hasModernizrFeatureChecks: true,
    html5FeatureChecks: [
      'Modernizr.csstransforms3d',
      'Modernizr.rgba'
    ],
    hasSwiffyHtmlAsset: false
  };

  var inGdnIframe = window['IN_ADSENSE_IFRAME'] || false;
  var inYahooSecureIframe = window.Y && Y.SandBox && Y.SandBox.vendor;
  var inWinLiveIframe = false;
  try {
    inWinLiveIframe = !!window.$WLXRmAd;
  } catch(e) {}
  var inSafeFrame = window.$sf && window.$sf.ext;
  var isMsnAjaxIframe = (typeof(inDapMgrIf) != 'undefined' && inDapMgrIf);
  var breakoutIframe = '%pbreakoutiframe=!;'.toLowerCase();
  var shouldBreakout = (((false ||
                          false) &&
                         !inGdnIframe &&
                         !inYahooSecureIframe &&
                         !inSafeFrame &&
                         !inWinLiveIframe) ||
                        (true && breakoutIframe == 'true')) &&
                       self != top &&
                       !creativeDto.isPreviewEnvironment &&
                       breakoutIframe != 'false';

  if (adServerData.tag.adContainerElementId == '' &&
      (true || false ||
         adServerData.tag.renderFloatInplace)) {
    var containerId = ['creative', creativeDto.uniqueId].join('_');
    var divHtml = ['<div id="', containerId, '"></div>'].join('');
    document.write(divHtml);
    adServerData.tag.adContainerElementId = containerId;
    adServerData.generatedAdSlot = true;
  }
  var creatives = studioObjects['creatives'] = studioObjects['creatives'] || {};
  var creative = creatives[creativeKey] = creatives[creativeKey] || {};
  var adResponses = creative['adResponses'] = creative['adResponses'] || [];
  creative['shouldBreakout'] = creative['shouldBreakout'] || shouldBreakout;
  var iframeBusterLibrary = renderingScriptPath + '/iframe_buster_' +
      versionPrefix + templateVersion + '.js';
  if(!/^https?:/.test(iframeBusterLibrary)) {
    iframeBusterLibrary = staticResourceMediaServer + iframeBusterLibrary;
  }
  var loadedLibraries = studioObjects['loadedLibraries'] = studioObjects['loadedLibraries'] || {};
  var versionedLibrary = loadedLibraries[templateVersion] = loadedLibraries[templateVersion] || {};
  var typedLibrary = versionedLibrary[rendererName] = versionedLibrary[rendererName] || {};
  adResponses.push({
    creativeDto: creativeDto
  });
    var modernizrLibrary = '/ads/studio/cached_libs/modernizr_2.8.3_ec185bb44fe5e6bf7455d6e8ef37ed0e_no-classes.js';
    if(!/^https?:/.test(modernizrLibrary)) {
      modernizrLibrary = staticResourceMediaServer + modernizrLibrary;
    }
    document.write('<scr' + 'ipt type="text/javascript" src="' + modernizrLibrary + '"></scr' + 'ipt>');
  for (var i = 0; i < eventTags['js_event_tag'].length; i++) {
    document.write('<scr' + 'ipt type="text/javascript" src="' + eventTags['js_event_tag'][i] + '"></scr' + 'ipt>');
  }
  if (shouldBreakout) {
    if (versionedLibrary['breakout']) {
      versionedLibrary['breakout']();
    } else if (!versionedLibrary['breakoutLoading']) {
      versionedLibrary['breakoutLoading'] = true;
      document.write('<scr' + 'ipt type="text/javascript" src="' + iframeBusterLibrary + '" async="async"></scr' + 'ipt>');
    }
  } else if (typedLibrary['bootstrap'] && creative['creativeDefinition']) {
    typedLibrary['bootstrap']();
  } else {
    if (!creative['definitionLoading']) {
      creative['definitionLoading'] = true;
      creativeDto.csiEvents['pb'] = (+new Date);
      document.write('<scr' + 'ipt type="text/javascript" src="' + creativeDto.creativeDefinitionUrl + '"' + (adServerData.tag.tryToWriteHtmlInline ? '' : ' async="async"') + '></scr' + 'ipt>');
    }
    if (!typedLibrary['loading']) {
      typedLibrary['loading'] = true;
      creativeDto.csiEvents['gb'] = (+new Date);
      document.write('<scr' + 'ipt type="text/javascript" src="' + renderingLibrary + '"' + (adServerData.tag.tryToWriteHtmlInline ? '' : ' async="async"') + '></scr' + 'ipt>');
    }
  }
  if (isMsnAjaxIframe) {
    window.setTimeout("document.close();", 1000);
  }
})();
</script>
<noscript>
  <a target="_blank" href="%y2574117%chttp://">
    <img border="0" alt="" src="//s0.2mdn.net/1828269/*******_300x600_backup.jpg"
        width="300" height="600" />
  </a>
  <img width="0px" height="0px" style="visibility:hidden" border="0" alt=""
       src="%a/activity;src=%eadv!;met=1;v=1;pid=%epid!;aid=%eaid!;ko=%ekid!;cid=%ecid!;rid=%erid!;rv=%erv!;&timestamp=%n;eid1=9;ecn1=1;etm1=0;" />
  %evtags_ns!
</noscript>
Link to comment
Share on other sites

With web fonts, the licensing is complicated if it's not an open-source font.  Technically you're supposed to pay based on page views, even if it's a basic font like Rockwell which comes with Office.  Myfonts, Fonts.com, and Typekit all have restrictions on page views, and it could get expensive.  

 

http://www.fonts.com/subscriptions#webplans

http://www.myfonts.com/licensing/webfont/

https://typekit.com/plans

 

I found this relevant question a while ago but no answers: https://forums.adobe.com/thread/1913417

 

If you did convert a font to a web font on your own and wanted to host it yourself, even if the licensing wasn't an issue I would be concerned about the amount of bandwidth it would take if the banner is being served to millions of people.  Many servers can't handle that, and loading time (and flash of unstyled text) could also be an issue.  Also, a lot of ad serving companies don't even accept externally linked files.

 

If you were doing a rich media ad and file size wasn't an issue, you could just keep the web font files zipped up within each ad, but at the same time that would increase the file size by several hundred k, so I'm not sure if it would really be worth it.  And it wouldn't get cached, so again loading/FOUT could be a problem.

 

I think that editing the type in Illustrator, converting it to outlines, and saving as an SVG seems like the best option if you need to use a specific font not available on Google Fonts... Though I am very curious what other's experiences are!

  • Like 1
Link to comment
Share on other sites

ohem i was loving the ability of Illustrator CC to do a copy and paste into Edge Animate, that Edge automatically converted to an SVG. Until I viewed the creative in IE. It reverted to Times. For now because text as transparent PNG-24s aren't all that big, I am just exporting PNGs from PhotoShop and using Open Sans when I can..

 

I sent the DCM tag to a coworker and he was able to find the path to Open Sans, which Doubleclick had base 64 encoded. So it appears DC is cognizant that DCM users could be doing things that could get them into trouble. Perhaps the base 64 thing is like a fence around a pool. Yes you could climb that fence, but the owner is not liable if you do.

Link to comment
Share on other sites

For self hosted font there is one big non-legal downsize: Your server is not going to handle it. Unless you have a professional dedicated server, of course. It will be hit thousands of times when the ad is served.

 

Legally speaking, if you're not talking about webfonts that are already out on the wild and are royalties free - e.g. Google fonts, you're putting yourself in line for a potential breach of copyright if you don't license it. If you do, it is quite costly.

 

Now, as for converting the font from Illustrator into an SVG, the step you are missing now, somnablst, is to actually convert the text into a curve before doing the copy/paste. Some software will talk to each other and know which font to reach out for on your system (Edge, for example) but, when you go into IE, it's a different can of worms. It does not understands the link that references the font in your system and so, it defaults to whatever it can.

 

So, you can continue using Illustrator for the SVG if you take the extra step to convert the text to outline (or whatever it is called in the program itself), which may, or may not be more conveninent than transparent PNGs.

  • Like 3
Link to comment
Share on other sites

Rockwell text as outlines saved as SVG in AI is 420K

 

Rockwell  text pasted as SVG directly into Edge is 35K

 

Rockwell  text saved from PhotoShop as PNG-24 is 8K, without PNG compression.

 

At least with Rockwell there is a  close Google font match 

 

<link href='https://fonts.googleapis.com/css?family=Enriqueta:400,700' rel='stylesheet' type='text/css'>

 

SVG logos were all over the place, from 4K to 122K

Link to comment
Share on other sites

We're currently having issues with fonts with really light font-weight.

 

As SVG they come up really thin, and nothing like the PSD/PDF storyboards that have come from the designers.

 

But for high pixel density screens PNGs come up really fuzzy, so we're going with Retina @2x PNGs instead of SVGs for copy.

 

We've also found that its better to design SVGs in Illustrator at a much larger scale that they would be used at (sometimes 1000%) because Illustrator has issues with saving thin delicate curves at small art-board sizes.

 

 

@somnamblst, base64 encoding the font also helps to ensure the font is ready to be used and you get less chance of FOUT (Flash of unstyled text). https://css-tricks.com/fout-foit-foft/

  • Like 1
Link to comment
Share on other sites

This was mentioned in a Smashing Magazine article regarding FOUT.

 

https://developers.google.com/fonts/docs/webfont_loader?csw=1

 

In one of the Google Hangouts for HTML5 they suggested introducing the not techie designers to the awesomeness of Google fonts from the beginning. It just goes against my instincts to use images for text.

 

Looking at some of the free fonts on Font Squirrel I recognized League Gothic as being a font a professional site I did ads for in the past uses. If you don't care about italics, condensed and regular are 50K

 

This is how tthey ensure everyone sees it.

 

3.TYPOGRAPHY & LINKS */

@font-face {
font-family: 'LeagueGothicRegular';
src: url('fonts/League_Gothic-webfont.eot');
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/League_Gothic-webfont.woff') format('woff'),
url('fonts/League_Gothic-webfont.ttf') format('truetype'),
url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: 'fs';
src: url("fonts/fs.eot");
src: url("fonts/fs.eot?#iefix") format("embedded-opentype"), url("fonts/fs.woff") format("woff"), url("fonts/fs.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

Link to comment
Share on other sites

I dream of the days we will be able to use fonts. Life will be so much rosier then.

 

Oh, wait, it won't. Have you ever opened a design file from a different OS? Have you had the wonderful experience of having a truetype font converted into a opentype or typescript? IT IS THE SAME BLOODY FONT! And yet, never looks the same.

 

Whenever I can, I just play dumb and go on until someone points out the font looks somewhat different. If no one notices, wonderful. Otherewise a load of headaches to make it match.

 

Personally, when converting I will default to SVG as they look so much nicer on high density displays and I can use the same file on all the different sizes. I will only use a PNG if it is absolutely required for whatever reason it might be.

  • Like 1
Link to comment
Share on other sites

I will default to SVG as they look so much nicer on high density displays and I can use the same file on all the different sizes.

 

 

Is that done by enabling word wrap? Because surely you can't use the same file on a 300x600 and a 160x600 and a 728x90

 

Did I mention how much I like Open Sans  :ugeek: 

Link to comment
Share on other sites

  • Solution

Rockwell text as outlines saved as SVG in AI is 420K

 

 

That doesn't seem right.  SVG is vector, and for simple outlined type the file size should be pretty low.  Are you sure you're converting the text to outlines?

 

When I try saving a SVG from Illustrator of the Rockwell font with every letter of the alphabet, uppercase and lowercase, the file size is still only 21k.  If I optimize it using SVGO, it goes down to 17k.  Example attached!

 

PNGs are fine for type too, though it's sometimes nicer to have something scalable.  Also, if you use PNGs you should create them at double size so that they're not blurry on retina displays.

rockwell_svg_test.zip

Link to comment
Share on other sites

ohem you are correct, that 400K came from leaving the preseve Illustrator edit capabilities checked in the SVG save dialog. Found this document with explanations as to what to choose and check or uncheck in that dialog.

 

http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

 

For Rockwell I am using Google web font Enriqueta going forward, because using images for copy just goes against my sense of propriety. Let's see if marketing notices. 

  • Like 1
Link to comment
Share on other sites

Hey somnamblst,

 

I did not forget your question, it was just a tad too busy the last few days. You are very correct when you say:

 

 

Is that done by enabling word wrap? Because surely you can't use the same file on a 300x600 and a 160x600 and a 728x90

 

 

 

The answer is down to how much effort I can be bothered and what the client is like. If it is a rather 'preculiar' client, I will look at the creatives provided, see which text matches which format, create the base text and then, only create a "wide" or "narrow", etc variation of the text.

 

BUT, if I have a particular nice client who understands the idea of planning ahead, I will set each word individually as an SVG (the trick is making the height of the viewbox exactly the same and the proportions should match) and load them up with custom JavaScript. I made a little example for you to pick apart. Obviously, it is only to illustrate how flexible the concept it. It is not exactly how I would position things or build a banner.

 

See the Pen PPmEWO by dipscom (@dipscom) on CodePen

 

I know I am using SVG in image tag, it was just an easier way to set this up, the theory should hold if you are using inline SVG as well. Another reason I use the image tag is because is much easier to simply write the array, then modify it. And since I most of the time work with rich media placements, HTTP calls are only a secondary worry.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...