I would like to use this font:

http://www.dafont.com/velocity.font

For my logo.

Can I do that?

Thanks

Please download font file,extract zip file,it gives a font with .ttf format,go to http://everythingfonts.com/ and convert .eot and .woff formats ,now put these three formats inside a folder in your theme or child theme .
Then add this code in Customize -> Custom -> CSS:

 @font-face {
    font-family: 'velocity-font';
    src: url('exact url to fonts folder/velocity-font.eot');
    src: url('exact url to fonts folder/velocity-font.eot?#iefix') format('embedded-opentype'),
         url('exact url to fonts folder/velocity-font.woff') format('woff'),
         url('exact url to fonts folder/velocity-font.ttf') format('truetype'),
         url('exact url to fonts folder/velocity-font.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
   }
.x-brand.text{
font-family: 'velocity-font';
}

Hope it helps.

and has these 3 links:

otf2ttf otf2woff ttf2apk

I only have a ttf font file.

So cant convert my .ttf to .woff as i need it in .otf first or something. also cant find anything to convert it to .eot

Please help

I have added this in to the custom css:
@font-face {
font-family: ‘velocity-font’;
src: url(‘http://www.carlhalesdavies.com/velocity-font.eot’);
src: url(‘http://www.carlhalesdavies.com/velocity-font.eot?#iefix’) format(’embedded-opentype’),
url(‘http://www.carlhalesdavies.com/velocity-font.woff’) format(‘woff’),
url(‘http://www.carlhalesdavies.com/velocity-font.ttf’) format(‘truetype’),
url(‘http://www.carlhalesdavies.com/velocity-font.svg#Sri-TSCRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
.x-brand.text{
font-family: ‘velocity-font’;
}

I have added 4 file formats for the font:
ttf, eot, woff, svg

Looks like it has worked, although the text doesnt look that smooth, looks it little distorted. please have a look here:

http://www.carlhalesdavies.com/

It is simply because your text and button won’t fit inline horizontally,

You can try adding this code below in CUstomizer > Custom > CSS

@media (max-width: 450px) {	
 	.x-brand.text {
  		font-size: 35px;
  		margin-top: 30px;
	 }
}

Hope that helps,

Have a great day

I have now putting in image for my logo. which has made it look better.

But now on the mobile side of it, there is a white line underneath the orange background of the header/logo area. and part of my logo goes on to that.

How can I make it so, that orange background, goes flush to the image I have underneath it please?

sorry to be a pain 🙂

@font-face {
font-family: ‘Champagne and Limousines’;
src: url(‘http://www.cimarronart.com/champ.eot’);
src: url(‘http://www.cimarronart.com/champ.eot?#iefix’) format(‘embedded-opentype’),
url(‘http://www.cimarronart.com/champ.woff’) format(‘woff’),
url(‘http://www.cimarronart.com/champ.ttf’) format(‘truetype’),
url(‘http://www.cimarronart.com/champ.svg#Sri-TSCRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

.x-brand.text { font-family: ‘Champagne and Limousines’; }
body { font-family: ‘Champagne and Limousines’; }
p { font-family: ‘Champagne and Limousines’; }

I am trying to make it so that all the body text is Champagne and Limousines. However it for some reason it is not picking up the font…

Am I doing something wrong with the code? I downloaded the ttf file and converted to eot, woff, and svg. Then I uploaded it to the main directory.

Thanks a million!