Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › CSS tutorial :: How to use fonts from the web.
New Posts  All Forums:Forum Nav:

CSS tutorial :: How to use fonts from the web.

post #1 of 6
Thread Starter 
CSS tutorial :: How to use fonts from the web.


Good day folks. While many of us here design sites using simple fonts, such as "arial", "times new roman" etc. there are some times when we need or want
a bit of a "snazzier" font to make a) The website stand out b) A particullar part of the website to stand out or c) To make it look less formal.

While many of us will go trawling through our fonts folder to find a candidate, there is a much much easier way. Google Web Fonts.

What is Google Web Fonts?


Basically it is a database that Google has built up through user inputted fonts. It is a repository of fonts that you can use on your website.

As you will see when you go onto Google Web fonts there are hundreds to choose from and all are FREE! That's right. They're all free.

Instructions

1. Open up Google Web Fonts by clicking the link.

2. Conduct a search or see a font you like. Click "add to collection":

3. Click "use":

4. Copy the CSS by scrolling down a little; e.g.
Code:
<link href='http://fonts.googleapis.com/css?family=Judson|Dynalight' rel='stylesheet' type='text/css'>

5. Place this in your webpage!

6. Activate font via css e.g.
Code:
<style type="text/css">
h1
{
font-family: 'Arapey';
}
</style>

Things to look out for:

Using these will slow the load of your webpage so use them wisely!
Don't use ridiculous fonts that people cannot read!
Take into mind people that may not be able to read so well (as in bad eyesight) and maybe provide an alternate text.


That's it for another web design "tip".

Josh
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #2 of 6

Another great tutorial :D

CHILZ - Lan Rig
(17 items)
 
CANARY - Main Rig
(16 items)
 
CADILLAC - HTPC
(14 items)
 
CPUMotherboardGraphicsRAM
Intel Xeon X3480 Asus Maximus III Gene AMD 7950 Mushkin Redline 2133 MHz CL9 
Hard DriveHard DriveHard DriveCooling
250 GB Samsung 840 120 GB OCZ Solid 3 60 GB OCZ Vertex 2 Custom Loop 
OSMonitorKeyboardPower
Windows 8 Pro BenQ GL2450 Filco MajesTouch2 Ninja PC P&C Silencer Mk III 600 W 
CaseMouseMouse PadAudio
Spotswood Small Tech Station Tt e-Sports Saphira Monoprice XXL Yamaha R-S300 + JVC Bookshelfs 
Other
Scythe Kama-Panel 3 
CPUMotherboardGraphicsRAM
FX-8150 @ 4.6 GHz Fatal1ty 990FX Pro 9800 GTX+ 512 MB G.Skill Ripjaws X 1866 CL9 
Hard DriveHard DriveCoolingOS
120 GB OCZ Vertex 3 1 TB WD Black 5x 120mm + MCP350 + EK Supreme HF + MicroRes Windows 8 Consumer Preview 
MonitorKeyboardPowerCase
2x Dell U2212HM Logitech G110 Cooler Master 850W Silent Pro Cooler Master 690 II Adv. 
MouseMouse PadAudio
Razer Death Adder 3.5G Staples Gel Cushion Asus Xonar DG + Senn. PC333D 
CPUMotherboardGraphicsRAM
Q6600 Acer X1800 ATI 5670 2 GB Kingston 
Hard DriveOptical DriveOSMonitor
2 TB WD Green Asus BD-R Windows 7 Home Premium Sony 50" LCD 
KeyboardPowerCaseMouse
Acer Media 220 W SFF Acer X1800 Acer Optical 
Mouse PadAudio
The TV cabinet Denon 2808 7.1 AVR + Dahlquist 350W 8" Sub + Kl... 
  hide details  
Reply
CHILZ - Lan Rig
(17 items)
 
CANARY - Main Rig
(16 items)
 
CADILLAC - HTPC
(14 items)
 
CPUMotherboardGraphicsRAM
Intel Xeon X3480 Asus Maximus III Gene AMD 7950 Mushkin Redline 2133 MHz CL9 
Hard DriveHard DriveHard DriveCooling
250 GB Samsung 840 120 GB OCZ Solid 3 60 GB OCZ Vertex 2 Custom Loop 
OSMonitorKeyboardPower
Windows 8 Pro BenQ GL2450 Filco MajesTouch2 Ninja PC P&C Silencer Mk III 600 W 
CaseMouseMouse PadAudio
Spotswood Small Tech Station Tt e-Sports Saphira Monoprice XXL Yamaha R-S300 + JVC Bookshelfs 
Other
Scythe Kama-Panel 3 
CPUMotherboardGraphicsRAM
FX-8150 @ 4.6 GHz Fatal1ty 990FX Pro 9800 GTX+ 512 MB G.Skill Ripjaws X 1866 CL9 
Hard DriveHard DriveCoolingOS
120 GB OCZ Vertex 3 1 TB WD Black 5x 120mm + MCP350 + EK Supreme HF + MicroRes Windows 8 Consumer Preview 
MonitorKeyboardPowerCase
2x Dell U2212HM Logitech G110 Cooler Master 850W Silent Pro Cooler Master 690 II Adv. 
MouseMouse PadAudio
Razer Death Adder 3.5G Staples Gel Cushion Asus Xonar DG + Senn. PC333D 
CPUMotherboardGraphicsRAM
Q6600 Acer X1800 ATI 5670 2 GB Kingston 
Hard DriveOptical DriveOSMonitor
2 TB WD Green Asus BD-R Windows 7 Home Premium Sony 50" LCD 
KeyboardPowerCaseMouse
Acer Media 220 W SFF Acer X1800 Acer Optical 
Mouse PadAudio
The TV cabinet Denon 2808 7.1 AVR + Dahlquist 350W 8" Sub + Kl... 
  hide details  
Reply
post #3 of 6
Thread Starter 
Quote:
Originally Posted by axipher View Post

Another great tutorial biggrin.gif

Thanks for the support!
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #4 of 6
Quote:
Originally Posted by joshd View Post

Quote:
Originally Posted by axipher View Post

Another great tutorial biggrin.gif

Thanks for the support!

 

No problem, I'm still learning myself and sometimes the tutorials I find over-complicate things.

 

Yours are much easier to follow.

CHILZ - Lan Rig
(17 items)
 
CANARY - Main Rig
(16 items)
 
CADILLAC - HTPC
(14 items)
 
CPUMotherboardGraphicsRAM
Intel Xeon X3480 Asus Maximus III Gene AMD 7950 Mushkin Redline 2133 MHz CL9 
Hard DriveHard DriveHard DriveCooling
250 GB Samsung 840 120 GB OCZ Solid 3 60 GB OCZ Vertex 2 Custom Loop 
OSMonitorKeyboardPower
Windows 8 Pro BenQ GL2450 Filco MajesTouch2 Ninja PC P&C Silencer Mk III 600 W 
CaseMouseMouse PadAudio
Spotswood Small Tech Station Tt e-Sports Saphira Monoprice XXL Yamaha R-S300 + JVC Bookshelfs 
Other
Scythe Kama-Panel 3 
CPUMotherboardGraphicsRAM
FX-8150 @ 4.6 GHz Fatal1ty 990FX Pro 9800 GTX+ 512 MB G.Skill Ripjaws X 1866 CL9 
Hard DriveHard DriveCoolingOS
120 GB OCZ Vertex 3 1 TB WD Black 5x 120mm + MCP350 + EK Supreme HF + MicroRes Windows 8 Consumer Preview 
MonitorKeyboardPowerCase
2x Dell U2212HM Logitech G110 Cooler Master 850W Silent Pro Cooler Master 690 II Adv. 
MouseMouse PadAudio
Razer Death Adder 3.5G Staples Gel Cushion Asus Xonar DG + Senn. PC333D 
CPUMotherboardGraphicsRAM
Q6600 Acer X1800 ATI 5670 2 GB Kingston 
Hard DriveOptical DriveOSMonitor
2 TB WD Green Asus BD-R Windows 7 Home Premium Sony 50" LCD 
KeyboardPowerCaseMouse
Acer Media 220 W SFF Acer X1800 Acer Optical 
Mouse PadAudio
The TV cabinet Denon 2808 7.1 AVR + Dahlquist 350W 8" Sub + Kl... 
  hide details  
Reply
CHILZ - Lan Rig
(17 items)
 
CANARY - Main Rig
(16 items)
 
CADILLAC - HTPC
(14 items)
 
CPUMotherboardGraphicsRAM
Intel Xeon X3480 Asus Maximus III Gene AMD 7950 Mushkin Redline 2133 MHz CL9 
Hard DriveHard DriveHard DriveCooling
250 GB Samsung 840 120 GB OCZ Solid 3 60 GB OCZ Vertex 2 Custom Loop 
OSMonitorKeyboardPower
Windows 8 Pro BenQ GL2450 Filco MajesTouch2 Ninja PC P&C Silencer Mk III 600 W 
CaseMouseMouse PadAudio
Spotswood Small Tech Station Tt e-Sports Saphira Monoprice XXL Yamaha R-S300 + JVC Bookshelfs 
Other
Scythe Kama-Panel 3 
CPUMotherboardGraphicsRAM
FX-8150 @ 4.6 GHz Fatal1ty 990FX Pro 9800 GTX+ 512 MB G.Skill Ripjaws X 1866 CL9 
Hard DriveHard DriveCoolingOS
120 GB OCZ Vertex 3 1 TB WD Black 5x 120mm + MCP350 + EK Supreme HF + MicroRes Windows 8 Consumer Preview 
MonitorKeyboardPowerCase
2x Dell U2212HM Logitech G110 Cooler Master 850W Silent Pro Cooler Master 690 II Adv. 
MouseMouse PadAudio
Razer Death Adder 3.5G Staples Gel Cushion Asus Xonar DG + Senn. PC333D 
CPUMotherboardGraphicsRAM
Q6600 Acer X1800 ATI 5670 2 GB Kingston 
Hard DriveOptical DriveOSMonitor
2 TB WD Green Asus BD-R Windows 7 Home Premium Sony 50" LCD 
KeyboardPowerCaseMouse
Acer Media 220 W SFF Acer X1800 Acer Optical 
Mouse PadAudio
The TV cabinet Denon 2808 7.1 AVR + Dahlquist 350W 8" Sub + Kl... 
  hide details  
Reply
post #5 of 6
Thread Starter 
Quote:
Originally Posted by axipher View Post

No problem, I'm still learning myself and sometimes the tutorials I find over-complicate things.

Yours are much easier to follow.

Thanks buddy, I'll make more soon!
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #6 of 6
Another source of fonts is http://www.fontsquirrel.com/fontface

Or you can use their web font generator tool, provided you have the .ttf or .otf files locally and the right to use the fonts:
http://www.fontsquirrel.com/fontface/generator

What you get is a zip of the various formats (to cover every browser's format support) and a block of CSS which handles the fallbacks. Google does this too and they just simplify the process.

Just another method of including non-web fonts if Google Web Fonts doesn't have the font you need.

Some professionally made, flexible fonts you can use freely: http://font.ubuntu.com/, http://latofonts.com/
Brave New Sauce
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel i7 920 D0 Asus P6T Deluxe V2 EVGA GTX 660 TI 6GB OCZ Platinum PC3-12800 CL 7 
Hard DriveOptical DriveCoolingOS
Corsair Force 3 120GB + 2x1TB + 320GB LG 22x Noctua U12P Windows 7 Ultimate 
MonitorKeyboardPowerCase
2x Dell 23UI11H(M) + LG 22" Filco Ninja Corsair AX650 CM Cosmos S 
MouseMouse PadAudio
Logitech G400 Ozone Ground Zero (desk mat) A ***load of gear. 
  hide details  
Reply
Brave New Sauce
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel i7 920 D0 Asus P6T Deluxe V2 EVGA GTX 660 TI 6GB OCZ Platinum PC3-12800 CL 7 
Hard DriveOptical DriveCoolingOS
Corsair Force 3 120GB + 2x1TB + 320GB LG 22x Noctua U12P Windows 7 Ultimate 
MonitorKeyboardPowerCase
2x Dell 23UI11H(M) + LG 22" Filco Ninja Corsair AX650 CM Cosmos S 
MouseMouse PadAudio
Logitech G400 Ozone Ground Zero (desk mat) A ***load of gear. 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › CSS tutorial :: How to use fonts from the web.