Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › custom font for tumblr css stylesheet
New Posts  All Forums:Forum Nav:

custom font for tumblr css stylesheet

post #1 of 7
Thread Starter 
Hi,

ok, so below is the code I have for my external css stylesheet.
Code:
@charset "utf-8";

body,td,th { font-family: "Trebuchet MS"; font-size: 15px; color: #464646; }
body { background-color: #121212; margin: 30px 0 0; } 
a:link { color: #464646; text-decoration: none; }
a:hover { text-decoration: none; color: #fff; }
h1 { color: #999; margin-top: 8px; letter-spacing: -0.1em; font: 700 31px/.8 Arial, sans-serif; }
h1 span { color: #ccc; font-size: 18px; font-weight: 400; letter-spacing: -0.053em; text-transform: uppercase; }
h2 { font-size: 24px; }
h3 { font-size: 17px; }
#top { position: absolute; top: 20px; left: 20px; width: 310px; height: 500px; cursor: pointer; margin-top: 30px; z-index: 1; }
#logo { float: left; height: 86px; width: 110px; }
#title { width: 180px; margin: 0 0 0 130px; position: absolute; visibility: visible; z-index: 4; }
#menu { float:left; width:290px; padding-bottom:10px; font-weight:700; color:#999; margin-top:40px; font-size:32px; text-transform:uppercase; letter-spacing:-0.08em; } 
#menu a:link,#menu a:active,#menu a:visited,#menu a:hover { color:#ccc; }
#menu a:hover { color:#999; }
#menu ul li { width:230px; float:left; margin-top:-12px; }
#contact { float:left; width:290px; margin-top:126px; text-align:right; font-size:10px; color:#ccc; }
#container { height:500px; background-color:#fff; float:left; margin-right:0; margin-bottom:0; margin-left:0; padding:20px 0 20px 320px; position: absolute; z-index: 0; }
#container img { margin-right:13px; }
#container ul li { float:left; height:100px; margin-right:-12px; }
#back { height:36px; width:120px; display:block; outline:0; z-index:1; margin-top:120px; position:absolute; background:url('../assets/back.gif') no-repeat; font-size:32px; }
#back:hover { background-position:0 -36px; padding-left:40px; }
#back00 { width:120px; height:500px; }
#footer { height:40px; width:1200px; padding-left:20px; margin-top:560px; font-size:10px; position:absolute; margin-left:0; left:0; text-transform:uppercase; }
#footer img { float: right; margin-right: 700px; }
#footer a img { border: none; }
#qTip { position:absolute; display:none; font-size:13px; color:#fff; z-index:1000; background:url('../assets/qTip.png') repeat; padding:10px 15px; }
a:visited,a:active { text-decoration:none; color:#333; }
#menu ul,#container ul { list-style-type:none; display:inline; padding:0; }

Ok, now as you can see, the font for my menu is Trebuchet MS, but I want it to be another font. I have a font uploaded tohttp://static.tumblr.com/ptmtxua/K9imvefwr/8thelement3di.ttf.

So, by changing that css stylesheet, how can I change the font from Trebuchet MS to the other font?

Here is the code to my tumblr portfolio.
Code:
<!DOCTYPE html>
<script>var __pbpa = true;</script><script>var translated_warning_string = 'Warning: Never enter your Tumblr password unless \u201chttps://www.tumblr.com/login\u201d\x0ais the address in your web browser.\x0a\x0aYou should also see a green \u201cTumblr, Inc.\u201d identification in the address bar.\x0a\x0aSpammers and other bad guys use fake forms to steal passwords.\x0a\x0aTumblr will never ask you to log in from a user\u2019s blog.\x0a\x0aAre you absolutely sure you want to continue?';</script><script type="text/javascript" language="javascript" src="http://assets.tumblr.com/assets/scripts/pre_tumblelog.js?_v=2a5574fefaf735afe42a1ea645f3ecf1"></script>
<!DOCTYPE html>
<script>var __pbpa = true;</script><script>var translated_warning_string = 'Warning: Never enter your Tumblr password unless \u201chttps://www.tumblr.com/login\u201d\x0ais the address in your web browser.\x0a\x0aYou should also see a green \u201cTumblr, Inc.\u201d identification in the address bar.\x0a\x0aSpammers and other bad guys use fake forms to steal passwords.\x0a\x0aTumblr will never ask you to log in from a user\u2019s blog.\x0a\x0aAre you absolutely sure you want to continue?';</script><script type="text/javascript" language="javascript" src="http://assets.tumblr.com/assets/scripts/pre_tumblelog.js?_v=2a5574fefaf735afe42a1ea645f3ecf1"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">

<title>Matt Danis</title>

<base href="http://danismatt.tumblr.com/" />
<link rel="shortcut icon" href="public/favicon.ico" />
<link href="http://static.tumblr.com/ptmtxua/8Trmoewm0/styles.css" rel="stylesheet" type="text/css" media="screen" />

<!--[if lte IE 6]>
<link href="public/script/allie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if lte IE 7]>
<link href="public/script/allie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

<!-- BEGIN TUMBLR FACEBOOK OPENGRAPH TAGS -->
<!-- If you'd like to specify your own Open Graph tags, define the og:url and og:title tags in your theme's HTML. -->
<!-- Read more: http://ogp.me/ -->
<meta property="fb:app_id" content="48119224995" />
<meta property="og:title" content="Untitled" />
<meta property="og:url" content="http://danismatt.tumblr.com/?og=1" />
<meta property="og:description" content="" />
<meta property="og:type" content="tumblr-feed:tumblelog" />
<meta property="og:image" content="http://assets.tumblr.com/images/default_avatar/cube_open_128.png" />
<!-- END TUMBLR FACEBOOK OPENGRAPH TAGS -->


<!-- TWITTER TAGS -->
<meta charset="utf-8">
            <meta name="twitter:site" content="tumblr" />
            <meta name="twitter:card" content="summary" />
            <meta name="twitter:title" content="danismatt" />
            <meta name="twitter:description" content=" " />
            <meta name="twitter:app:name:iphone" content="Tumblr" />
            <meta name="twitter:app:name:ipad" content="Tumblr" />
            <meta name="twitter:app:name:googleplay" content="Tumblr" />
            <meta name="twitter:app:id:iphone" content="305343404" />
            <meta name="twitter:app:id:ipad" content="305343404" />
            <meta name="twitter:app:id:googleplay" content="com.tumblr" />
            <meta name="twitter:app:url:iphone" content="tumblr://x-callback-url/blog?blogName=danismatt&amp;referrer=twitter-cards" />
            <meta name="twitter:app:url:ipad" content="tumblr://x-callback-url/blog?blogName=danismatt&amp;referrer=twitter-cards" />
            <meta name="twitter:app:url:googleplay" content="tumblr://x-callback-url/blog?blogName=danismatt&amp;referrer=twitter-cards" />
    

<script type="text/javascript" src="http://assets.tumblr.com/assets/scripts/tumblelog.js?_v=f4f460f868a53413b09b87ef1baa4345"></script>
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<script type="text/javascript" src="http://assets.tumblr.com/assets/scripts/tumblelog.js?_v=f4f460f868a53413b09b87ef1baa4345"></script>
<meta http-equiv="x-dns-prefetch-control" content="off"/>
</head>

<body>
<div id="top">
  <div id="logo"><a href="http://danismatt.tumblr.com/"><img src="http://farm3.staticflickr.com/2814/9054031579_5f383d7469_o.jpg" alt="" width="110" height="86" border="0" /></a></div>
  
  <div id="menu">
    <ul>
    <li>Latest</li>
<li><a href="http://danismatt.tumblr.com/interior">Interior</a></li>
<li><a href="http://danismatt.tumblr.com/exterior">Exterior</a></li>
<li><a href="http://danismatt.tumblr.com/photography">Photography</a>
<li><a href="http://danismatt.tumblr.com/design">Design</a></li>
<li><a href="http://danismatt.tumblr.com/ios_wallpaper">IOS Wallpaper</a></li>
<li><a href="http://danismatt.tumblr.com/about">About</a></li>
  </div>
  
    </div>

<div id="footer">



&copy;2013 <a href="https://www.facebook.com/Outofstepwiththeworld" title="Facebook" target="_blank">facebook</a> | <a href="http://www.flickr.com/photos/mattdanis/" title="flickr" target="_blank">flickr</a> | <a href="http://danismatt.tumblr.com/" title="mdp" target="_blank">portfolio main</a> | <a href="http://linkedin.com" title="linkedIn" target="_blank">linked in</a>




</div>
<div id="container" style="width:6780px;">
    <ul>
    <li><img src="http://farm8.staticflickr.com/7308/9051348560_371460b914_o.jpg" alt="" border="0" /></a></li>
<li><img src="http://farm3.staticflickr.com/2849/9049119849_c9956e4307_o.jpg" alt="" border="0" /></a></li>
<li><img src="http://farm8.staticflickr.com/7304/9049120045_a6a0562f81_o.jpg" alt="" border="0" /></a></li>
<li><img src="http://farm6.staticflickr.com/5488/9044658781_a3f9740845_o.jpg" alt="" border="0" /></a></li>
<li><img src="http://farm8.staticflickr.com/7319/9046884086_e3ccd8235f_o.jpg" alt="" border="0" /></a></li>
<li><img src="http://farm6.staticflickr.com/5350/9046884426_6f877786ac_o.jpg" alt="" border="0" /></a></li>
<li><img src="http://farm6.staticflickr.com/5465/9044658431_32f30a2689_o.jpg" alt="" border="0" /></a></li>
<li><img src="http://farm8.staticflickr.com/7323/9044676865_9a39dbc0a9_o.png" alt="" border="0" /></a></li>
      <li id="back00"><a href="http://album.alexflueras.ro/#container" id="back">&nbsp;</a></li>
  </ul>
</div>

<!-- BEGIN TUMBLR CODE -->
        
    
        <iframe id="tumblr_controls" width="1" height="1" frameborder="0" scrolling="no" style="position:absolute; z-index:2147483647; top:0; right:0; border:0; background-color:transparent; overflow:hidden; " src="http://assets.tumblr.com/assets/html/iframe/o.html?_v=acb9eb1790725cbf644e0de6a11efb0d#src=http%3A%2F%2Fdanismatt.tumblr.com%2F&amp;lang=en_US&amp;name=danismatt&amp;brag=false&amp;avatar=http%3A%2F%2Fassets.tumblr.com%2Fimages%2Fdefault_avatar%2Fcube_open_64.png&amp;title=Untitled&amp;url=http%3A%2F%2Fdanismatt.tumblr.com%2F&amp;page_slide=slide"></iframe>    <div id="teaser_iframe_container" style="display:none;"><iframe scrolling="no" frameborder="0" src="http://www.tumblr.com/assets/html/iframe/teaser.html#src=http%3A%2F%2Fdanismatt.tumblr.com%2F&amp;lang=en_US&amp;name=danismatt&amp;brag=false&amp;avatar=http%3A%2F%2Fassets.tumblr.com%2Fimages%2Fdefault_avatar%2Fcube_open_64.png&amp;title=Untitled&amp;url=http%3A%2F%2Fdanismatt.tumblr.com%2F&amp;page_slide=slide" id="teaser_iframe" width="1" height="1"></iframe></div>

<script type="text/javascript">
    (function(Tumblr){
        var follow_iframe_initialized = false;
        if (Tumblr.FollowTeaser && Tumblr.PostMessageListener) {
            // Don't do anything until the first initialize event
            Tumblr.PostMessageListener.initialize(function(message, origin) {
                if (follow_iframe_initialized || message.length < 2) return;

                if (message[0] === 'follow_iframe' && message[1] === 'enable') {
                    Tumblr.FollowTeaser.current_page = 1;
                    Tumblr.FollowTeaser.infer_infinite_scroll = true;
                    Tumblr.FollowTeaser.create_from_tumblr_controls("http:\/\/assets.tumblr.com\/assets\/html\/iframe\/follow.html?_v=db2b3a36f43a268aff2b3dded79f5474");
                    Tumblr.FollowTeaser.scroll_listener(true);
                    follow_iframe_initialized = true;
                }
            });
        }
    })(this.Tumblr || (this.Tumblr = {}));
</script>
    
    <!--[if IE]><script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script><![endif]-->
    
        
<iframe src="http://assets.tumblr.com/analytics.html?f6cde15b87006a977758975827b58965" scrolling="no" width="1" height="1" frameborder="0" style="background-color:transparent; overflow:hidden; position:absolute; top:0; left:0 z-index:9999;" id="ga_target"></iframe>

    <script>
        var COMSCORE = true;
        window.setTimeout(function() {
            var analytics_frame = document.getElementById('ga_target');
            analytics_frame.contentWindow.postMessage('enable_comscore;' + window.location, analytics_frame.src.split('/analytics.html')[0]);
        }, 1000);
    </script>



    <script type="text/javascript">
      var _qevents = _qevents || [];

      (function() {
       var elem = document.createElement('script');

       elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
       elem.async = true;
       elem.type = "text/javascript";
       var scpt = document.getElementsByTagName('script')[0];
       scpt.parentNode.insertBefore(elem, scpt);
      })();
    </script>
    <script type="text/javascript">
        _qevents.push( { qacct: 'p-19UtqE8ngoZbM' } );
    </script>
    <noscript>
        <div style="display: none;"><img src="//pixel.quantserve.com/pixel/'p-19UtqE8ngoZbM'.gif" height="1" width="1" alt="Quantcast"/></div>
    </noscript>


    <script type="text/javascript">!function(s){s.src='http://www.tumblr.com/impixu?T=1382571910&J=eyJ0eXBlIjoidXJsIiwidXJsIjoiaHR0cDpcL1wvZGFuaXNtYXR0LnR1bWJsci5jb21cLyIsInJlcXR5cGUiOjAsInJvdXRlIjoiXC8ifQ==&U=KFAFKIFEGN&K=9a9c6032ec963e9cb8247c84e7622c8e6e66e76269fb5241f033af5cc92f8b81&R=http%3A%2F%2Fwww.tumblr.com%2Fdashboard'.replace(/&R=[^&$]*/,'').concat('&R='+escape(document.referrer)).slice(0,2000).replace(/%.?.?$/,'');}(new Image());</script><noscript><img style="position:absolute;z-index:-3334;top:0px;left:0px;visibility:hidden;" src="http://www.tumblr.com/impixu?T=1382571910&J=eyJ0eXBlIjoidXJsIiwidXJsIjoiaHR0cDpcL1wvZGFuaXNtYXR0LnR1bWJsci5jb21cLyIsInJlcXR5cGUiOjAsInJvdXRlIjoiXC8iLCJub3NjcmlwdCI6MX0=&U=KFAFKIFEGN&K=c07daa7cc1c9805c42ae8977c983dfaa804c777d6d18255168bbd464312ec206&R=http%3A%2F%2Fwww.tumblr.com%2Fdashboard"></noscript>






                                                                            <script type="text/javascript" src="http://l.yimg.com/ss/rapid-3.9.js"></script>
                <script>
                    (function(YAHOO) {
                        if (YAHOO) {
                            YAHOO.i13n.beacon_server = 'nol.yahoo.com';
                            var keys = { pd:'/', _li:0, i_rad:0, i_strm:0 };
                            YAHOO.rapid = new YAHOO.i13n.Rapid({spaceid:1197719229, oo:1, client_only:1, yql_enabled:false, keys:keys});
                        }
                    })(window.YAHOO);
                </script>
                        <!-- END TUMBLR CODE -->

<!-- BEGIN TUMBLR CODE -->
        
    
        <iframe id="tumblr_controls" width="1" height="1" frameborder="0" scrolling="no" style="position:absolute; z-index:2147483647; top:0; right:0; border:0; background-color:transparent; overflow:hidden; " src="http://assets.tumblr.com/assets/html/iframe/o.html?_v=acb9eb1790725cbf644e0de6a11efb0d#src=http%3A%2F%2Fdanismatt.tumblr.com%2F&amp;lang=en_US&amp;name=danismatt&amp;brag=false&amp;avatar=http%3A%2F%2Fassets.tumblr.com%2Fimages%2Fdefault_avatar%2Fcube_open_64.png&amp;title=Untitled&amp;url=http%3A%2F%2Fdanismatt.tumblr.com%2F&amp;page_slide=slide"></iframe>    <div id="teaser_iframe_container" style="display:none;"><iframe scrolling="no" frameborder="0" src="http://www.tumblr.com/assets/html/iframe/teaser.html#src=http%3A%2F%2Fdanismatt.tumblr.com%2F&amp;lang=en_US&amp;name=danismatt&amp;brag=false&amp;avatar=http%3A%2F%2Fassets.tumblr.com%2Fimages%2Fdefault_avatar%2Fcube_open_64.png&amp;title=Untitled&amp;url=http%3A%2F%2Fdanismatt.tumblr.com%2F&amp;page_slide=slide" id="teaser_iframe" width="1" height="1"></iframe></div>

<script type="text/javascript">
    (function(Tumblr){
        var follow_iframe_initialized = false;
        if (Tumblr.FollowTeaser && Tumblr.PostMessageListener) {
            // Don't do anything until the first initialize event
            Tumblr.PostMessageListener.initialize(function(message, origin) {
                if (follow_iframe_initialized || message.length < 2) return;

                if (message[0] === 'follow_iframe' && message[1] === 'enable') {
                    Tumblr.FollowTeaser.current_page = 1;
                    Tumblr.FollowTeaser.infer_infinite_scroll = true;
                    Tumblr.FollowTeaser.create_from_tumblr_controls("http:\/\/assets.tumblr.com\/assets\/html\/iframe\/follow.html?_v=db2b3a36f43a268aff2b3dded79f5474");
                    Tumblr.FollowTeaser.scroll_listener(true);
                    follow_iframe_initialized = true;
                }
            });
        }
    })(this.Tumblr || (this.Tumblr = {}));
</script>
    
    <!--[if IE]><script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script><![endif]-->
    
        
<iframe src="http://assets.tumblr.com/analytics.html?f6cde15b87006a977758975827b58965" scrolling="no" width="1" height="1" frameborder="0" style="background-color:transparent; overflow:hidden; position:absolute; top:0; left:0 z-index:9999;" id="ga_target"></iframe>

    <script>
        var COMSCORE = true;
        window.setTimeout(function() {
            var analytics_frame = document.getElementById('ga_target');
            analytics_frame.contentWindow.postMessage('enable_comscore;' + window.location, analytics_frame.src.split('/analytics.html')[0]);
        }, 1000);
    </script>



    <script type="text/javascript">
      var _qevents = _qevents || [];

      (function() {
       var elem = document.createElement('script');

       elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
       elem.async = true;
       elem.type = "text/javascript";
       var scpt = document.getElementsByTagName('script')[0];
       scpt.parentNode.insertBefore(elem, scpt);
      })();
    </script>
    <script type="text/javascript">
        _qevents.push( { qacct: 'p-19UtqE8ngoZbM' } );
    </script>
    <noscript>
        <div style="display: none;"><img src="//pixel.quantserve.com/pixel/'p-19UtqE8ngoZbM'.gif" height="1" width="1" alt="Quantcast"/></div>
    </noscript>


    <script type="text/javascript">!function(s){s.src='http://www.tumblr.com/impixu?T=1382992748&J=eyJ0eXBlIjoidXJsIiwidXJsIjoiaHR0cDpcL1wvZGFuaXNtYXR0LnR1bWJsci5jb21cLyIsInJlcXR5cGUiOjAsInJvdXRlIjoiXC8ifQ==&U=BLKJCEINEF&K=c80c4955c5af0211137c041a81c9dd4ba88c4d331b5d9dd8722d8f66d1a42349&R=http%3A%2F%2Fwww.tumblr.com%2Fcustomize%2Fdanismatt%3Fredirect_to%3Dhttp%253A%252F%252Fdanismatt.tumblr.com%252F'.replace(/&R=[^&$]*/,'').concat('&R='+escape(document.referrer)).slice(0,2000).replace(/%.?.?$/,'');}(new Image());</script><noscript><img style="position:absolute;z-index:-3334;top:0px;left:0px;visibility:hidden;" src="http://www.tumblr.com/impixu?T=1382992748&J=eyJ0eXBlIjoidXJsIiwidXJsIjoiaHR0cDpcL1wvZGFuaXNtYXR0LnR1bWJsci5jb21cLyIsInJlcXR5cGUiOjAsInJvdXRlIjoiXC8iLCJub3NjcmlwdCI6MX0=&U=BLKJCEINEF&K=562acdfa58bb1b7d7228d6ad58b09b2eb955a2cd686f87ec1ce3b36c87b15df0&R=http%3A%2F%2Fwww.tumblr.com%2Fcustomize%2Fdanismatt%3Fredirect_to%3Dhttp%253A%252F%252Fdanismatt.tumblr.com%252F"></noscript>






                                                                            <script type="text/javascript" src="http://l.yimg.com/ss/rapid-3.9.js"></script>
                <script>
                    (function(YAHOO) {
                        if (YAHOO) {
                            YAHOO.i13n.beacon_server = 'nol.yahoo.com';
                            var keys = { pd:'/', _li:0, i_rad:0, i_strm:0 };
                            YAHOO.rapid = new YAHOO.i13n.Rapid({spaceid:1197719229, oo:1, client_only:1, yql_enabled:false, keys:keys});
                        }
                    })(window.YAHOO);
                </script>
                        <!-- END TUMBLR CODE -->

</body>
</html>

Any help is greatly appreciated, thank you.
Edited by xdanisx - 10/28/13 at 3:03pm
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
post #2 of 7
Don't do it. Pretty sure Din is a is a licensed font and if I remember correctly, it does not even support a web version of the license( one of our designers used it in a comp a little while back ). If you upload the ttf file and use it you are making it available to anybody who accesses your site for download and open yourself up to a copyright lawsuit and possibly illegal distribution. It is generally not a good idea to do this, even with free fonts, but for sure not with licensed fonts.

You should be able to find something really close via google fonts which are all free to use and very easy to implement.

Check out http://www.google.com/fonts

Just add the font and which weights you need to your "collection" and then generate the code you need to add it to your site( multiple options here including javascript, css etc. ) and then you can use the font in your site without any license issues by just specifying the font-family in css.
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
post #3 of 7
Thread Starter 
So then how would I do this with another font?
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
post #4 of 7
Did you check out google fonts as linked?

Pretty simple process.

1. Find the font(s) you want to use on your site on google fonts.
2. Click on the "Add to Collection" button for the font(s) you want to include. You only want to include the fonts and weights of each font that you are going to actually use for performance reasons.
3. Once you have selections made, at the bottom of the page in the right corner, you should see 3 buttons ( choose, review, use )
4. Click on Use
5. This will show you which fonts are being included and there will be 3 tabs for inclusion into your project, depending on which one works best for you. I would suggest the default
Code:
<link .... >
style unless you have a specific reason to use @import or js version
6. Copy and past whichever you choose into your page.
7. if you scroll down a little further there is a "Integrate the fonts into your CSS". This shows you the font family you would specify in your css to use the selected font.
8. Your page should now render the font specified for each element that has been given the font-family correctly.
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
post #5 of 7
Thread Starter 
No, I'm more interested in coding it, learning how, and just keeping it more simple for me, thank you though.

Anybody know how?
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
post #6 of 7
Thread Starter 
Bump
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
Parvum
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 6700k Gigabyte Z170X-Gaming 6 2x Gigabyte GTX 1080 G1 16GB DDR4 
Hard DriveOSMonitorKeyboard
Samsung 512GB M.2 950 Pro NVMe Windows 10 Dell 1440p Pok3r 
PowerCaseMouseMouse Pad
EVGA 750GQ Parvum M1.0 Logitech G9X Corsair 
  hide details  
Reply
post #7 of 7
There is a link at the top of the page (down pointing arrow button) that allows you to download the font for local distribution. You would then just have to implement the @font-face yourself which defines the font-family you use in css.

example:
Code:
@font-face {
  font-family: 'Share Tech';
  font-style: normal;
  font-weight: 400;
  src: local('Share Tech'), local('ShareTech-Regular'), url(http://themes.googleusercontent.com/static/fonts/sharetech/v1/riJWcvd3sYdxJpiCWZvUGL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}

You would have to change the src line to point to your local install for the url() of course. Then you can just use 'Share Tech' or whatever your font-face definition declares for font-family in your css above where you have Trebuchet MS. You should be able to just put the @font-face definition at the top of your css file, or put it in its own css file and include it separately in your page. (this would work with your existing DIN font also, just wouldn't be licensed for web correctly ).

The other option would be to download the font from Google Fonts via the arrow link mentioned above, then use a tool like font squirrel http://www.fontsquirrel.com/tools/webfont-generator to generate the @font-face definition for you. The main reason I suggest google fonts is because all the fonts there have a license that allows free use on the web which protects you from legal issues down the road.

None of the methods in this thread are really doing anything for you beside giving you the font and @font-family definition to use in your site. Then you just use the font-family in your css definitions like you would any other font.

Hope that helps.
Edited by glakr - 10/30/13 at 2:35pm
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › custom font for tumblr css stylesheet