Search code examples
jqueryhtmlcssuser-agentgoogle-dfp

How do I change DFP Text Link Creative style, which is forced to display as Times New Roman from user agent stylesheet?

We are using DFP text ad creatives throughout our site, but the user agent stylesheet is forcing it to display in Times New Roman font (see attached)

Times new roman is being forced to display on text links from dfp

Ripping out the link from the iframe and placing it into the DOM is not working as an option for us: https://stackoverflow.com/a/16039744/2595830

The options within dfp only allow you to change the text color and not the font family. The more control over the styling we can do the better, but does anyone have any suggestions on how to at least change the font-family of the link?

<!DOCTYPE HTML> 
<html lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<title>Test text link</title> 
<style type="text/css" media="screen"> 
body{
    font-family: 'Helvetica', Arial, sans-serif;
}
</style>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
    var gads = document.createElement('script');
    gads.async = true;
    gads.type = 'text/javascript';
    var useSSL = 'https:' == document.location.protocol;
    gads.src = (useSSL ? 'https:' : 'http:') + 
    '//www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
})();
</script>

<script type='text/javascript'>
googletag.cmd.push(function() {
    googletag.defineSlot('[PATH/TO/SLOT]', [650, 16], '[DIV-GPT-ID]').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
});
</script>

<body>
    Generic body content<br><br>
    <!-- text-link -->
    <div id='[DIV-GPT-ID]' style='width:650px; height:16px;'>
        <script type='text/javascript'>
        googletag.cmd.push(function() { googletag.display('[DIV-GPT-ID]'); });
        </script>
    </div>

</body>
</html>
Solution

  • For anyone visiting this, I was able to solve it by adding in:

    googletag.pubads().enableSyncRendering();

    so the javascript would look like:

    <script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('[PATH/TO/SLOT]', [650, 16], '[DIV-GPT-ID]').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().enableSyncRendering();
googletag.enableServices();
});
</script>