Docs

[Friech]

Hi There,

You can use the brandon-light and baskerville-italic on your site now, see this draft page: http://www.fullframenw.com/?page_id=656

You can apply those font on your text element or custom headline element by adding:

font-family: 'brandon-light', sans-serif !important;

or

font-family: 'baskerville-italic', sans-serif !important;

on its STYLE field.

Let us know if you need to apply this font on a specific text/heading.

Hope it helps, Cheers!

[fullframenw]

Wonderful, thank yo it worked great. If I want to add other fonts in the future, could you tell me what step you took to make this work?

[fullframenw]

Also, what code could I use to use my new custom font for my site links? An example is my buttons still have the old font.

[Nico]

Hi There,

You can check the link below on how to add custom fonts.

https://community.theme.co/forums/topic/custom-font-2/#post-142444

Hope it helps.

Thanks.

[fullframenw]

How can I change the font of my site links?

[fullframenw]

I have already added the custom font and am using it for body and header text.

[Friech]

Hi There,

You wrote above:

If I want to add other fonts in the future, could you tell me what step you took to make this work?

Just declare it on your child theme’s style.css file, like how you declared the brandon-light and baskerville-italic. Just make sure you have the correct font files and path, and you can always refer back to the guide that I sent you from the previous page.

How can I change the font of my site links?

You can use this custom css, but keep in mind that this css code is generic it will affect all the links on your site. If you need to apply this to a specific link, please point that link to us.

body a {
	font-family: 'baskerville-italic', sans-serif !important;
}

And this css is for the button.

.x-btn, input[type="submit"] {
	font-family: 'baskerville-italic', sans-serif !important;
}

But first, please remove this font declaration on your custom css in customizer. Because you already declared this on the child theme’s style.css file. And actually one of the blocks on that css is causing an issue, that makes some of your custom css not to work.

@font-face {
	  font-family: 'baskerville-italic';
	  src: url('http://fullframenw.com/wp-content/themes/x-child/fonts/baskerville-italic.eot');
	  src: url('http://fullframenw.com/wp-content/themes/x-child/fonts/baskerville-italic.eot?#iefix') format('embedded-opentype'),
	       url('http://fullframenw.com/wp-content/themes/x-child/fonts/baskerville-italic.woff') format('woff'),
	       url('http://fullframenw.com/wp-content/themes/x-child/fonts/baskerville-italic.ttf')  format('truetype'),
	       url('http://fullframenw.com/wp-content/themes/x-child/fonts/baskerville-italic.svg#svgFontName') format('svg');
	}
	
	header .x-brand.text {
	    font-family: 'baskerville-italic', sans-serif !important;
	}
	@font-face {
	    font-family: 'brandon_light';
	    src:url('./fonts/brandon_light.woff') format('woff'),
	        url('./fonts/brandon_light.svg#font-name') format('svg'),
	        url('./fonts/brandon_light.eot'),
	        url('./fonts/brandon_light.ttf') format('truetype'),
	        url('./fonts/brandon_light.eot?#iefix') format('embedded-opentype');
	        
	}
	header .x-brand.text {
	    font-family: 'brandon_light', sans-serif !important;
	
	.myclass {
	    font-family: 'brandon_light', !important;
	}

Hope it helps, Cheers!

[fullframenw]

Thank you so much. Is there a custom code to make the font size larger? Brandon-light is the font I am using and it’s already somewhat small at a normal font size. I want to bring up the size so it’s a little more legible.

I also noticed my Contact Form 7 has text within the fill in box that is not the same font as brandon-light. How might I go about changing that?

[Friech]

Hi There,

You can add the font-size property to resize your font.

e.g.
font-family: 'brandon-light', sans-serif !important; font-size: 1.5em;

To change the contact form 7 fields font, you can add this under Custom > CSS in the Customizer.

.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="datetime"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="date"], .wpcf7 input[type="month"], .wpcf7 input[type="time"], .wpcf7 input[type="week"], .wpcf7 input[type="number"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="search"], .wpcf7 input[type="tel"], .wpcf7 input[type="color"] {
	font-family: 'brandon-light', sans-serif !important;
}

Hope it helps, Cheers!

[fullframenw]

Uh oh, it appears the link font size was changes on all links (even the subheader links) apologies for not being more specific. I am interested in changing the link font size to my buttons only. (Otherwise that code you gave worked wonderfully!)

[Friech]

Hi There,

The first line of css code provided above is inline-styling and the second block of css code is specific for contact form 7 fields only, so I’m not sure how that affect all the links. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do, please.

This is the css code to adjust the font-size of the button only.

input.wpcf7-form-control.wpcf7-submit {
	    font-size: 1.5em;
}

Thanks.

[Author]

Posts