Problem implementing Source

Hi,

Can you link us to the site in question so we could take a closer look?

But instead of seeing this font on the web I see another one and when I inspect the code it tells me that it is using Ginora Sans.

Seems like the font file is not imported properly.

Consider following this guide.

https://docs.generatepress.com/article/adding-local-fonts/

Hi @ejcabquina,

I’m working at localhost, I uploaded a copy at https://highmove.kreathors.com/

I’m going to give you a review of that guide anyway.

I’ve inspected through your site and wasn’t able to spot any @font-face{} font import codes for Ginora Sans.

Perhaps I’ve missed it. Can you verify if you’ve done this for Ginora Sans?

If not, you’ll have to do something like this to be able to use the font on the page:

@font-face {
font-family: 'Ginora Sans Regular';
font-style: normal;
font-weight: normal;
src: local('Ginora Sans Regular'), url('Ginóra Sans Regular.woff') format('woff');
}

@font-face {
font-family: 'Ginora Sans Oblique';
font-style: normal;
font-weight: normal;
src: local('Ginora Sans Oblique'), url('Ginóra Sans Oblique.woff') format('woff');
}

@font-face {
font-family: 'Ginora Sans Light';
font-style: normal;
font-weight: normal;
src: local('Ginora Sans Light'), url('Ginóra Sans Light.woff') format('woff');
}

@font-face {
font-family: 'Ginora Sans Light Oblique';
font-style: normal;
font-weight: normal;
src: local('Ginora Sans Light Oblique'), url('Ginóra Sans Light Oblique.woff') format('woff');
}

@font-face {
font-family: 'Ginora Sans Semi Bold';
font-style: normal;
font-weight: normal;
src: local('Ginora Sans Semi Bold'), url('Ginóra Sans Semi Bold.woff') format('woff');
}

@font-face {
font-family: 'Ginora Sans Semi Bold Oblique';
font-style: normal;
font-weight: normal;
src: local('Ginora Sans Semi Bold Oblique'), url('Ginóra Sans Semi Bold Oblique.woff') format('woff');
}

Just change the value inside url() pointing to the Ginora Sans font file.

Example:

@font-face {
font-family: 'Ginora Sans Regular';
font-style: normal;
font-weight: normal;
src: local('Ginora Sans Regular'), url('/wp-content/uploads/2020/10/Ginóra Sans Regular.woff') format('woff');
}

Once you’re able to properly set this up, you can change this:

font-family: ginora_sansbold !important; into this font-family: 'Ginora Sans Regular'; and it should work.

In my case what I did was to upload the fonts folder to the “child theme”.

I would change something except for the url in “src”

Or do you recommend me to upload everything?

The code I’m using is this (I think it’s strange that you can’t see it, since it’s implemented in the site)

@font-face {
    font-family: 'ginora_sanssemi_bold_oblique';
    src: url('ginora_sans_semi_bold_oblique-webfont.woff2') format('woff2'),
         url('ginora_sans_semi_bold_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sanslight_oblique';
    src: url('ginora_sans_light_oblique-webfont.woff2') format('woff2'),
         url('ginora_sans_light_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sansbold_oblique';
    src: url('ginora_sans_bold_oblique-webfont.woff2') format('woff2'),
         url('ginora_sans_bold_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

 
@font-face {
    font-family: 'ginora_sanslight';
    src: url('ginora_sans_light-webfont.woff2') format('woff2'),
         url('ginora_sans_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sanssemi_bold';
    src: url('\wp-content\themes\generatepress_child\fonts\ginora_sans_semi_bold-webfont.woff2') format('woff2'),
         url('\wp-content\themes\generatepress_child\fonts\ginora_sans_semi_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sansbold';
    src: url('ginora_sans_bold-webfont.woff2') format('woff2'),
         url('ginora_sans_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sansregular';
    src: url('ginora_sans_regular-webfont.woff2') format('woff2'),
         url('ginora_sans_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sansoblique';
    src: url('ginora_sans_oblique-webfont.woff2') format('woff2'),
         url('ginora_sans_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

• This reply was modified 4 years, 1 month ago by Hector.

Hi there,

Where are the font files in the child theme? All in the root folder?

Currently, your CSS is looking for fonts in the same folder as the stylesheet.

Let us know ??

Hi Tom,

The font files are in the root folder of the child theme, along with the functions and style files.

When I try to go to one of those files I get a 404 error: https://yourURL.com/wp-content/themes/generatepress_child/ginora_sans_semi_bold_oblique-webfont.woff2

Can you double-check their location and file names?

To that address you would have to add “fonts” (which is the folder where all the Ginora Sans fonts are located):

https://yourURL.com/wp-content/themes/generatepress_child/ginora_sans_semi_bold_oblique-webfont.woff2

Hi there,

If your fonts are in:

https://yourURL.com/wp-content/themes/generatepress_child/fonts/ginora_sans_semi_bold_oblique-webfont.woff2

Then in your @fontface CSS you try the same absolute URL eg.

src: url('https://yourURL.com/wp-content/themes/generatepress_child/fonts/ginora_sans_semi_bold_oblique-webfont.woff2') format('woff2'),

Hi David,

I have already tried this, but the problem remains.

It must be something I’m doing wrong because I can’t think of anything. I keep inspecting the code.

I leave the steps I followed to install the font:

I upload the “fonts” folder in https://yourURL.com/wp-content\themes\generatepress_child

The files in the fonts folder are as follows:

ginora_sans_bold_oblique-webfont.woff
ginora_sans_bold_oblique-webfont.woff2

ginora_sans_bold-webfont.woff
ginora_sans_bold-webfont.woff2

ginora_sans_light_oblique-webfont.woff
ginora_sans_light_oblique-webfont.woff2

ginora_sans_light-webfont.woff
ginora_sans_light-webfont.woff2

ginora_sans_oblique-webfont.woff
ginora_sans_oblique-webfont.woff2

ginora_sans_regular-webfont.woff
ginora_sans_regular-webfont.woff2

ginora_sans_semi_bold_oblique-webfont.woff
ginora_sans_semi_bold_oblique-webfont.woff2

ginora_sans_semi_bold-webfont.woff
ginora_sans_semi_bold-webfont.woff2

I add CSS in the child theme style file: (also try with absolute URL)

@font-face {
    font-family: 'ginora_sanssemi_bold_oblique';
    src: url('ginora_sans_semi_bold_oblique-webfont.woff2') format('woff2'),
         url('ginora_sans_semi_bold_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sanslight_oblique';
    src: url('ginora_sans_light_oblique-webfont.woff2') format('woff2'),
         url('ginora_sans_light_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sansbold_oblique';
    src: url('ginora_sans_bold_oblique-webfont.woff2') format('woff2'),
         url('ginora_sans_bold_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

 
@font-face {
    font-family: 'ginora_sanslight';
    src: url('ginora_sans_light-webfont.woff2') format('woff2'),
         url('ginora_sans_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sanssemi_bold';
    src: url('\wp-content\themes\generatepress_child\fonts\ginora_sans_semi_bold-webfont.woff2') format('woff2'),
         url('\wp-content\themes\generatepress_child\fonts\ginora_sans_semi_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sansbold';
    src: url('ginora_sans_bold-webfont.woff2') format('woff2'),
         url('ginora_sans_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sansregular';
    src: url('ginora_sans_regular-webfont.woff2') format('woff2'),
         url('ginora_sans_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ginora_sansoblique';
    src: url('ginora_sans_oblique-webfont.woff2') format('woff2'),
         url('ginora_sans_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

If I’m not mistaken, that’s it. But it still doesn’t take the source.

I apologize for my English which is not good.

• This reply was modified 4 years, 1 month ago by Hector.

You shouldn’t even need absolute URLs, but you do need to add the fonts folder to the URL.

So: ginora_sans_light_oblique-webfont.woff2

Would become: fonts/ginora_sans_light_oblique-webfont.woff2

Can you make that change and leave it so we can take a look (if it doesn’t fix it)?

Can you also turn off Rocket Loader (Cloudflare)?

Perfect!

The problem was that I was not placing “fonts” in the location.

At first I only used ginora_sans_light_oblique-webfont.woff2 but it didn’t work.

I then used the absolute URL https://yourURL.com/wp-content/themes/generatepress_child/fonts/ginora_sans_semi_bold_oblique-webfont.woff2 but for some reason I don’t take it.

And now I just used fonts/ginora_sans_light_oblique-webfont.woff2 worked perfectly.

Thank you very much @ejcabquina @diggeddy and @edge22 for taking the time to give me a solution.

Awesome, glad we could help! ??