Streaming live at 10am (PST)

Adding non-listed Font


#1

My logo font is 'Judith', is it possible to add this font?
http://ttfonts.net/font/22209_Judith.htm


#2

Hi, yes it is possible. Basically first you need to have the .ttf file for the font. Then, you visit:

http://www.fontsquirrel.com

And you then convert the font to a webfont using the free webfont generator. This will download a webfont kit that you can use in your webpages. The webfont kit zip file, will contain several files for the font, with different font extensions. You just keep these font files all together in a folder and upload to some server on the net, either your own, or a CDN (you can create a free 5gb file storage on amazon S3, or a very cheap (next to free) service on another cdn such as rackspace.com).

After you have uploaded your font folder to the server, you can include these fonts in a stylesheet by using the @font-face command in CSS. Just create a css file and store that on your file storage, or you can just paste the css style in the head section of the custom code panel in site settings:

@font-face {
font-family: "Your typeface";
src: url("filename.eot");
url("filename.woff") format("woff"),
url("filename.otf") format("opentype"),
url("filename.svg#filename") format("svg");
}

Change the font file names and urls above to point to the files you created in your webfont kit.

Now you have the font loaded so that your html can use the font. You may need to specify also in your custom css you add to page, or load from url, what font should be used for what elements, such as this example for H1 font declaration, you would add this to your CSS:

h1 {font-family:"Judith"!important;}

In the example above, if this line is added to your styles embedded inline in the page, or added to some external css file that you link to in your page, it will enable the Judith font for your webpage. The "!important" setting, tells the page that this css setting should override any other setting that may exist for H1 (such as the default Arial font).

It might take a little fiddling your first time, but it is pretty easy to change fonts using this method to whatever font you want. Also, when generating fonts on fontsquirrel, they will ask you to confirm that you have the rights to use the font (you own the font for use on web), but this is just a good faith confirmation that you own the font, there is nothing to prevent you from converting any font on fontsquirrel and the service is free.

Hope this helps ! Cheerios


#3

Cheers Dave.

So I've downloaded webfontkit. I have some normal web hosting space for a website, can I use this?- anyway I went ahead with S3 and uploaded files.

After you have uploaded your font folder to the server, you can include these fonts in a stylesheet by using the @font-face command in CSS. Just create a css file and store that on your file storage, or you can just paste the css style in the head section of the custom code panel in site settings:

There is already stylesheet.css in S3 font folder, should I just change insert url's into this?

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 24, 2014 */



@font-face {
    font-family: 'judithregular';
    src: url('judith-webfont.eot');
    src: url('judith-webfont.eot?#iefix') format('embedded-opentype'),
         url('judith-webfont.woff') format('woff'),
         url('judith-webfont.ttf') format('truetype'),
         url('judith-webfont.svg#judithregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'dejavu_sansbook';
    src: url('dejavusans-webfont.eot');
    src: url('dejavusans-webfont.eot?#iefix') format('embedded-opentype'),
         url('dejavusans-webfont.woff') format('woff'),
         url('dejavusans-webfont.ttf') format('truetype'),
         url('dejavusans-webfont.svg#dejavu_sansbook') format('svg');
    font-weight: normal;
    font-style: normal;

}

#4

Hi you can leave the urls the way you have them, if the path to your css file is relative to your webpage... or if the fonts don't work after updating, then paste in the full url to those fonts in css.

You can use the stylesheet that is in S3, but you still have to link that stylesheet to your webflow website, by pasting the css link reference in the Head section of the Custom Code tab of site settings page.

like:

<link href="link_to_stylesheet_on_S3.css" media="screen" rel="stylesheet" />

You can use S3 or any other site that gives public url access to those fonts/files.

Cheers


#5

OK, didn't work. Little confused. So here's what I got.

Uploaded Webfontkit to Amazon S3:

As I said earlier, that stylesheet.css was already there, so I haven't created or changed it.

you can leave the urls the way you have them, if the path to your css file is relative to your webpage

I made all file on S3, .css and font files, "Public".

I added this to head in custom code in Webflow:

<link href="https://s3-ap-southeast-2.amazonaws.com/swapsea-font/webfontkit-20140324-032946/stylesheet.css" media="screen" rel="stylesheet" />

Added in custom code head tag:

h1 {font-family:"Judith"!important;}

Not sure how to do the following, if I need to?:

if this line is added to your styles embedded inline in the page, or added to some external css file that you link to in your page, it will enable the Judith font for your webpage

Thanks for your patience.


#6

hi, in the head section where you put the css, you also need to surround the h1 line that you have shown so that it is like:

<style>h1 {font-family:"Judith"!important;}</style>

Try that and see if then it works for you.

Cheers


#7

Thanks, but still not.

https://webflow.com/design/swapsea-shoes?preview=1d90b0781d7dfaa0adf081e673d73716


#8

Hi, can you publish the site, and share that link? I need to look at the html from the published site... Thanks, sorry I should have been more clear on that..


#9

http://swapsea-shoes.webflow.com/


#10

Change the font name from "Judith" to "judithregular"

Save

Try again.

Cheers smile


#11

So

<style>h1 {font-family:"judithregular"!important;}</style>

Try that


#12

Thanks Dave, but still the same.


#13