Futura bold/medium font for headers, main text, menu and sub-menu items

Hi X theme support,

I want to have the Futura font (bold and medium) on my website and tried different things mentioned in this forum but haven’t succeeded.
Could you please help me out and take a look? Because I don’t know what to do anymore :slight_smile:

Hi @FerryTimmer

I’ve searched for this font and it appears to be a premium font, did you purchase this font from somewhere?

https://www.fonts.com/font/linotype/futura

Depending on the platform you purchased this font from, we can help you implementing this font on your website. If you have this font hosted on your server, then this thread would be helpful:

Thanks.

Hi Alaa,

I bought the license from the website you mentioned. Fonts.com and downloaded them to my pc.
I’m not sure how the thread you posted would help me since that is a google webfont page and the Futura font isn’t a Google font right? :slight_smile:

Hi There,

You can add Custom Fonts in WordPress Using CSS3 @font-face. The most direct way of adding custom fonts in WordPress is by adding the fonts using CSS3 @font-face method. This method allows you to use any font that you like on your website.

First thing you need to do is download the font that you like in a web format. Once you have the webfont files, you would need to upload it on your web hosting server. The best place to upload the fonts is inside a new “fonts” folder in your child theme‘s directory. You can use FTP or File Manager of your cPanel to upload the font.

Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule like this:

@font-face {
    font-family: Futura;  
    src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Futura-Regular.ttf);  
    font-weight: normal;  
}
@font-face {
    font-family: FuturaBold;  
    src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Futura-Bold.ttf);  
    font-weight: bold;  
}

Don’t forget to replace the font-family and URL with your own.

After that you can use that font anywhere in your theme’s stylesheet like this:

.h1 site-title { 
font-family: "Futura", Arial, sans-serif; 
}

You should aslo take a look at this article: https://css-tricks.com/snippets/css/using-font-face/.

Hope it helps :slight_smile:

I followed the steps you mentioned but haven’t got it working yet…

My style.css of my x-child theme is now the following:

And i tried this code in my global css:
body {
font-family: “FuturaBT Book”, Arial, sans-serif;
}

I obviously missed a step (or two) but don’t know where… Could you help me out a little further? :slight_smile:

Hi,

The filename should be the same as the physical file that you uploaded.

Please change your code to this


@font-face {
    font-family: 'FuturaBT Book';
    src: url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/FuturaBT-Bold.woff2') format('woff2'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/FuturaBT-Bold.woff') format('woff'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/FuturaBT-Bold.ttf') format('truetype'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/FuturaBT-Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaBT';
    src: url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/FuturaBT-Medium.woff2') format('woff2'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/FuturaBT-Medium.woff') format('woff'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/FuturaBT-Medium.ttf') format('truetype'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/FuturaBT-Medium.svg') format('svg');
    font-weight: 500;
    font-style: normal;
}

Thanks

Ok so I changed the code to the correct filename, now when I use :

body {
font-family: “FuturaBT Book”, Arial, sans-serif;
}

In my global CSS on the website customizer it doesn’t show up… ?

Hi,

I can see your fonts are inside futura folder. Please change code to this.

@font-face {
    font-family: 'FuturaBT Book';
    src: url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/futura/FuturaBT-Bold.woff2') format('woff2'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/futura/FuturaBT-Bold.woff') format('woff'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/futura/FuturaBT-Bold.ttf') format('truetype'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/futura/FuturaBT-Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaBT';
    src: url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/futura/FuturaBT-Medium.woff2') format('woff2'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/futura/FuturaBT-Medium.woff') format('woff'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/futura/FuturaBT-Medium.ttf') format('truetype'),
        url('http://www.studio544-1.nl/wp-content/themes/x-child/framework/fonts/futura/FuturaBT-Medium.svg') format('svg');
    font-weight: 500;
    font-style: normal;
}

Thanks

Getting closer there :slight_smile:
But still nothing when putting

body {
font-family: “FuturaBT Book”, Arial, sans-serif;
}

in global css.
I really appreciate your help. :slight_smile:

Hey @FerryTimmer,

The CSS did not work because you have a syntax error in your CSS before that. See https://youtu.be/zPb8011vRwM

Hope that helps.

O man I feel so stupid! :smile:
The only thing I also want to achieve is the menu items in the font: FuturaBT Book and the sub-menu items in the same size and font.
Also, how do I vertically align the menu in the white part of the website?

Hi There,

To change the font of the menu items, please also add this custom CSS:

.x-navbar .x-nav-wrap .x-nav > li > a,
.x-navbar .x-nav a {
    font-family: "FuturaBT Book", Arial, sans-serif; 
}

The whitespace the your menu items is the logo? Would you like to hide this as well?

Regards!

You’re the best! :smile:
Yeah I want the menu items te be vertically aligned (so slightly higher)

Hi There,

To hide the logo, pleaase add this custom CSS:

.x-logobar {
    display: none;
}

To make the mene vertical center, please navigate to Theme Options > Header > LINKS – ALIGNMENT > NAVBAR TOP LINK ALIGNMENT (PX) > change to 8px:


Hope it helps :slight_smile:

You’re the best! That’s all. :slight_smile: for now… :wink: