Font doesn't change

This topic contains 2 replies, has 2 voices, and was last updated by  Andrew Misplon 3 years ago.

Tagged: 

  • Author
    Posts
  • #1187

    Ulrich Heumann
    Participant

    Hi everyone. I’ve tried to change the font of the theme to Open Sans. I changed the _typography.scss in this:

    $font__site-title: 'Muli', sans-serif;
    $font__main: 'Open Sans', Arial, sans-serif;
    $font__icon: 'ultra-icons';
    $font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    $font__pre: "Courier 10 Pitch", Courier, monospace;

    but it doesn’t work.
    In header i see this:
    <link rel="stylesheet" id="siteorigin-google-web-fonts-css" href="//fonts.googleapis.com/css?family=Muli%3A300%7CLato%3A300%2C400%2C700&ver=4.1.1" type="text/css" media="all">
    (wrong font)

    Can anyone help me?

    #1189

    Ulrich Heumann
    Participant

    Solved:

    I’ve added this to my style.scss

    @import url(http://fonts.googleapis.com/css?family=Open+Sans);

    #1190

    Andrew Misplon
    Keymaster

    Hi Ulrich

    Thanks for giving Ultra a try.

    Glad to hear you’ve been making progress. A quick heads up on how WordPress themes update. Whenever any WordPress theme runs an update the entire theme folder is deleted, this unfortunately means that any changes you make directly to the theme files will be lost. The upgrade safe way to make this change would be to use a Custom CSS plugin, either Simple Custom CSS or Jetpack Custom CSS. I usually recommend Jetpack Custom CSS if you need other Jetpack modules, otherwise Simple Custom CSS is the way to go.

    Simple Custom CSS


    http://jetpack.me/support/custom-css/

    With a Custom CSS plugin activated you’re now ready to safely store your custom snippets, in this case you’d try:

    /* Set a custom font */
    
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
    
    body,
    button,
    input,
    select,
    textarea {
    	font-family: 'Open Sans', sans-serif;
    }
    
    .site-header .site-branding h1.site-title {
    	font-family: "Muli", sans-serif;
    	font-weight: 300;
    }

    I’ve included the site title font just in case you want to modify that. Above, it’s using the default values.

    I’ll have a premium version of Ultra out in the world ASAP. It’ll have a fully featured Customizer sections with controls for all the styling essentials. It’ll be available from $5 upwards, pay what you want pricing.

    (Ultra is built using the CSS pre-processing language Sass (http://sass-lang.com/). The Sass files for this theme are included for completeness. The variables you originally mentioned are part of the Sass partials that eventually make up the style.css file.)

    Please let me know if you have any questions. There is an update on the way soon with lots of little fixes and styling support for plugins like Jetpack and Contact Form 7.

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

You must be logged in to reply to this topic.

Scroll to top