Forum Replies Created
-
AuthorPosts
-
March 4, 2017 at 2:12 pm in reply to: Shamelessly Copying Apple's Typography Into No Sidebar #202466
jjbwp
ParticipantAny of the weights you use -- whether regular or light, etc. -- is applied to text using CSS.
Therefore, for example, let's say you wanted to render your H3 headings using Source Sans Pro Light. Your CSS might then be something like this:
h3 { font-family: 'Source Sans Pro', sans-serif; font-size: 36px; font-size: 3.6rem; font-weight: 300; line-height: 1.6; }
I'm not sure, however, what happens if you're talking about using the "bold" button in the visual editor when composing a post, but instead of bold you want the text to be semi-bold. I think that, if you haven't called up the bold font in your functions.php, the browser simply does its own job of rendering the text as bold (just like it does to italicize text when there are no italics fonts), but this of course doesn't look very good (and would be far from the semi-bold you wanted).
The way around that would be to type up your posts in the textual (non-visual) editor when composing a post. You would then have to type in the class tags for any text that needed to display as semi-bold. That would, of course, be a pain, but I cannot think of an alternative (beyond doing what many people, including myself, do, and simply not using bold within the body copy).
March 4, 2017 at 1:35 pm in reply to: Shamelessly Copying Apple's Typography Into No Sidebar #202463jjbwp
ParticipantYes, you need to include the weight in the code - you call up individual font files for use, rather than the entire type family.
March 4, 2017 at 11:41 am in reply to: Shamelessly Copying Apple's Typography Into No Sidebar #202459jjbwp
ParticipantIf you're simply substituting Source Sans Pro for Playfair Display and Lato, you can find instructions for working with Google Fonts at https://basicwp.com/add-google-fonts-genesis-theme/ (or you could go with the instructions at https://restored316designs.com/blog/2016/08/22/how-to-change-your-fonts-using-google-fonts/).
If you're replacing Google Fonts with Typekit, you'll remove the wp_enqueue_style with the Google Fonts from your function.php, follow the instructions at https://helpx.adobe.com/typekit/using/add-fonts-website.html, and then add the Embed Code to your header in WordPress using Genesis > Theme Settings > Header Scripts.
In either case, whether using Google Fonts or Typekit, you'll then need to go through the CSS and replace Playfair Display and Lato (as well as make whatever changes you find necessary to the size, weight and line height).
PT Sans is another possibility for replacing Myriad -- some of its letters are closer to Myriad than those of Source Sans Pro, while some of Source Sans' are closer than those of PT Sans. It is notable that Robert Slimbach, one of the co-designers of Myriad, oversaw the Source Sans Pro project.
March 2, 2017 at 5:53 pm in reply to: Shamelessly Copying Apple's Typography Into No Sidebar #202377jjbwp
ParticipantI was actually curious about whether any of the weights of Myriad Pro were available as part of the free Typekit plan, and it turns out that a few of them are.
It looks like the upright and italics are available for bold and bold condensed weights.
You can learn more at https://typekit.com/fonts/myriad/availability.
All the weights of Source Sans Pro are also available in the free Typekit plan as well, of course.
March 2, 2017 at 4:01 pm in reply to: Shamelessly Copying Apple's Typography Into No Sidebar #202373jjbwp
Participant1. Yes, most of the typefaces available from Typekit are premium quality (Typekit also includes a few Google fonts, but generally only the best of them). Since Myriad, the typeface used by Apple, is a premium font by Adobe, you'll need to pay to get it.
The closest free alternative to Myriad is CartoGothic Std, but the free version is hard to find these days; probably one of the closer widely available open source fonts is Adobe Source Sans Pro (since Source Sans Pro is available through Google Fonts, you'd only need to change the font names in your CSS and functions.php files to use it in No Sidebar). You can see Source Sans Pro and Myriad side-by-side at http://www.identifont.com/differences?first=source+sans&second=Myriad&q=Go.
Microsoft's system font, Segoe, has been compared to Myriad, so you could include it in your font stack.
2. I recommend using a browser plugin to see the weights, sizes and line spacing used by a website (such as Apple's) -- I use Fontface Ninja (https://fontface.ninja). As far as changing these in your CSS, there's no other option than to manually go through and make the changes.
3. I don't know enough to give you good advice about changing the width of a content area, but there's a video of someone doing it with the Altitude Pro theme (albeit reducing rather than expanding the width) at https://genesisclubbers.com/9101/how-to-change-width-of-altitude-pro-home-page/.
March 2, 2017 at 2:31 pm in reply to: Shamelessly Copying Apple's Typography Into No Sidebar #202370jjbwp
ParticipantRegarding the typefaces, Apple uses Myriad (from Adobe) on its site (as well as in other media). You would need to either subscribe to the Adobe Typekit service to use Myriad on your site, or purchase the web fonts from either Adobe's Typekit Marketplace or another service like Fonts.com.
You would then simply replace Playfair Display and Lato (the Google fonts used by No Sidebar) in your CSS. That could be done easily enough through a simple search-and-replace, but you'd need to make changes to the sizes, weights and line spacing to make the text appear exactly like it does on Apple's site.
jjbwp
ParticipantThe site on which I'm working is on a local machine (in MAMP), but the CSS and functions.php I'm using are untouched from the stock theme, which is demoed at http://demo.leanthemes.co/kickstart/.
February 26, 2017 at 3:03 pm in reply to: Genesis Responsive Slider in Kickstart Pro Crops Images #202029jjbwp
ParticipantI wonder if the problem is related somehow to the backstretch script that i think Kickstart Pro uses with the Genesis Responsive Slider, but which is not used with Soliloquy.
If so, that's beyond me...I can do a little with CSS, but know almost nothing about javascript.
February 26, 2017 at 2:59 pm in reply to: Genesis Responsive Slider in Kickstart Pro Crops Images #202028jjbwp
ParticipantThanks, Victor.
I assumed it was a CSS issue, but I've been unable to find exactly what is causing the problem.
Out of curiosity, I traded out the Genesis Responsive Slider with the Soliloquy Lite slider, and I'm not having the problem with Soliloquy. This solves my immediate problem, I suppose, but still leaves the original issue unresolved. Oh well.
jjbwp
ParticipantThanks, Victor. That's exactly what I needed to know.
-
AuthorPosts