[Resolved] Non Google Font Import

[troyw]

Hi team,
I have tried to follow your instructions to import a custom font, but they do not explain how to do this with a non-google font.
https://docs.generatepress.com/article/adding-local-fonts/

As they only explain how to import Google Fonts, they skip how to obtain the font link url under your section ‘Using@fontface’

So I have added the following font files to my child-theme using then ftp method and adding a new folder called ‘fonts’.

glassure-webfont.woff
glassure-webfont.woff2
glassure.ttf
glassure.otf

As these are not google fonts, what do i do next to get this font added to my website?

Thanks

[Elvin]

Hi there,

That documentation applies to ALL fonts, not just Google fonts. You can do the guide with the fonts you’ve specified.

The basic idea is to upload the font files to the site and write its appropriate CSS importation(@font-face) for use on the site. 🙂

[troyw]

Do you have any instructions on how to write the appropriate css?
I have added this CSS to the stle sheet and still nothing happens

@font-face {
font-family: glassure;
src: url(https://www.******.com.au/wp-content/themes/*******/fonts/glassure.ttf);
font-weight: normal;
}

[Elvin]

It’s the same one you see here:
https://docs.generatepress.com/article/adding-local-fonts/#using-font-face

We just change the file path and the font-family name.

Example:

@font-face {
  font-family: 'Glassure';
  font-style: normal;
  font-weight: 300;
  src: url(https://yourdomain.com/your/path/to/the/font/file/glassure-webfont.woff2) format('woff2');
}

This is just an example. I’m not exactly sure what’s appropriate for the specific properties for the files you’ve specified.

Note: If this is a licensed font, the @font-face or @import code usually comes with it after purchase. Example:
https://creativemarket.com/yusril.muhtadi/3653080-Glassure-Typeface-version-1.0?u=beacon9688&utm_source=Link&utm_medium=CM+Social+Share&utm_campaign=Product+Social+Share&utm_content=Glassure+Typeface+version+1.0&ts=201905

[troyw]

Is this what you mean;

@font-face {
font-family: ‘glassureregular’;
src: url(‘glassure-webfont.woff2’) format(‘woff2’),
url(‘glassure-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}

[troyw]

So I have added this to the stylesheet but still font not appearing;

@font-face {
font-family: ‘glassureregular’;
src: url(https://www.*****.com.au/wp-content/themes/******/fonts/glassure-webfont.woff2′) format(‘woff2′),
url(https://www.*****.com.au/wp-content/themes/*****/fonts/glassure-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}

[Elvin]

Are you trying to add it on the customizer settings?

If so, you’ll have to do that with PHP.

Example:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'glassureregular';

    return $fonts;
} );

[troyw]

I am adding it to the Child Theme Style Sheet.
I just added the above code to the style sheet too and still nothing?

[Elvin]

Can you link us to the site in question to check? So I can inspect if there are issues w/ the importation.

[troyw]

See private info

[Elvin]

Ah I see now.

A few things:
https://share.getcloudapp.com/04uAyG99

You’ve added things within Appearance > Customize > Additional CSS.

The filter part is PHP. It has to be added on a child theme’s functions.php or Code Snippets plugin.

The @font-face part has wrong URL. Also, its a duplicate entry because you already have one on your style.css within the child theme. Just remove it and keep the one on the child theme.

Note: The importation from the child theme actually works, you just need to fix the PHP.

See this: https://share.getcloudapp.com/12uARx6Z

[troyw]

That seems to have fixed it.
Thanks Elvin.

[Elvin]

No problem. Glad you got it fixed. 🙂

[Sílvia]

Hello,
I have the same problem that troyw had trying to ad custom fonts (not Google).
I’ve written the css code and also added the php code through the snippets plugin but it still doesn’t seem to work.
Any idea?

Thanks in advance,
Silvia

[David]

Hi there,

what part does not work ?

[Author]

Posts