If I have a page that I want to change the font for to say this: “franklin-gothic-ext-comp-urw” then do I need to install it to the site or anything or can I just include it in the css?
You need to have the font stored in your public directory on your site or reference it from a CDN.
what’s the difference then ( if any ) with this font face and what I have used? I’ve simply done this:
body
{
font-family: "franklin-gothic-ext-comp-urw,sans-serif";
font-size:18px;
}
In the code you have, anybody (like me) who doesn’t have franklin-gothic-ext-comp-urw installed on their machine will simply see the generic, fall-back sans-serif font.
The @font-face method makes the font available to all users (with browsers that support the method).
And easy alternative to loading the fonts on your site is to use one for the font services that load them for you. You can sign up to Typekit to get that exact font:
or you could use something similar for free via Google fonts. E.g.
In either case, you just post a link in the head of your site and everyone gets access to the font.
so do I need to be registered or subscribed with anything to display this font with an @font face?
franklin-gothic-ext-comp-urw
If not how and where do I link to it?
I went with a free subscription to link to this font on type kit but it says I should upgrade and so how do I know which level is needed?
I doubt you’d get far with a free subscription of Typekit. Basically, it’s a paid service. So you either pay the yearly fee or use a similar free font, like the Google font I linked to.
ok so I’m going with the @font-face option you have suggested. And I see I have to upload the font to my server and point to it. So I have downloaded the font through font squirrel and it was gibing me a few option of sownload that I wasn’t too sure about and I downloaded webfont. When I extracted it I saw some files with differents files inside so do I upload all the files and what file should I point to exactly?
I have .svg ttf woff eot woff2 specimin files and a style sheet?
You upload all the font files to somewhere on your server, such as within your /css/ folder. Then place the CSS FontSquirrel gives you in your CSS file. This is the @font-face code that points to the font files. Make sure to update the paths to the files to the location you’ve stored them.
Then, elsewhere in your CSS, you call the name of the font as it appears in the @font0face code.
[If that’s not clear, post the CSS code you were given by FontSquirrel.]
This syntax is wrong. The quotes are only required around fonts that have a space in their name, not the whole font string.
You would need something like:
body {
font-family: franklin-gothic-ext-comp-urw, sans-serif;
font-size:18px;
}
1 Like
ahh I see. Ok so I’ve uploaded the files to a new folder on my root called fonts.
the two files I have are:
franklin-gothic-extra-condensed-1361543753.ttf
franklin-gothic-extra-condensed-1361543753.ttf
and I have places this code in the css and html
css
body
{
font-family:franklin-gothic-ext-comp,sans-serif;
font-size:18px;
}
@font-face
{
font-family:franklin-gothic-ext-cond;
src: url("http://www.newummah.com/fonts/franklin-gothic-extra-1361543753.ttf");
}
@font-face
{
font-family: museo-sans;
src: url("http://www.newummah.com/fonts/MuseoSans_500-webfont.ttf");
}However I don’t think any of these are turning up right here apply.newummah.com?
OK, so here’s the thing: in your @font-face declarations, you have two families named:
font-family:franklin-gothic-ext-cond;
font-family: museo-sans;
Those are the names you’ve given those fonts, so if you want to call them into action, you need to use those names.
For example:
body {
font-family: franklin-gothic-ext-cond, sans-serif;
font-size:18px;
}
h1 {
font-family: museo-sans, sans-serif;
}
However, that said, you may not get good results with just one font format like that. Anyhow, see how you go.
You need to place the @font-face declaration at the start of your CSS, before you call it in your styles.
You also need to upload all the versions of the font which Font Squirrel provides. You should have .woff and .eot versions as well, because different browsers use diferent formats.
It works fine for me even when I place it at the end. Have you read this as a rule somewhere?
Sorry - no. The webfont I was using requires an @import declaration, which is what needed to be at the top of the stylesheet and I’d misremembered the instructions.
Ah yes, @import definitely needs to be at the top. I’ve never actually used it, though. Have never felt the need. 
I was using a font I could only get from MyFonts, and they use @import, so I didn’t have much option. (And no, there isn’t another font that looks remotely like it that I could find anywhere else. )
1 Like
Not true. The syntax is correct. Quotes are indeed required around fonts that have spaces in their name, but they are harmless if no spaces exist. In fact, it would be a good idea to always put quotes around font name strings to minimize the likelihood of overlooking them.
Although in this case, the quotes included the font name, comma and sans-serif bit, which is going a bit too far. 