Okay
  Public Ticket #2228253
Fonts LOCAL
Closed

Comments

  • Basti_DLK_23 started the conversation

    Hello, i would like to use the fonts not from Google.

    How can i use the fonts local? Can you implementade a plugin or a code in the theme options?

    Many thanks

  •  724
    Barry replied

    Hi there,

    Unfortunately there are no free plugins available to upload and apply custom fonts to your website. To change the typography to a custom font you need to include the custom font file somewhere on your server, import this file through CSS and then change the typography also with CSS.

    Please follow these steps:

    1. Upload the font file(s) on your server (recommended to place it outside the WordPress folder)

    2. Import the font file(s) by adding the following CSS code to Appearance -> Customize -> Additional CSS:

    @font-face {
      font-family: "Open Sans";
      src: url("http://yourdomain.com/opensans-regular.woff2") format("woff2"),
           url("http://yourdomain.com/opensans-regular.woff") format("woff"),
           url("http://yourdomain.com/opensans-regular.ttf") format('truetype');
    }

    Please change the "Open Sans" name to the custom font name and replace both links to the font files.

    3. Then add the following CSS to actually change to the custom font. There are 2 snippets, one that use the "Nunito" font in the theme and the other snippet for "Open Sans". 

    Change these names to the custom font name you're using

    Heading font:

    h1,h2, h3, h4, h5, h6, .main-navigation > li > a, .brochure, .testimonials .testimonial--author, .call-to-action .call-to-action--content .call-to-action--title, .counter .counter--text .counter--number {
        font-family: "Nunito";
    }
    

    Content font:

    body, button, input, select, textarea, .btn, .main-navigation .sub-menu li a, .jumbotron .jumbotron-caption .caption-small-heading, .page-header--subtitle, .featured-page .featured-page--image .featured-page--overlay .overlay--center span, .brochure span, .news-posts-block .widget-title a, .panel-group .panel .panel-heading .panel-title a {
        font-family: "Open Sans";
    }
    

    Now the custom font should be working.

    Best regards,
    Barry