Help with css and Google Fonts

naomimayanaomimaya Registered Users Posts: 32 Big grins

Hi there,

I'm not that good at doing the CSS stuff... can anyone help me:

  • add a Google font (Rochester) for my headings (*not every single H1, just specific ones)
  • format a background image to my div tag? I want to make the second to last box look like the last box *which I made as a graphic for comparison, but it's got too much space around the image and not enough around the text.

This page: https://www.naomimaya.com/Español

Thanks!

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited February 1, 2019

    First, you need to add this to your theme's custom CSS section. If you put it any other place, it won't work.

    @font-face {
      font-family: 'Rochester';
      font-style: normal;
      font-weight: 400;
      src: local('Rochester Regular'), 
           local('Rochester-Regular'), 
           url(https://fonts.gstatic.com/s/rochester/v9/6ae-4KCqVa4Zy6Fif-UC2FHR.woff) format('woff'),
           url(https://fonts.gstatic.com/s/rochester/v9/6ae-4KCqVa4Zy6Fif-UC2FHX.woff2) format('woff2'),       
           url(https://fonts.gstatic.com/s/rochester/v9/6ae-4KCqVa4Zy6Fif-UC2FHS.ttf) format('truetype');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    
    .rochester {font-family: 'Rochester';}
    .sm-user-ui em {font-style: italic;}
    .sm-user-ui strong,
    .sm-user-ui strong em {font-weight: bold;}
    

    Second, to use 'Rochester' on selected text add or edit an existing HTML/CSS block.

    <span class="rochester">Testing Rochester</span>
    

    I would NOT use an image as a background in this case. I would crop your image down to fit just the graphic. With that, this is your "Off Duty" block. I cropped your graphic 650px x 138px.

    <div class="offduty">
      <h1><span class="rochester">The "off duty" me:</span></h1>
      <p>dedicated mom of 2, loving wife (usually), cat lover, dark chocolate fanatic, being in nature grounds me, veggie gardener (sometimes well enough to eat them), organic food, vegetarian, vintage cameras, jeans and t-shirts, getting my feet dirty and bugs are ok (just not on me), green tea or peppermint, yoga (worst in the class but I still try), aspiring world traveler (8 countries visited!)</p>
      <p><span class="rochester"><span class="underline"><strong><em>NOT</em></span> me:</strong></span> posed, fahshionista, lipstick, makeup, botox</p>
      <p><span class="rochester"><strong>other skills:</strong></span> graphic design, writing, drawing</p>
      <img src="image-here.png" alt="">
    </div>
    

    This is a screen shot from my testing site. Top is your testing graphic and the bottom is the HTML/CSS block.

  • naomimayanaomimaya Registered Users Posts: 32 Big grins

    Thanks! Yours looks good! But mine's not fully working :'(:'(

    The Rochester font isn't showing up. I put that text in the theme CSS, but I still have the "p" tag in the html block. Is that the problem?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited February 1, 2019

    I didn't mention it because I didn't think it would matter, but I always put my fonts first. So using the Firefox Web Tools, I moved your font from the bottom to the top and it worked. So put this on the very top of your theme's custom CSS section.

    /*-------------------add google fonts----------------------*/
        @font-face {
      font-family: 'Rochester';
      font-style: normal;
      font-weight: 400;
      src: local('Rochester Regular'), 
           local('Rochester-Regular'), 
           url(https://fonts.gstatic.com/s/rochester/v9/6ae-4KCqVa4Zy6Fif-UC2FHR.woff) format('woff'),
           url(https://fonts.gstatic.com/s/rochester/v9/6ae-4KCqVa4Zy6Fif-UC2FHX.woff2) format('woff2'),       
           url(https://fonts.gstatic.com/s/rochester/v9/6ae-4KCqVa4Zy6Fif-UC2FHS.ttf) format('truetype');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    
    .rochester {font-family: 'Rochester';}
    .sm-user-ui em {font-style: italic;}
    .sm-user-ui strong,
    .sm-user-ui strong em {font-weight: bold;}
    
        /*------------------end google fonts code-------------------*/
    

    Also, I realized after I went to bed that I forgot to include the CSS that you need to put in your HTML/CSS block.

    .offduty {text-align: center;}
    
      .offduty h1 {font-size: 40px; margin-bottom: 1.5rem;}
    
      .offduty p {font-size: 18px;}
    
    p span.rochester {font-size:24px;}
    
    .underline {text-decoration:underline;}
    
  • naomimayanaomimaya Registered Users Posts: 32 Big grins

    Awesome! Thanks so much. It's perfect now :)

Sign In or Register to comment.