Typography – Adding font

[Maxime BAILLY-BASIN]

Hi there,

I have bought a font and I would like to add it to the Typography add-on.
How should I proceed to do so ?

Thanks !
Max

[Tom]

Hi there,

At this time it’s not possible to add fonts to the Typography options – but that does sound like a cool feature that I should look into.

You’ll need to include the fonts via your CSS using @font-face: http://css-tricks.com/snippets/css/using-font-face/

Let me know if you need more info 🙂

[Maxime BAILLY-BASIN]

Hi Tom,

Thank you for your quick reply.
I have already used @font-face with other templates but I am not too sure what to do with the GeneratePress template. (I am a WP newbie)

Usually, I add @fontface{…} in style.css before body{} and then I change the default font in font-family of a specific element.
For example, I would do something like that for header1:

h1
{
clear: both;
font-family: MyCustomFont,Bitter, Georgia, serif;
line-height: 1.3;
}

Then I paste the font files (.svg,.ttf,.eot,.woff,…) in the root folder of my local website (I use WAMP).

I have tried to do something similar in the GeneratePress style.css but it does not seem to work that way.

Where should I add @font-face and what should I change in order to use my custom font ?

Sorry for my silly questions !

Thanks !

Max

[Maxime BAILLY-BASIN]

I’ve just found a solution with Simple Custom CSS, as mentioned in your signature 🙂

Thank you !

Max

[Tom]

Glad you figured it out! 🙂

[Roman]

Hello Tom,

2014 you wrote:

“At this time it’s not possible to add fonts to the Typography options – but that does sound like a cool feature that I should look into.”

I try to install 2 Google Fonts locally and to use them with Customiser. will it be possible later or shall I do it still with face-fonts?

Roman

[Leo]

Hi Roman,

This post should help: https://docs.generatepress.com/article/customizing-the-google-font-list/

Let us know.

[Roman]

Hi Leo,

I do not want to extend the list and pull another the webfonts anynchronous.

I downloaded 2 fonts from Google Fonts and would like to save them on my server and to use them within the theme using custiomiser.

roman

[Leo]

Maybe I’m misunderstanding this but I thought https://docs.generatepress.com/article/customizing-the-google-font-list/#adding-your-google-font-to-the-list should do what you are after?

[Roman]

The normal wy to use Google Fonts ist to download them from google server (webfonts). Every client can use these nice fonts, but every client has to download these from google server first, before the page can be rendered.

But there are some disadvantages when doing it this way. The Client browser loads these fonts asynchronously.
So using google webfonsts has some impact to performance.

Google pagespeed Insights tells me, there is a problem loading my website because of this google font:
https://fonts.googleapis.com/…lic,800,800italic|Oswald:300,regular,700

There is a similar post !!!!
https://generatepress.com/forums/topic/google-fonts-and-pagespeed-insights/

… and I’m trying to install the downloaded font (woff2 Format) localy to my server and to controll it from Customiser. There is an option to do it with @font-face and CSS, but I do not know how it works within the theme.

[Tom]

You would need to use @font-face as you mentioned.

So you’d have to install a child theme: https://docs.generatepress.com/article/using-child-theme/

Then upload the font files into the child theme folder.

Then use the @font-face args to point to those files: https://css-tricks.com/snippets/css/using-font-face/

Let me know if you need more info 🙂

[Roman]

Hi Tom,
thanks 4 your fast answer, but I need some more help:

– child theme works (you zip file makes is easy)
– copied 4 fonts files to the child directory
– found empty styles.css there and put the information about these 4 fonts, renamed Oswald to “Local Oswald” a.s.o.

@font-face {
font-family: ‘Local Oswald’;
font-style: normal;
font-weight: 400;
src: local(‘Oswald Regular’), local(‘Oswald-Regular’), url(oswald_regular_latin.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
…
…

– put this information below the CSS above

p {
font-family: “Local Open Sans”;
}

and the paragraphs are Open Sans now.

# This WORKS
h1 {
font-family: “Local Oswald”;
}

PROBLEM 1
# This DOES NOT WORK ?????

h2 {
font-family: “Local Oswald”;
}

PROBLEM 2
I need some more knowledge about where to configure fonts starting from now, in the child’s theme customizer?

Can you point me to some docs please?

Roman

[Roman]

I stopped loading Google fonts from their server using Outoptimize plugin.

Some fonts are ok, some not.

BUT!
The Google Pagespeed Insights went from 67 to 95 (mobile) and 85 to 96 (desktop) through this change.

The challenge now is to configure these local fonts correctly.

[Tom]

So you would upload your fonts into your child theme directory.

Then add this CSS:

@font-face {
  font-family: 'Your Font Name';
  src: url('font-file-name.eot'); /* IE9 Compat Modes */
  src: url('font-file-name.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font-file-name.woff2') format('woff2'), /* Super Modern Browsers */
       url('font-file-name.woff') format('woff'), /* Pretty Modern Browsers */
       url('font-file-name.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font-file-name.svg#svgFontName') format('svg'); /* Legacy iOS */
}

This assumes the fonts are in the root directory of the child theme.

Then you would do this:

h1 {
    font-family: "Your Font Name";
}

This is the exact way Google Fonts work, but they host the files instead of you having to host them.

[Roman]

Hi Tom,
here my childtheme css, I have the woff2 font version only.

@font-face {
  font-family: 'MyOswald';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('oswald_regular_latin.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'MyOpenSans';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('open_sans_latin.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: "MyOpenSans", Georgia, Serif;
}

p {
  font-family: "MyOpenSans", Georgia, Serif;
}

h1 {
  font-family: "MyOswald", Georgia, Serif;
}

h2 {
  font-family: "MyOswald", Georgia, Serif;
}

h3 {
  font-family: "MyOswald", Georgia, Serif;
}

h1 works (Header)
h2+h3 DOES NOT WORK (Content)

Here is the piece of content with h2+h3:

<h2 class=”gap”>Impressum und Datenschutzerklärung</h2>
<h3>Impressum</h3>

Can you help, may be because h2 + h3 are in the content?

[Author]

Posts