1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Ubuntu fonts on Centos5 with nginx/php-fpm?

Discussion in 'Server Configuration and Hosting' started by speedway, May 25, 2013.

  1. speedway

    speedway Well-Known Member

    I have been looking around the web and I really like the Ubuntu fonts. I want to use them for my site but don't want to add yet another call to Google to get them I downloaded and installed the ubuntu-font-family onto my Centos 5.4 VPS but just cannot get my site to load using the Ubuntu font tag.

    Does anyone know how to locally install fonts AND get them to load into sites? I have spent the last couple of hours searching Google but everything I can find either relates to using them on the desktop or including the css line to get them from Google.

    Code:
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
    Any help appreciated.

    Cheers
     
  2. MattW

    MattW Well-Known Member

  3. speedway

    speedway Well-Known Member

    Thanks Matt

    I will try linking them from Google, I am just concerned at the moment because my site seems to have slowed down lately for some reason. Some of the slowdown was directly after I added my adsense code back (I forgot to include it when I launched XF) and I don't want to over tax my small VPS (2GB Mem, 4GB burst). Will give it a go though and see what happens. Thanks to for the link.
     
  4. speedway

    speedway Well-Known Member

    Wow, I just linked the fonts from Google and added the font def to my text site. They do look damn nice! Just need to adjust the font sizes to suit now but real happy with the added readability (y)
     
  5. MattW

    MattW Well-Known Member

    Just looking at your site, and it's slowing down because of the ads on there (getting a lot of warming about them as well in Chrome)

    auspeedway.PNG
     
  6. speedway

    speedway Well-Known Member

    Thanks for that Matt, and that is even with the standard XF skin! I have sworn black and blue to the ad people that it is slowing me down and they claim it doesn't on their end. I even put the damn things in iframes to get them to load after everything else which worked for a while. If I can figure out how to cache all their crap on the CDN I am sure it would speed up, but the people I deal with have to deal with others down the line.
     
  7. Tracy Perry

    Tracy Perry Well-Known Member

    I'm running Debian, but it works the same no matter the ice cream flavor. :D

    Edited my nginx.conf and modified this entry
    Code:
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/javascript text/xml application/xml application/rss+xml application/atom+xml application/rdf+ application/atom+xml application/rdf+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype;
    
    Modified the mime.types to reflect the new fonts.
    Code:
    application/vnd.ms-fontobject      eot;
    application/x-font-ttf            ttf;
    font/opentype                      ott;
    font/x-woff                        woff;
    
    Downloaded the fonts I wanted from Google. Went to http://www.fontsquirrel.com/tools/webfont-generator and created all the fonts I had in multiple formats. Downloaded those and installed them into a /fonts directory in my web root. Edited EXTRA.css and added this
    Code:
    @font-face {
        font-family: 'Ubuntubold';
        src: url('/fonts/ubuntu-bold-webfont.eot');
        src: url('/fonts/ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),
            url('/fonts/ubuntu-bold-webfont.woff') format('woff'),
            url('/fonts/ubuntu-bold-webfont.ttf') format('truetype'),
            url('/fonts/ubuntu-bold-webfont.svg#ubuntubold') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
     
     
     
    @font-face {
        font-family: 'Ubuntubold_italic';
        src: url('/fonts/ubuntu-bolditalic-webfont.eot');
        src: url('/fonts/ubuntu-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
            url('/fonts/ubuntu-bolditalic-webfont.woff') format('woff'),
            url('/fonts/ubuntu-bolditalic-webfont.ttf') format('truetype'),
            url('/fonts/ubuntu-bolditalic-webfont.svg#ubuntubold_italic') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
     
     
     
    @font-face {
        font-family: 'Ubuntuitalic';
        src: url('/fonts/ubuntu-italic-webfont.eot');
        src: url('/fonts/ubuntu-italic-webfont.eot?#iefix') format('embedded-opentype'),
            url('/fonts/ubuntu-italic-webfont.woff') format('woff'),
            url('/fonts/ubuntu-italic-webfont.ttf') format('truetype'),
            url('/fonts/ubuntu-italic-webfont.svg#ubuntuitalic') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
     
     
     
    @font-face {
        font-family: 'Ubuntulight';
        src: url('/fonts/ubuntu-light-webfont.eot');
        src: url('/fonts/ubuntu-light-webfont.eot?#iefix') format('embedded-opentype'),
            url('/fonts/ubuntu-light-webfont.woff') format('woff'),
            url('/fonts/ubuntu-light-webfont.ttf') format('truetype'),
            url('/fonts/ubuntu-light-webfont.svg#ubuntulight') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
     
     
     
    @font-face {
        font-family: 'Ubuntulight_italic';
        src: url('/fonts/ubuntu-lightitalic-webfont.eot');
        src: url('/fonts/ubuntu-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
            url('/fonts/ubuntu-lightitalic-webfont.woff') format('woff'),
            url('/fonts/ubuntu-lightitalic-webfont.ttf') format('truetype'),
            url('/fonts/ubuntu-lightitalic-webfont.svg#ubuntulight_italic') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
     
     
     
    @font-face {
        font-family: 'Ubuntumedium';
        src: url('/fonts/ubuntu-medium-webfont.eot');
        src: url('/fonts/ubuntu-medium-webfont.eot?#iefix') format('embedded-opentype'),
            url('/fonts/ubuntu-medium-webfont.woff') format('woff'),
            url('/fonts/ubuntu-medium-webfont.ttf') format('truetype'),
            url('/fonts/ubuntu-medium-webfont.svg#ubuntumedium') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
     
     
     
    @font-face {
        font-family: 'Ubuntumedium_italic';
        src: url('/fonts/ubuntu-mediumitalic-webfont.eot');
        src: url('/fonts/ubuntu-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
            url('/fonts/ubuntu-mediumitalic-webfont.woff') format('woff'),
            url('/fonts/ubuntu-mediumitalic-webfont.ttf') format('truetype'),
            url('/fonts/ubuntu-mediumitalic-webfont.svg#ubuntumedium_italic') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
     
     
     
    @font-face {
        font-family: 'Ubuntu';
        src: url('/fonts/ubuntu-regular-webfont.eot');
        src: url('/fonts/ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
            url('/fonts/ubuntu-regular-webfont.woff') format('woff'),
            url('/fonts/ubuntu-regular-webfont.ttf') format('truetype'),
            url('/fonts/ubuntu-regular-webfont.svg#ubunturegular') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
    Then just make a regular call of the font as Ubuntu, Ubuntumedium_italic, etc.
     
    speedway and MattW like this.
  8. Tracy Perry

    Tracy Perry Well-Known Member

    You like Ubuntu, you need to check out Monda.... I have gotten where I like it better than Ubuntu.
     
    speedway likes this.
  9. speedway

    speedway Well-Known Member

    Thanks TP, excellent write up. Once I sort out why my site waits between 2.5 and 3 seconds to load I will attack that :)
     
  10. MattW

    MattW Well-Known Member

    Fantastic!

    Just set this up now, and I've got the font served locally now (y)
     
    Tracy Perry likes this.
  11. Tracy Perry

    Tracy Perry Well-Known Member

    Guess I may make a "resource" write-up for it as most use the Google call for them.
     
    MattW and speedway like this.
  12. MattW

    MattW Well-Known Member

    It's certainly helped me out. The slowest part of my site now is the loading of the analytics call back (as just about everything can be served via cache)

    z22se.PNG
     
  13. speedway

    speedway Well-Known Member

    @Matt... Oooo, ga.js from CDN - must look up how to do that!
     
    MattW likes this.
  14. MattW

    MattW Well-Known Member

    Set up a bash script to get the file (and then call this via cron once per day)

    Code:
    #!/bin/sh
     
    # TMP DIRECTORY
    MYTMP=/tmp/
     
    # SAVE ga.js HERE
    INSTALL_IN=/home/mysite/public_html/js/ga/
     
    # RESOURCE URLS
    GOOGLE_GA_URL=http://www.google-analytics.com/ga.js
     
    # USER-AGENT
    UA="Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3"
     
    # CD TO TMP DIRECTORY
    cd $MYTMP
     
    # DOWNLOAD THE FILE
    curl --header "Pragma:" -f -s -A "${UA}" -m 1800 --retry 15 --retry-delay 15 --max-redirs 8 -O $GOOGLE_GA_URL
     
    # GIVE FILE CORRECT PERMISSIONS
    chmod 644 $MYTMP/ga.js
     
    # COPY FILE TO SITE DIRECTORY
    cp -r $MYTMP/ga.js $INSTALL_IN
     
    # RETURN TO OLDPWD
    cd $OLDPWD
     
    exit 0;
    I then changed where XF places the analytics code as it's currently in the header. I've moved it to the bottom just before the </body> tag. It's always bugged me as I can tell when analytics is loading, as the header on the XF site refreshes.

    With TMS, create a new modification:

    page_container_js_body

    search

    Code:
    </xen:hook>
     
    </script>
    replace
    Code:
    </xen:hook>
     
    </script>
     
    <script src="http://my.cdn.com/js/ga/ga.js" type="text/javascript"></script>
    <script type="text/javascript">
    var pageTracker = _gat._getTracker("TRACKINGCODE");
    pageTracker._initData();pageTracker._trackPageview();
    </script>
    Then remove the tracking code from the settings in the ACP
     
    p4guru and speedway like this.
  15. speedway

    speedway Well-Known Member

    You da man! Thanks for that, learning something new every day!!
     
    MattW likes this.
  16. p4guru

    p4guru Well-Known Member

  17. MattW

    MattW Well-Known Member

    Yeah, I saw that about not hosting it locally, but I'm updating it every 24 hours. I could just switch it off, as I don't really use it, but it's nice to have a look at every so often.
     

Share This Page