- This topic has 2 replies, 2 voices, and was last updated 9 years, 8 months ago by Andrew Misplon.
Tagged: custom css font
- AuthorPosts
- April 15, 2015 at 9:36 am #1187
Ulrich HeumannParticipantHi 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?
April 15, 2015 at 9:57 am #1189
Ulrich HeumannParticipantSolved:
I’ve added this to my style.scss
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
April 15, 2015 at 11:28 am #1190
Andrew MisplonKeymasterHi 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.
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(https://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.
- AuthorPosts
You must be logged in to reply to this topic.