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
  • #47518


    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’




    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.


    This reply has been marked as private.


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



    opened a new ticket.

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

You must be logged in to reply to this topic.