Storefront font change

  • Resolved thelearningferran

    (@thelearningferran)


    4 years, 7 months ago

    Hello,

    I want to keep the Storefront theme but I’d like to change the font. I mean to change it for all the site. I plan to include woocommerce as well in two weeks approximately (I’m not sure if this info is important to the subject).

    So far I have checked info here but it is not clear to me. I’m stuck so please help! I see three options:

    1. Install a plugin that allows me to do that: Question: Anyone recommends a plugin for this?

    2. Edit the theme and include CSS code with the font I want: Question: If so, where do I have to include it? Anyone has done this already? Did it work?

    3. Add Additional CSS in Appearance>Customize>Additional CSS: Has anyone done this? Did it work?

    Many thanks!
    Ferran

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi, I see you already got some added into your child theme’s style.css file. Either the child theme or the Additional CSS area is probably the best as it doesn’t involve the install of a plugin which could load up unnecessary font files that you don’t use.

    Were the changes you have setup in your style.css file adequate or were you looking to make further changes to the fonts?

    Thread Starter thelearningferran

    (@thelearningferran)

    Hi Jarret!

    Yes, I did create a child theme finally. So far it’s ok and I do not plan to make further changes to the fonts, thanks!

    Ferran

    I will post here the links I used and how I did it in case someone is looking for the same info:

    In my case I wanted to use the fonts Oswald and Open Sans from Google Fonts:

    1) Follow these instructions first to create your child theme: https://developer.www.ads-software.com/themes/advanced-topics/child-themes/

    2) Check “Embed” tab/instructions from Google Fonts (https://fonts.google.com/?selection.family=Open+Sans|Oswald) after selecting Open Sans and Oswald (In your case select the fonts you want):

    a) Copy this code into the <head> of your HTML document:
    <link href=”https://fonts.googleapis.com/css?family=Open+Sans|Oswald&display=swap” rel=”stylesheet”>

    b) In your child theme, created in step 1, insert your css code. In my case I did not use the code in step 2 of the Google Font Instructions but a code I found (here: https://wooassist.com/how-to-change-fonts-in-storefront-theme/ Section “How to Apply Fonts on the Contents”) because I wanted the headers to user a different font than the rest:

    body, button, input, textarea {
    font-family: ‘Open Sans’, sans-serif;
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: ‘Oswald’, sans-serif;
    }

    And that’s it!

    Hi. Thanks for posting the solution to changing the fonts on the Storefront theme. When you say ” Copy this code into the <head> of your HTML document”, I don’t follow. Can I ask Which HTML document and where is this found?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Storefront font change’ is closed to new replies.

Tags