Ubuntu fonts on Centos5 with nginx/php-fpm?

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
 
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.
 
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)
 
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.webp
 
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.
 
speedway said:
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.
Click to expand...
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 said:
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)
Click to expand...

You like Ubuntu, you need to check out Monda.... I have gotten where I like it better than Ubuntu.
 
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 :)
 
Tracy Perry said:
Guess I may make a "resource" write-up for it as most use the Google call for them.
Click to expand...
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.webp
 
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 said:
+1 for http://www.fontsquirrel.com/tools/webfont-generator been using them for ages!

sweet Matt about ga on cdn ! but google don't recommend it https://support.google.com/analytics/answer/1032389?hl=en

edit: oh you don't need to gzip eot (application/vnd.ms-fontobject) it's already a compressed font IIRC
Click to expand...
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.
 
You must log in or register to reply here.

Similar threads

Coop1979
PHP-FPM high CPU usage caused by something with database - Any help or ideas?
Replies
4
Views
2K
Coop1979
Coop1979
Nomy
  • Question Question
XF 1.2 Email in-use error? nginx + php-fpm
Replies
2
Views
2K
Nomy
Nomy
I
Xenforo Caching with Nginx on Ubuntu 14.04LTS
Replies
5
Views
1K
MattW
MattW
Marcus
php-fpm: Avoiding "Cannot allocate memory" Error with better configuration
Replies
1
Views
8K
Floren
Floren
R
VPS - Debian, EHCP, nginx, php fpm
Replies
9
Views
2K
Liam D.
Liam D.
Back
Top Bottom