Different font wieghts in headings

[kevinludvigsen]

Hello,

is it possible to use different font weights one the headings or can i only use one weight for alle the headings?

[SeaTheme]

Hi,

It is not possible to set different font weights for headding1- 6 by default option. You need to add some custom css, what’s font sourse(Google, or hosted font) you want to use?

Regards!

[kevinludvigsen]

Hello, i use Proxima Nova.

[SeaTheme]

Is Google or hosted font?

[kevinludvigsen]

I uploaded myself 🙂

[SeaTheme]

Please use the font-face to define the font. Set the font to headding(like headding 3)

/*define the font*/
@font-face {
  font-family: 'MyWebFont'; 
  src:  url('your-font-file-url.woff2') format('woff2'), 
       url('your-font-file-url.woff') format('woff')
}

/*apply font to headding*/
.entry h3, h3 { font-family: 'MyWebFont' }

You need put the CSS to Appearance > Customize : Additional CSS

[kevinludvigsen]

What is “font-face”.

What else does i need to do, besides putting the code in the Additional CSS?

[SeaTheme]

Please read the font-face article: https://css-tricks.com/snippets/css/using-font-face/

[kevinludvigsen]

Im not really into allt this coding 🙂

When the font is applied to the heading, can i then till change the size in the BM font management or?

[SeaTheme]

What’s formats of your font file? Strongly suggest you use the 2 formats.

Put the CSS to Appearance > Customize : Additional CSS
Replace the your-font-file-url.woff2 and your-font-file-url.woff as your own font files URL. It will work for headding 3

/*define the font*/
@font-face {
  font-family: 'MyWebFont'; 
  src:  url('your-font-file-url.woff2') format('woff2'), 
       url('your-font-file-url.woff') format('woff')
}

/*apply font to headding*/
.entry h3, h3 { font-family: 'MyWebFont' }

[kevinludvigsen]

Im sorry!
I just found out, the font is syncronized with Typekit!

[kevinludvigsen]

Is it just the same method then?

[SeaTheme]

I don’t understand your question, please give more tips, thanks!

[kevinludvigsen]

My font is not uploaded – Its synchronized from Typekit.

How do i then, apply different fonts in my headings?

[SeaTheme]

You don’t upload font files, use another css to do.

Put the CSS to Appearance > Customize : Additional CSS:

@import url("https://use.typekit.net/typekit-ID.css");
/*apply font to headding*/
.entry h3, h3 { font-family: 'TheFontName'!important;}

You need login your Typekit account to look for the typekit-ID and TheFontName

[Author]

Posts