Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1251858

    thatcreativeguy
    Participant

    Hello!
    Got a CSS question about fonts (I’m still learning CSS). How can I vary my font choices like the example here? – http://www.cheerscreative.com/our-services/

    Check out the “Welcome to Cheers” portion. See how they have different fonts to highlight certain text? How can I do that? I use fonts.com for most of my fonts and I do know Google has font kits, etc.

    If you look at this page on my dev site – http://tcg.that-creativeguy.com/the-work/test-item/ – I want to vary my fonts WITHIN the body content (paragraph). You can change size of the content font in the customizer, but it does it globally…And the header fonts are the same too…It resizes and caps (or not caps) globally…I’ve already designated certain fonts for the h1, h2, h3, h4, h5, h6 in the CSS code. However, I want to be able to vary my fonts within the content portion of my website, which is the “paragraph” font.

    I already have the fonts.com javascript implemented…Just need an example of how to vary my content fonts. Once the font is implemented into the code, then how do I go about choosing it in the Cornerstone Editor?

    I hope I’m making sense…

    I apologize for the long list of fonts, but wanted to show which ones I have installed, if you guys need to use one as an example:

    font-family:’HelveticaNeueW01-Thin’;
    font-family:’HelveticaNeueW01-45Ligh’;
    font-family:’HelveticaNeueW01-55Roma’;
    font-family:’Univers LT W01_45 Light1475944′;
    font-family:’Univers LT W01_45 Light1475950′;
    font-family:’Univers LT W01_55 Roman1475956′;
    font-family:’Univers LT W01_55 Obliq1475962′;
    font-family:’Univers LT W01_65 Bold1475968′;
    font-family:’Univers LT W01_65 Bold_1475974′;
    font-family:’Univers LT W01_75 Black1475980′;
    font-family:’Univers LT W01_75 Black1475986′;
    font-family:’Univers LT W01_85 Extra Black’;
    font-family:’Univers LT W01_85 X Black Obl’;
    font-family:’Univers LT W01_47 Light1475998′;
    font-family:’Univers LT W01_47 Light Cn Obl’;
    font-family:’Univers LT W01_57 Condensed’;
    font-family:’Univers LT W01_57 Conde1476010′;
    font-family:’Univers LT W01_67 Bold_1476016′;
    font-family:’Univers LT W01_67 Bold Cn Obl’;
    font-family:’Univers LT W01_39 Thin Ult Cn’;
    font-family:’Univers LT W01_49 Light Ult Cn’;
    font-family:’Univers LT W01_59 Ult Cond’;
    font-family:’Univers LT W01_53 Extended’;
    font-family:’Univers LT W01_53 Extended Obl’;
    font-family:’Univers LT W01_63 Bold_1476034′;
    font-family:’Univers LT W01_63 Bold Ext Obl’;
    font-family:’Univers LT W01_73 Black Ext’;
    font-family:’Univers LT W01_73 Black1476052′;
    font-family:’Univers LT W01_93 X Black Ext’;
    font-family:’Univers LT W01_93 X Blk Ex Obl’;

    #1251866

    thatcreativeguy
    Participant
    This reply has been marked as private.
    #1252126

    Nabeel A
    Moderator

    Hi there,

    Thanks for writing in! You can vary the font by giving the inline styling to the paragraphs and text. Let’s take a look at this example:

    We help <strong>industry/thought leaders, creative professionals, conferences & seminars, and arts/entertainment platforms</strong> get the respect they deserve (and the revenue boost is nice too) through stunning brand & website design.</p>
    <p style="text-align: left;font-family: baskerville-italic;font-size:20pt;">You already have a brand & we understand that.</p>
    <p style="text-align: left;"><strong>We don’t make you over. You’re already great. We reveal who you are, but with striking visuals and clarified messaging, because we’ve seen time and time again that the clearest brand wins.</strong></p>
    <p style="text-align: left;">We’re here to help you display your brand in a way that’s honest, transparent, visually striking and emotionally compelling.</p>

    They have varied the font by giving inline styling to each paragraph and within the paragraph. You can use the above example and change the font-family as per your need.

    Hope this helps!