[Karin PParticipant]

What I would like to do is add a font us use throughout my website. I have the .ttf file for it.
How can I add it to my child theme so that I can use this font on my header, body, footer, slider revolution, etc.?

[KoryKeymaster]

Hey Karin,

Thanks for writing in! This has been addressed a few times throughout the forum. here is a post I think you will find particularly useful for this situation.

Thanks!

[Karin PParticipant]

Support,
Where do I add the @font-face { and .x-brand { lines of code?
I tried putting them into the CSS field on the Customizer, but that did not seem to work.
Also, I have five fonts I would like to be able to use (futura_book, futura_book_oblique, futura_bold, futura_light, and futura_light_oblique). Do the .ttf, .woff, .svg, and .ttf files need to be in a folders labeled as each font, or should all the file types of the five fonts be floating in the fonts folder of theme x-integrity-light (I am using x-child-integrity-light)?

[Karin PParticipant]

Also, what is a stylesheet? Do I need to use it for this? Where can I find one/the one I need to edit?

[AmanMember]

This reply has been marked as private.

[Karin PParticipant]

This reply has been marked as private.

[Karin PParticipant]

Also, as I stated before, I would like to know how to use the different fonts I have in various places (using the bold font for the menu but the regular for titles, and light/light_oblique here and there. If there are code files to edit, I would just like to know where to look/work.

[RadModerator]

Hi Karin,

We could only guide you on X customization once you install your needed fonts. This should include all font family, sizes, and all forms of styling you expect to see at your site.

Then based on your installed font, we could give you proper css for specific area like menu, body, title, and etc.

Thank you.

[Karin PParticipant]

Support,

I believe I have installed all of the fonts I want to use in the fonts folder. If I have not done this correctly, please tell me how to do it correctly.
When you give me these directions, please also give me the proper css for all of the locations text appears so I can use this font everywhere on my site.

[AmanMember]

Hi Karin,

Looks like the fonts haven’t been uploaded actually. To test this, I tried to access this URL http://0396b98.netsolhost.com/wordpress1/wp-content/themes/x/fonts/futura_book.ttf
but it shows 404 not found error. Can you please check if the fonts are uploaded correctly?

Thanks!

[Karin PParticipant]

Support,
I believe I have installed all of the fonts I want to use in the proper fonts folder. If I have not done this correctly, please tell me how to do it correctly.
When you give me these directions, please also give me the proper css for all of the locations text appears so I can use this font everywhere on my site. I have trying the @font-face { and .x-brand { lines of code that you gave me earlier. My menu and body text still are not changing font. I will also be using this font in Visual Composer’s text blocks.

[RadModerator]

Hi Karin,

It is uploaded, but not installed at your theme.

Let’s do quick install, add this css at your child theme’s style.css

@font-face {
  font-family: 'futura_book';
  font-style: normal;
  font-weight: 300;
  src: local('Futura Book'), local('Futura-Book'), url(http://0396b98.netsolhost.com/wordpress1/wp-content/themes/x/fonts/futura_book.ttf) format('truetype');
}

This may not work on most browsers, because your font should be using woff format instead of ttf. You may need to convert it.

Then here are the css you can add at your child theme’s style.css to change its fonts.

/* all links */
a {
font-family : 'futura_book';
}

.x-topbar {
font-family : 'futura_book';
}

.x-logobar {
font-family : 'futura_book';
}

/* menu links */
.x-navbar ul li a{
font-family : 'futura_book';
}

/* logo */
.x-brand {
font-family : 'futura_book';
}

/* Main content */
.x-main {
font-family : 'futura_book';
}

/* Sidebar */
.x-sidebar {
font-family : 'futura_book';
}

/* Footer */
.x-colophon {
font-family : 'futura_book';
}

Hope this helps.

[Karin PParticipant]

Support,
Thank you very much! You say I should be using the .woff file and I have the futura_book.woff. How do I use this font file?

[RadModerator]

Hi Karin,

It should be like this :

@font-face {
  font-family: 'futura_book';
  font-style: normal;
  font-weight: 300;
  src: local('Futura Book'),
url(http://0396b98.netsolhost.com/wordpress1/wp-content/themes/x/fonts/futura_book.ttf) format('truetype'), 
url(http://0396b98.netsolhost.com/wordpress1/wp-content/themes/x/fonts/futura_book.woff) format('woff');
}

If you could use all possible format, then much better. Like this as template :

@font-face {
    font-family: 'web-font';
    src: url('web-font.eot?') format('eot'),
         url('web-font.woff') format('woff'),
         url('web-font.ttf') format('truetype'),
         url('web-font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Hope this helps.

[Karin PParticipant]

Support,
Thank you! This code has been working on my site until today, when I did a fresh install of theme ‘x’ and my child theme ‘x-child-integrity-light’. Now the following code does not work:

@font-face {
font-family: ‘futura_book’;
src: url(www/wordpress1/wp-content/themes/x/framework/fonts/futura_book/futura_book.eot) format(‘eot’),
url(www/wordpress1/wp-content/themes/x/framework/fonts/futura_book/futura_book.woff) format(‘woff’),
url(www/wordpress1/wp-content/themes/x/framework/fonts/futura_book/futura_book.ttf) format(‘truetype’),
url(www/wordpress1/wp-content/themes/x/framework/fonts/futura_book/futura_book.svg) format(‘svg’);
font-weight: normal;
font-style: normal;
}

/* all links */

a {
font-family : ‘futura_book’;
}

.x-topbar {
font-family : ‘futura_book’;
}

.x-logobar {
font-family : ‘futura_book’;
}

/* menu links */
.x-navbar ul li a{
font-family : ‘futura_book’;
}

/* logo */
.x-brand {
font-family : ‘futura_book’;
}

/* Main content */
.x-main {
font-family : ‘futura_book’;
}

/* Sidebar */
.x-sidebar {
font-family : ‘futura_book’;
}

/* Footer */
.x-colophon {
font-family : ‘futura_book’;
}

[Author]

Posts