Help with css and Google Fonts

naomimaya

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!

Hikin' Mike

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.

naomimaya

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' Mike

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;}

naomimaya

Awesome! Thanks so much. It's perfect now