Add font family to font everywhere on site

HTML-CSS
1

Hi,
I am a beginner. For my wordpress site, I used a Google Fonts Typography plugin & selected 3 fonts - Futura (headings), Merriweather (paragraphs) and Open Sans (buttons). It applied the font family to futura (font-family: Futura,Trebuchet MS,Arial,sans-serif), but not to the other two. I want to apply that -

replace

{font: Merriweather} by {font-family: Merriweather, Impact, Serif;}

and replace

{font: Open Sans} by {font-family: “Open Sans”, Tahoma, sans-serif;}

everywhere. I tried adding it to additional css on my site, but it still shows a single font for the other two everywhere (I checked using the Inspect feature).
What I’ve tried:

p {
font-family: Merriweather, Impact, Serif;
}

:root {
–font-base: Merriweather,Impact, Serif;
–font-headings: Futura, Trebuchet MS, Arial, sans-serif;
–font-input: Open Sans, Tahoma, sans-serif;
}

body, #content, .entry-content, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt, .widget-area, .widget, .sidebar, #sidebar, footer, .footer, #footer, .site-footer {
font-family: Merriweather,Impact, Serif;
}

and yet, I still see only
body, #content, .entry-content, .post-content, .page-content, .post-excerpt, .entry-summary, .entry-excerpt, .widget-area, .widget, .sidebar, #sidebar, footer, .footer, #footer, .site-footer {
font-family: “Merriweather”;
}

Any way to add the alternative fonts to the font family? Thank you.

2

Did you use @font-face?

3

The things I tried to check are if Futura, Merriweather and Open Sans are Google fonts. Only Futura isn’t. To use the Google fonts, you need to add tags to your HTML code, in the head tags that you can find on the Google Fonts website:

Merriweather → Google Fonts

Open Sans → Google Fonts

You just need to select the type, the weight etc you want for each font and it will generate you a HTML code:

Screenshot 2022-01-24 at 09.14.14
Screenshot 2022-01-24 at 09.14.141920×988 96.6 KB

Example of what should be the HTML head tag:

<head>
  <meta charset="utf-8" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Open+Sans:wght@300&display=swap" rel="stylesheet">
  <title>Your Page</title>
</head>

This is the easiest way, you can also decide to download the fonts directly and you will need to use the @font-face rule as suggested @tlc35us. You can check this link if you want to see how it works: CSS @font-face Rule

After, you use an extension in Wordpress, I am not a huge expert in this CMS, but you should definitely verify if this extension added the link tags in HTML or generated @font-face rules into your CSS.

4

HI @LucLH and @tlc35us !

This post hasn’t been active for over six months.
It is best not to open older inactive posts but instead participate in newer current ones.

Thanks!