{"id":39374,"date":"2018-07-13T03:01:14","date_gmt":"2018-07-12T17:01:14","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=39374"},"modified":"2018-07-13T08:19:21","modified_gmt":"2018-07-12T22:19:21","slug":"google-fonts-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-fonts-primer-tutorial\/","title":{"rendered":"Google Fonts Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a title='Google Fonts Primer Tutorial' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/test_gf.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Google Fonts Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/test_gf.jpg\" title=\"Google Fonts Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Google Fonts Primer Tutorial<\/p><\/div>\n<p>How best to talk about <a target=_blank title='Google Fonts' href='\/\/fonts.google.com\/'>Google Fonts<\/a>?<\/p>\n<p>Chairman, have we still got a quorum?  Chairman?!<\/p>\n<p>Well, we really like to explain some topics by launching into it and applying it, so we came at this &#8220;applying it&#8221; from two angles &#8230;<\/p>\n<ol>\n<li>proof of concept<font size=1> &#8230; just call me &#8220;A Cute&#8221;<\/font><\/li>\n<li>temporary CSS option for the blog you are reading<font size=1> &#8230; my name is &#8220;Ob Tuse&#8221;<\/font><\/li>\n<\/ol>\n<p>This useful &#8220;application of Google Fonts&#8221; template <a target=_blank title='Useful w3schools webpage, thanks' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?font=Knewave'>webpage<\/a>, if you will &#8230; thanks &#8230; inspired me to write the <a target=\"_blank\" title='Google Fonts Primer Tutorial' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/test_gf.php_GETME\">test_gf.php<\/a>&#8216;s <a target=_blank title='Google Fonts Primer Tutorial' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/test_gf.php\" title=\"Click picture\">proof of concept<\/a> shown below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/test_gf.php\" style=\"width:100%;height:500px;\"><\/iframe><\/p>\n<p> &#8230; where, if you glean some good Google Font Family names visiting <a target=_blank title='Google Fonts' href='\/\/fonts.google.com\/'>this webpage<\/a>, where a lot of the online world&#8217;s geniuses with fonts have gathered to assemble this online repository of font &#8220;goodies&#8221; free for us all to access &#8230; thanks, heaps!<\/p>\n<p>To see it in action with actual webpages we extend the logic of <a title='WordPress Temporary User CSS Primer Tutorial' href='#wptucsspt'>WordPress Temporary User CSS Primer Tutorial<\/a>&#8216;s menu driven blog webpage code to allow your temporarily applied CSS amount to the name of one of those Google Font Family names, to which we extend the thinking to the two step application of the functionality that goes (to good ol&#8217; header.php of the WordPress TwentyTen theme &#8230; as per usual) &#8230;<\/p>\n<ol>\n<li>call the Google Font with &lt;head&gt; and &lt;\/head&gt; as per <em>the additional<\/em> (PHP code snippet change) &#8230;<br \/>\n<code><br \/>\n    <em>if (isset($_GET['cssextra'])) {<br \/>\n      if ($_GET['cssextra'] != '' && strpos(urldecode($_GET['cssextra']), \"{\") === false) {<br \/>\n         echo \"\\n&lt;link href='\/\/fonts.googleapis.com\/css?family=\" . str_replace('+',' ',urldecode($_GET['cssextra'])) . \"' rel='stylesheet'&gt;\\n\";<br \/>\n      }<br \/>\n      if ($_GET['ourcss'] != '' && strpos(urldecode($_GET['ourcss']), \"{\") === false) {<br \/>\n         echo \"\\n&lt;link href='\/\/fonts.googleapis.com\/css?family=\" . str_replace('+',' ',urldecode($_GET['ourcss'])) . \"' rel='stylesheet'&gt;\\n\";<br \/>\n      }<br \/>\n    }<\/em><br \/>\n?&gt;<br \/>\n&lt;style&gt;<br \/>\n<\/code>\n<\/li>\n<li>change code checking for web address (PHP $_GET[]) arguments and\/or PHP $_SESSION variables <em>changed<\/em> as per (PHP code snippet change) &#8230;<br \/>\n<code><br \/>\n   if (isset($_SESSION['ourcss'])) {<br \/>\n     echo str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',$_SESSION['ourcss']));<br \/>\n   } else if (file_exists(\"localcss_\" . my_t_d_server_remote_addr() . \".yzy\")) {<br \/>\n     $lcss = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',file_get_contents((\"localcss_\" . my_t_d_server_remote_addr() . \".yzy\"))));<br \/>\n     $_SESSION['ourcss'] = $lcss;<br \/>\n     echo $lcss;<br \/>\n     unlink(\"localcss_\" . my_t_d_server_remote_addr() . \".yzy\");<br \/>\n   } else if (isset($_GET['cssask'])) {<br \/>\n   } else if (isset($_GET['ourcss'])) {<br \/>\n     <em>if ($_GET['ourcss'] != '' && strpos(urldecode($_GET['ourcss']), \"{\") === false) {<br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','', ' body { font-family:' . str_replace('+',' ',urldecode($_GET['ourcss'])) . '; }' ));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n     } else {<\/em><br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',urldecode($_GET['ourcss'])));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n     <em>}<\/em><br \/>\n   } else if (isset($_GET['cssextra'])) {<br \/>\n     <em>if ($_GET['cssextra'] != '' && strpos(urldecode($_GET['cssextra']), \"{\") === false) {<br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','', ' body { font-family:' . str_replace('+',' ',urldecode($_GET['cssextra'])) . '; }' ));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n     } else {<\/em><br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',urldecode($_GET['cssextra'])));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n     <em>}<\/em><br \/>\n   } else if (strpos($_SERVER['QUERY_STRING'],'cssextra=')) {<br \/>\n     $sbits=explode(\"cssextra=\", str_replace('#','&',$_SERVER['QUERY_STRING']) . '&');<br \/>\n     $ssbits=explode(\"&\",$sbits[1]);<br \/>\n     <em>if ($ssbits[0] != '' && strpos(urldecode($ssbits[0]), \"{\") === false) {<br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','', ' body { font-family:' . str_replace('+',' ',urldecode($ssbits[0])) . '; }'   ));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n     } else {<\/em><br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',urldecode($ssbits[0])));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n     <em>}<\/em><br \/>\n   } else if (strpos($_SERVER['QUERY_STRING'],'ourcss=')) {<br \/>\n     $sbits=explode(\"ourcss=\", str_replace('#','&',$_SERVER['QUERY_STRING']) . '&');<br \/>\n     $ssbits=explode(\"&\",$sbits[1]);<br \/>\n     <em>if ($ssbits[0] != '' && strpos(urldecode($ssbits[0]), \"{\") === false) {<br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','', ' body { font-family:' . str_replace('+',' ',urldecode($ssbits[0])) . '; }'   ));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n     } else {<\/em><br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',urldecode($ssbits[0])));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n     <em>}<\/em><br \/>\n   }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; which you can access or try for yourself from this blog&#8217;s &#8220;All Posts&#8221; menu submenu option &#8220;Temporary User CSS&#8221; entering into the textarea the Google Font Family name of interest (all on its lonesome) before clicking the form submit button lower down to make it happen.  We hope this is of interest, quorum!<\/p>\n<hr>\n<p id='wptucsspt'>Previous relevant <a target=_blank title='WordPress Temporary User CSS Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-temporary-user-css-primer-tutorial\/'>WordPress Temporary User CSS Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a title='WordPress Temporary User CSS Primer Tutorial' href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/all-posts\/temporary-user-css\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"WordPress Temporary User CSS Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/temporary_user_css.jpg\" title=\"WordPress Temporary User CSS Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">WordPress Temporary User CSS Primer Tutorial<\/p><\/div>\n<p><a target=_blank title='Cascading Style Sheet information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Cascading_Style_Sheets'>CSS<\/a> is, perhaps, best learnt with a varied <i>palette<\/i> to work with, to see how an effect you want to create both &#8230;<\/p>\n<ol>\n<li>works itself, as the concept you want to see &#8230; and &#8230;<\/li>\n<li>interacts with a wide variety of other cascading styling settings, in terms of its robustness, and hierarchy of usefulness &#8230; in other words, your CSS positioning may be very important regarding its workings<\/li>\n<\/ol>\n<p>Today we introduce some functionality that allows you to use this blog, with its default styling as your <i>palette<\/i> as an experimental tool, perhaps, for your CSS testing.<\/p>\n<p>In these terms we try to have your own CSS be last in the order of CSS interpreted by the web browser, but it is really up to you to see for yourself what you need to do to make things happen.<\/p>\n<p>This change involved &#8230; you probably guessed it &#8230; <b><i>tweaking<\/i><\/b> WordPress TwentyTen theme&#8217;s good ol&#8217; header.php &#8230; in <b>two parts<\/b> &#8230;<\/p>\n<p><code><br \/>\n&lt;head&gt;<br \/>\n<b><\/b><br \/>\n\/\/ Lots of other Javascript and CSS work<br \/>\n\/\/ ...<br \/>\n<b><\/b><br \/>\n&lt;style&gt;<br \/>\n<b><\/b><br \/>\n\/\/ Lots of other CSS work<br \/>\n\/\/ ...<br \/>\n<b><\/b><br \/>\n<b><br \/>\n   if (isset($_SESSION['ourcss'])) {<br \/>\n     echo str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',$_SESSION['ourcss']));<br \/>\n   } else if (file_exists(\"localcss_\" . my_t_d_server_remote_addr() . \".yzy\")) {<br \/>\n     $lcss = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',file_get_contents((\"localcss_\" . my_t_d_server_remote_addr() . \".yzy\"))));<br \/>\n     $_SESSION['ourcss'] = $lcss;<br \/>\n     echo $lcss;<br \/>\n     unlink(\"localcss_\" . my_t_d_server_remote_addr() . \".yzy\");<br \/>\n   } else if (isset($_GET['cssask'])) {<br \/>\n   } else if (isset($_GET['ourcss'])) {<br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',urldecode($_GET['ourcss'])));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n   } else if (isset($_GET['cssextra'])) {<br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',urldecode($_GET['cssextra'])));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n   } else if (strpos($_SERVER['QUERY_STRING'],'cssextra=')) {<br \/>\n     $sbits=explode(\"cssextra=\", str_replace('#','&',$_SERVER['QUERY_STRING']) . '&');<br \/>\n     $ssbits=explode(\"&\",$sbits[1]);<br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',urldecode($ssbits[0])));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n   } else if (strpos($_SERVER['QUERY_STRING'],'ourcss=')) {<br \/>\n     $sbits=explode(\"ourcss=\", str_replace('#','&',$_SERVER['QUERY_STRING']) . '&');<br \/>\n     $ssbits=explode(\"&\",$sbits[1]);<br \/>\n     $_SESSION['ourcss'] = str_replace('&lt;' . 'style&gt;','',str_replace('&lt;' . '\/style&gt;','',urldecode($ssbits[0])));<br \/>\n     echo $_SESSION['ourcss'];<br \/>\n   }<br \/>\n<\/b><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and &#8230;<\/p>\n<p><code><br \/>\nfunction cookie_fonts() {<br \/>\n<b><\/b><br \/>\n\/\/ Lots of other Javascript Cookie based work helping with control of some user styling settings discussed at ...<br \/>\n\/\/ <a target=_blank title='WordPress User Body Background Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-user-body-background-primer-tutorial\/'>https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-user-body-background-primer-tutorial\/<\/a><br \/>\n\/\/ ...<br \/>\n<b><\/b><br \/>\n<b><br \/>\n&lt;?php<br \/>\n   if (isset($_SESSION['ourcss'])) {<br \/>\n     echo \"\\n\" . ' appendtoa(\"cssextra\", \"\" + encodeURIComponent(\"' . $_SESSION['ourcss'] . '\"));  ' . \"\\n\";<br \/>\n   }<br \/>\n?&gt;<br \/>\n<\/b><br \/>\n}<br \/>\n\/\/ ...<br \/>\n\/\/ and then lots more down to (unchanged) end of <i>head<\/i> section and document.body <i>onload<\/i> (where <i>cookie_fonts<\/i>() is the last <i>onload<\/i> functionality) as per ...<br \/>\n\/\/ ...<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\" setTimeout(initpostedoncc, 3000);  sdescih();  widgetcon(); precc(); courseCookies(); <i>cookie_fonts();<\/i> \" &lt;?php body_class(); ?&gt;&gt;<br \/>\n<\/code><\/p>\n<p id='myownul'>So if you want to try your own CSS try this <a target=_blank title='Click picture' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/all-posts\/temporary-user-css\/'>live run<\/a> link, and see, below, some other suggestions (which simulate what the All Posts -&gt; Temporary User CSS submenu does), that, if you click, and you want to reset use this <a target=_blank title='Reset link' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-temporary-user-css-primer-tutorial\/?cssextra='>reset link<\/a> here.<\/p>\n<ul>\n<li><a target=_blank title='*{font-family: \"Comic Sans MS\", \"Comic Sans\", cursive;}' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-temporary-user-css-primer-tutorial\/?cssextra=*%7Bfont-family%3A+%22Comic+Sans+MS%22%2C+%22Comic+Sans%22%2C+cursive%3B%7D%0D%0A'>*{font-family: &#8220;Comic Sans MS&#8221;, &#8220;Comic Sans&#8221;, cursive;}<\/a><\/li>\n<li><a target=_blank title='p{background-color:silver;}' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-temporary-user-css-primer-tutorial\/?cssextra=p%257Bbackground-color%253Asilver%253B%257D'>p{background-color:silver;}<\/a><\/li>\n<li><a target=_blank title='ul li:nth-child(3):before{background-color: violet;}' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-temporary-user-css-primer-tutorial\/?cssextra=ul+li%3Anth-child%283%29%3Abefore%7Bbackground-color%3A+violet%3B%7D#myownul'>ul li:<\/a><a target=_blank title='CSS nth-child information' href='https:\/\/css-tricks.com\/how-nth-child-works\/'>nth-child(3)<\/a><a target=_blank title='CSS before property attribute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_before.asp'>:before<\/a><a target=_blank title='p{background-color:silver;}' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-temporary-user-css-primer-tutorial\/?cssextra=ul+li%3Anth-child%283%29%3Abefore%7Bbackground-color%3A+violet%3B%7D#myownul'>{background-color: violet;}  \/* violet will show under emoji to left *\/<\/a><\/li>\n<\/ul>\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='#d22879' onclick='var dv=document.getElementById(\"d22879\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/blog\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22879' 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='#d39374' onclick='var dv=document.getElementById(\"d39374\"); 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='d39374' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>How best to talk about Google Fonts? Chairman, have we still got a quorum? Chairman?! Well, we really like to explain some topics by launching into it and applying it, so we came at this &#8220;applying it&#8221; from two angles &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-fonts-primer-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":[151,281,451,1828,513,2613,770,866,932,997,1055,1319,1324,1325,1456],"class_list":["post-39374","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-css","tag-font","tag-font-family","tag-google","tag-google-fonts","tag-menu","tag-online","tag-php","tag-programming","tag-repository","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39374"}],"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=39374"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39374\/revisions"}],"predecessor-version":[{"id":39399,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39374\/revisions\/39399"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=39374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=39374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=39374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}