@font help - Page 1 - Post ID 220382

Oct 18th, 2013 at 02:56 PM
User 2924428 Photo

bough
Registered User
1,718 posts

heya guys, i'm having a bit of a problem getting the browser to read my font.. I converted it from a ttf, into a .woff and have the code as follows..

@font-face
{
font-family: myFirstFont;
src: url(fareastern.woff);
}

firstfont
{
font-family:myFirstFont;
}
</style>


right after that I have this for my body structure..

<div id="firstfont">Testing new font</div>


I don't know why it isn't working.. I do have it uploaded to my server
Oct 18th, 2013 at 05:42 PM
User 122279 Photo

Inger
Senior Advisor
14,610 posts
Online Now

Do you remember this bit of code that I helped you with some 7-8 months ago? As you see, you need more font formats as just .woff.
@font-face {
font-family: 'damn_noisy_kidsregular';
src: url('webfontkit/dnk-webfont.eot');
src: url('webfontkit/dnk-webfont.eot?#iefix') format('embedded-opentype'),
url('webfontkit/dnk-webfont.woff') format('woff'),
url('webfontkit/dnk-webfont.ttf') format('truetype'),
url('webfontkit/dnk-webfont.svg#damn_noisy_kidsregular') format('svg');
font-weight: normal;
font-style: normal;
}

.customfont {
font-family: 'damn_noisy_kidsregular', sans-serif; /* no .ttf */
font-size: 40px;
color: white;
clear: left;
}
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Oct 18th, 2013 at 06:01 PM
User 2924428 Photo

bough
Registered User
1,718 posts

Yes Inger I remember , :) , thank you again for the help! I'm actually starting school on monday so i'm putting together a gaming website as fast as I can lol.
On the W3C school board it shows that all I needed was that piece of code that I listed.. guess that wasn't quite correct :(. I'll keep in mind our sessions and try my best to stay aware of the lessons.
Thanks again Inger!! :D
Oct 19th, 2013 at 05:38 AM
User 122279 Photo

Inger
Senior Advisor
14,610 posts
Online Now

If you want to use the webfontkit, remember also that there is a folder by the same name containing all the font formats, that has to be uploaded to the site.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Oct 19th, 2013 at 10:48 AM
User 2924428 Photo

bough
Registered User
1,718 posts

Hmm, can't find the web font kit on my purchases anymore :(. I altered all of the coding to fit my file names however it didn't work :(. All of the file types are named the same as the other files, fareastern.woff, fareastern.ttf, but it isn't working.
Oct 19th, 2013 at 04:14 PM
User 122279 Photo

Inger
Senior Advisor
14,610 posts
Online Now

The webfont kit is not a piece of CC software. Try this link:
http://www.fontsquirrel.com/tools/webfont-generator

And just altering the font names won't work. The font itself has to be generated in all the formats.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Oct 19th, 2013 at 04:39 PM
User 2924428 Photo

bough
Registered User
1,718 posts

Ok I uploaded everything and added the code to my sheet.. is there a html div tag I should be using?
Oct 19th, 2013 at 04:41 PM
User 2924428 Photo

bough
Registered User
1,718 posts

As far as folder placement, do these belong in the root file? Or a folder on top?
Oct 19th, 2013 at 05:23 PM
User 122279 Photo

Inger
Senior Advisor
14,610 posts
Online Now

In the code I quoted above the webfontkit folder is in the root. I guess as long as you set the path right, you can place it wherever you want.

As to the other question, about a possible div tag, I would have to examine the code. Bit too late for that now in this part of the world. If nobody has jumped in until tomorrow morning, I'll take a look.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Oct 19th, 2013 at 07:10 PM
User 2924428 Photo

bough
Registered User
1,718 posts

Alrighty then, thank you very much Inger :D

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.