[CarlHalesDaviesParticipant]

Hello, is it possible for me to add a new font style in please?

I would like to use this font:

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

For my logo.

Can I do that?

Thanks

[ChristopherModerator]

Hi there,

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.

[CarlHalesDaviesParticipant]

Thanks for that, I went to the page to convert.

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

[CarlHalesDaviesParticipant]

Have now sorted it I think 🙂

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/

[CarlHalesDaviesParticipant]

This reply has been marked as private.

[Kosher KMember]

Hi There,

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

[CarlHalesDaviesParticipant]

Thanks, that does not seem to have fixed the problem though 🙁

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?

[CarlHalesDaviesParticipant]

never mind, i have fixed that now 🙂

sorry to be a pain 🙂

[DarshanaModerator]

Glad you were able to figure it out 🙂

[BergeboyParticipant]

I am having trouble figuring it out :/ I was wondering if you would be able to look at my code and let me know if there is something that you see wrong?

@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!

[ChristopherModerator]

Hi there,

Please provide us with URL , FTP and login credential in private replay.
Please make sure you put the font formats in the same URL you defined in @fontface code :

@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;
}

If the path is correct try to change this code and use !important method:

body { font-family: 'Champagne and Limousines' !important; 
}

Thank you.

[BergeboyParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey there,

There are several problems.

1. Please update your site to the latest version of X and the plugins included first.
2. Your CSS single quotes are using pretty quotes (see http://prntscr.com/5o8pi0 and http://prntscr.com/5o8skb). I’ve corrected this one in Customizer’s CSS and one paragraph in your homepage.
3. The c in champ in your URL is lower case. I’ve changed it to uppercase (see http://prntscr.com/5o8t70).

Now you font works (see http://prntscr.com/5o8tli). Please update the rest.

Thanks.

[Author]

Posts