CODEWITHSUNDEEP
csswebfonts
LukeScotney93
LukeScotney93

Reputation: 95

How to correctly use webfonts?

I'm trying to configure web fonts to be used from my website.

It works on my computer but that's because I have the font. I uploaded it to one of the free conversions websites which made them a .SVG and .OET etc. for me but it still doesn't seem to be rendering correctly when I view it from chrome on my nexus or chrome from my iphone.

Is it the devices that don't allow webfonts or is it something my end?

Here is the CSS code

.navig {
font-family: 'TrajanPro-Bold';
src: url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.eot');
src: local('TrajanPro-Bold'), url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.woff') format('woff'), url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.ttf') format('truetype'), url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.svg') format('svg');
text-align:center;
font-size:14px;
color:#333333;
font-weight:bold;

The webpage I'm trying to put it on is here http://www.theroyaloaknonington.co.uk/beta/ to be used in the navigation up top.

Upvotes: 1

Views: 267

Answers (1)

CaribouCode
CaribouCode

Reputation: 14398

First you need to declare the @font-face:

@font-face {
  font-family: 'TrajanPro-Bold';
  src: url('fonts/TrajanPro-Bold.eot');
  src: url('fonts/TrajanPro-Bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/TrajanPro-Bold.woff') format('woff'),
       url('fonts/TrajanPro-Bold.ttf') format('truetype'),
       url('fonts/TrajanPro-Bold.svg#TrajanProBold') format('svg');
  font-weight: normal;
  font-style: normal; }

Then you can use that font anywhere in your CSS like so:

.navig { font-family: 'TrajanPro-Bold'; }

Obviously in the font-face bit of the CSS, you need all those formats and you need to change the src paths to where your fonts are.

If you use the font generator on Font Squirrel, if generates the CSS for you as well as the correct files types: http://www.fontsquirrel.com/tools/webfont-generator

Upvotes: 1

Related Questions