Typography – Adding font

Home Forums Support Typography – Adding font

Home Forums Support Typography – Adding font

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #49445
    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

    #49570
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #49717
    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

    #49718
    Maxime BAILLY-BASIN

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

    Thank you !

    Max

    #49728
    Tom
    Lead Developer
    Lead Developer

    Glad you figured it out! 🙂

    #274532
    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

    #274544
    Leo
    Staff
    Customer Support

    Hi Roman,

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

    Let us know.

    #274546
    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

    #274549
    Leo
    Staff
    Customer Support

    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?

    #274612
    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.

    #274618
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #274678
    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

    #274679
    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.

    #274681
    Tom
    Lead Developer
    Lead Developer

    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.

    #274694
    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?

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.