{"id":49439,"date":"2020-06-25T03:01:36","date_gmt":"2020-06-24T17:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49439"},"modified":"2020-06-24T17:06:54","modified_gmt":"2020-06-24T07:06:54","slug":"css3-web-truetypefont-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-web-truetypefont-tutorial\/","title":{"rendered":"CSS3 Web TrueTypeFont Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dejatest.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"CSS3 Web TrueTypeFont Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dejatest.jpg\" title=\"CSS3 Web TrueTypeFont Tutorial\"  \/><\/a><p class=\"wp-caption-text\">CSS3 Web TrueTypeFont Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s tutorial involving the <a target=_blank title='DejaVuSansMono font Google search' href='https:\/\/www.google.com\/search?q=DejaVuSansMono&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=DejaVuSansMono&#038;aqs=chrome..69i57j69i59j35i39l2j0l4.1057j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>DejaVuSansMono<\/a> TrueTypeFont when we presented &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Animated GIF Watermark Comments Karaoke Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-watermark-comments-karaoke-tutorial\/'>Animated GIF Watermark Comments Karaoke Tutorial<\/a> &#8230; set us to thinking about when we presented &#8230;<\/li>\n<li><a title='CSS3 Web Fonts Primer Tutorial' href='#css3wfpt'>CSS3 Web Fonts Primer Tutorial<\/a> &#8230; with its *.woff font files and whether TrueTypeFonts can work with CSS3 @font-face rules as well<\/li>\n<\/ul>\n<p> &#8230; the long answer is &#8220;Yes&#8221; and a shorter answer is &#8220;Ya&#8221; &#8230; and <a target=_blank title='Two Ronnies' href='http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ'>&#8220;S,VFX&#8221;<\/a>.<\/p>\n<p>We wanted to channel that CSS3 @font-face rule <a target=_blank title='CSS3 Web Fonts information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_fonts.asp'>Web Font<\/a> capability into a proof of concept (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dejatest.html_GETME\">dejatest.html<\/a>) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dejatest.html\">web application<\/a> that you can try for yourself seeing some static HTML as well as an HTML div <a target=_blank title=Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true element which you can append emojis (as supported by DejaVuSansMono TrueTypeFont) onto.  Or try it here, below &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dejatest.html' style='width:100%;height:1600px;'><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/css3-web-truetypefont-tutorial\/'>CSS3 Web TrueTypeFont Tutorial<\/a> .<\/p-->\n<hr>\n<p id='css3wfpt'>Previous relevant <a target=_blank title='CSS3 Web Fonts Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css3-web-fonts-primer-tutorial\/'>CSS3 Web Fonts Primer Tutorial<\/a> is shown below.<\/p-->\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_webfonts_rjm.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"CSS3 Web Fonts Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_webfonts_rjm.jpg\" title=\"CSS3 Web Fonts Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">CSS3 Web Fonts Primer Tutorial<\/p><\/div>\n<p><a target=_blank title='CSS3 information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_intro.asp'>CSS3<\/a> brought with it more possibilities regarding the use of <a target=_blank title='CSS3 Web Fonts information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_fonts.asp'>Web Fonts<\/a> (separate to your default fonts (or <a target=_blank title='Web Safe fonts information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css_websafe_fonts.asp'>&#8220;web safe&#8221;<\/a> fonts, that are usually installed)), and the use of &#8230;<\/p>\n<ol>\n<li>CSS3 @font-face rule<\/li>\n<li>linking of that @font-face rule to a &#8220;class definition&#8221;<\/li>\n<\/ol>\n<p> &#8230; as per &#8230; this code snippet from within today&#8217;s HTML within its &lt;head&gt; and &lt;\/head&gt; and within that &lt;style&gt; and &lt;\/style&gt;&#8230;<\/p>\n<p><code><br \/>\n@font-face {<br \/>\n    font-family: dashiconsFont;<br \/>\n    src: url(<b>http:\/\/www.rjmprogramming.com.au\/<\/b>ITblog\/wp-includes\/fonts\/dashicons.woff);<br \/>\n}<br \/>\n<b><\/b><br \/>\n.dashicons {<br \/>\n    font-family: dashiconsFont;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>So what&#8217;s the deal today?  Well, we thought we&#8217;d show you some CSS3 Web Fonts in action, those being the ones that happen to be hanging around our  (Apache hosting PHP and MySql) web server &#8230; <font size=1>minding their own business<\/font> &#8230; but happening during installs of CMS products like WordPress or Joomla.<\/p>\n<blockquote><p>\nBut how do you search for a CSS3 Web Font on your web server?\n<\/p><\/blockquote>\n<p> we hear you say &#8230; <font size=1>plaintively<\/font>.<\/p>\n<p>Well, the CSS3 Web Fonts are represented by files with the <i>.woff<\/i> extension &#8230; <font size=1>no, not <i>.woof<\/i> Nala<\/font>.<\/p>\n<p>So, on our Linux box (ie. our Linux web server computer) we gain access via <i>ssh<\/i> &#8230; <font size=1>as you would<\/font> &#8230; and issue the command (<b>bold<\/b> bits optional) &#8230;<\/p>\n<p><code><br \/>\nfind \/ -name '*.woff' 2> \/dev\/null <b>| grep -v '.woof'<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; to help you (ie. your job here is to substitute your domain&#8217;s document root web server path for <b>domain landing page URL<\/b>) determine URL values you can place into the CSS3 @font-face rule <i>src<\/i> property.  If this is not making sense, take some time to read <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/cassini-webserver-primer-tutorial\/' title='Cassini++ WebServer Primer Tutorial'>Cassini++ WebServer Primer Tutorial<\/a>.<\/p>\n<p>If the web server is Windows, and you&#8217;ve <i>ssh<\/i>&#8216;ed to it, try the (DOS) command &#8230;<\/p>\n<p><code><br \/>\ndir c:\\*.woff \/s \/e <b>| find \/V '.woof'<\/b><br \/>\n<\/code><\/p>\n<p>To read more about <i>ssh<\/i> access to web servers, at this blog, please read <a target=_blank title='Web Server Access Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/web-server-access-primer-tutorial\/'>Web Server Access Primer Tutorial<\/a>.<\/p>\n<p>Yes &#8230; we are behoven &#8230; here is the behoved HTML and Javascript and CSS(3) programming source you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_webfonts_rjm.html_GETME\" title='css3_webfonts_rjm.html'>css3_webfonts_rjm.html<\/a> with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_webfonts_rjm.html\" title='Click picture'>live run<\/a> link.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d20752' onclick='var dv=document.getElementById(\"d20752\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/font\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20752' style='display: none; border-left: 2px solid green; border-top:2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d49439' onclick='var dv=document.getElementById(\"d49439\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/true-type-font\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49439' style='display: none; border-left: 2px solid green; border-top:2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s tutorial involving the DejaVuSansMono TrueTypeFont when we presented &#8230; Animated GIF Watermark Comments Karaoke Tutorial &#8230; set us to thinking about when we presented &#8230; CSS3 Web Fonts Primer Tutorial &#8230; with its *.woff font files and whether TrueTypeFonts &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-web-truetypefont-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[281,282,3339,367,385,451,3342,576,997,1866,1209,1212,3338,1319,1333,1829],"class_list":["post-49439","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-css","tag-css3","tag-dejavusansmono","tag-dropdown","tag-emoji","tag-font","tag-font-face-rule","tag-html","tag-programming","tag-select","tag-style","tag-styling","tag-true-type-font","tag-tutorial","tag-unicode","tag-web-font"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49439"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=49439"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49439\/revisions"}],"predecessor-version":[{"id":49462,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49439\/revisions\/49462"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=49439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=49439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=49439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}