{"id":20752,"date":"2016-03-18T03:01:24","date_gmt":"2016-03-17T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20752"},"modified":"2018-01-10T23:20:22","modified_gmt":"2018-01-10T13:20:22","slug":"css3-web-fonts-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-web-fonts-primer-tutorial\/","title":{"rendered":"CSS3 Web Fonts Primer Tutorial"},"content":{"rendered":"
\"CSS3<\/a>

CSS3 Web Fonts Primer Tutorial<\/p><\/div>\n

CSS3<\/a> brought with it more possibilities regarding the use of Web Fonts<\/a> (separate to your default fonts (or “web safe”<\/a> fonts, that are usually installed)), and the use of …<\/p>\n

    \n
  1. CSS3 @font-face rule<\/li>\n
  2. linking of that @font-face rule to a “class definition”<\/li>\n<\/ol>\n

    … as per … this code snippet from within today’s HTML within its <head> and <\/head> and within that <style> and <\/style>…<\/p>\n


    \n@font-face {
    \n font-family: dashiconsFont;
    \n src: url(http:\/\/www.rjmprogramming.com.au\/<\/b>ITblog\/wp-includes\/fonts\/dashicons.woff);
    \n}
    \n<\/b>
    \n.dashicons {
    \n font-family: dashiconsFont;
    \n}
    \n<\/code><\/p>\n

    So what’s the deal today? Well, we thought we’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 … minding their own business<\/font> … but happening during installs of CMS products like WordPress or Joomla.<\/p>\n

    \nBut how do you search for a CSS3 Web Font on your web server?\n<\/p><\/blockquote>\n

    we hear you say … plaintively<\/font>.<\/p>\n

    Well, the CSS3 Web Fonts are represented by files with the .woff<\/i> extension … no, not .woof<\/i> Nala<\/font>.<\/p>\n

    So, on our Linux box (ie. our Linux web server computer) we gain access via ssh<\/i> … as you would<\/font> … and issue the command (bold<\/b> bits optional) …<\/p>\n


    \nfind \/ -name '*.woff' 2> \/dev\/null | grep -v '.woof'<\/b>
    \n<\/code><\/p>\n

    … to help you (ie. your job here is to substitute your domain’s document root web server path for domain landing page URL<\/b>) determine URL values you can place into the CSS3 @font-face rule src<\/i> property. If this is not making sense, take some time to read Cassini++ WebServer Primer Tutorial<\/a>.<\/p>\n

    If the web server is Windows, and you’ve ssh<\/i>‘ed to it, try the (DOS) command …<\/p>\n


    \ndir c:\\*.woff \/s \/e | find \/V '.woof'<\/b>
    \n<\/code><\/p>\n

    To read more about ssh<\/i> access to web servers, at this blog, please read Web Server Access Primer Tutorial<\/a>.<\/p>\n

    Yes … we are behoven … here is the behoved HTML and Javascript and CSS(3) programming source you could call css3_webfonts_rjm.html<\/a> with this live run<\/a> link.<\/p>\n

    If this was interesting you may be interested in this<\/a> too.<\/p>\n