CODEWITHSUNDEEP
phpcsswordpress
AppleCidar
AppleCidar

Reputation: 41

How to connect fonts to wordpress?

I am facing a problem with connecting fonts in WordPress.

In style css i have this segment of code, which must get the fonts from the file with fonts.

/** reset, vars, fonts **/

/** fonts **/

/** color **/

@font-face {
  font-family: "ProximaNova-Black";
  font-display: swap;
  src: url("<?php echo get_template_directory_uri (); ?>/fonts/ProximaNova-Black.woff") format("woff"), url("<?php echo get_template_directory_uri (); ?>/fonts/ProximaNova-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;

The files of the site look like this. Site's files Fonts file opend

this is the fonts file opened.

A code sample of how i connect my fonts.

  .header__title h1 {
  font-family: ProximaNova-Black;
  font-size: 5rem;
  line-height: 5rem;
  color: #83be80;
}

Where is mine mistake?

Upvotes: 0

Views: 133

Answers (1)

Iftieaq
Iftieaq

Reputation: 1964

get_template_directory_uri() is a PHP function and can only be executed within a PHP tag. You can't use it on the style.css file since it's being executed as CSS, not PHP.

Just use a relative path like this assuming the CSS file is on top of your theme directory.

In style.css

@font-face {
  font-family: "ProximaNova-Black";
  font-display: swap;
  src: url("fonts/ProximaNova-Black.woff") format("woff"), url("fonts/ProximaNova-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

The folder structure should be like this.

my-theme/
├─ fonts/
│  ├─ ProximaNova-Black.woff
│  ├─ ProximaNova-Black.woff2
├─ inc/
├─ js/
├─ languages/
├─ index.php
├─ [...any other files...]
├─ style.css

Upvotes: 1

Related Questions