Home Forums Fusion How to add custom fonts in typography customizer

This topic contains 4 replies, has 3 voices, and was last updated by  schneiders 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #47518

    emzeth
    Participant

    Hi, I see in the customizer there is option to add other custom fonts, you say it:

    “Custom Fonts
    Add your font name and font file links here. After saving they will appear in your typography options.”

    but how to add my font in that column? I try to add the name of the font and it’s not working.

    this is font that I want to use and it’s not available on your theme:

    <link href=’https://fonts.googleapis.com/css?family=Product+Sans’ rel=’stylesheet’ type=’text/css’>
    font-family: ‘Product Sans’

    thanks.

    #47519

    Joshua
    Keymaster

    Take a look at the documentation to better understand how fonts work and some working examples. There are generally 2 steps involved in adding a font:

    1. Adding the actual font. You’ll need to upload your fonts to WordPress and link to them. This can be done under the “Additional CSS” field in Customizer.

    @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
           url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
           url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

    In your case since you’re using a third-party service that does this for you (Google Fonts), you can add this line under Advanced->Custom Head Scripts.

    <link href=’https://fonts.googleapis.com/css?family=Product+Sans’ rel=’stylesheet’ type=’text/css’>

    2. The next step is actually applying these fonts to different elements, such as heading tags or body text.
    Under “Typography” you can add a new font under the “Custom Fonts” field. In the above example, the name you would add here would be “MyWebFont” but in your case you’d want to add “Product Sans” here.

    After saving and refreshing you’ll see your font listed in all the font fields for various elements. Select it from the dropdown where you’d like it to apply.

    #47537

    schneiders
    Participant
    This reply has been marked as private.
    #47540

    Joshua
    Keymaster

    The page you’ve linked to is giving a 404 error.

    #47544

    schneiders
    Participant

    opened a new ticket.

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

You must be logged in to reply to this topic.