Home Forums Art WordPress Theme Different font wieghts in headings

This topic contains 14 replies, has 2 voices, and was last updated by  SeaTheme 1 year, 7 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #16246

    kevinludvigsen
    Participant
    Purchased

    Hello,

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

    #16261

    SeaTheme
    Keymaster
    Purchased

    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!

    #16267

    kevinludvigsen
    Participant
    Purchased

    Hello, i use Proxima Nova.

    #16271

    SeaTheme
    Keymaster
    Purchased

    Is Google or hosted font?

    #16273

    kevinludvigsen
    Participant
    Purchased

    I uploaded myself 🙂

    #16289

    SeaTheme
    Keymaster
    Purchased

    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

    • This reply was modified 1 year, 7 months ago by  SeaTheme.
    #16290

    kevinludvigsen
    Participant
    Purchased

    What is “font-face”.

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

    #16291

    SeaTheme
    Keymaster
    Purchased

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

    #16292

    kevinludvigsen
    Participant
    Purchased

    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?

    #16294

    SeaTheme
    Keymaster
    Purchased

    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' }
    • This reply was modified 1 year, 7 months ago by  SeaTheme.
    #16295

    kevinludvigsen
    Participant
    Purchased

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

    #16303

    kevinludvigsen
    Participant
    Purchased

    Is it just the same method then?

    #16314

    SeaTheme
    Keymaster
    Purchased

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

    #16322

    kevinludvigsen
    Participant
    Purchased

    My font is not uploaded – Its synchronized from Typekit.

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

    #16324

    SeaTheme
    Keymaster
    Purchased

    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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!