• Resolved Chigolo

    (@fitnsexy)


    I would like to integrate Google Fonts locally and have followed the instructions on the homepage (https://docs.generatepress.com/article/adding-local-fonts/).

    As CSS I added the following code and uploaded the appropriate files to the …/fonts folder via FTP. In the admin area I then deactivated the button for Google Fonts.

    /*GOOGLE FONTS LOCAL*/
    /* patua-one-regular - latin */
    @font-face {
      font-family: 'Patua One';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/patua-one-v15-latin-regular.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/patua-one-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/patua-one-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/patua-one-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('../fonts/patua-one-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/patua-one-v15-latin-regular.svg#PatuaOne') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-100 - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 100;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-200 - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 200;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-300 - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 300;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-regular - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-regular.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-500 - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 500;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-600 - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 600;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-700 - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 700;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-800 - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 800;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-900 - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 900;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-100italic - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: italic;
      font-weight: 100;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-100italic.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-200italic - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: italic;
      font-weight: 200;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-200italic.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-300italic - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: italic;
      font-weight: 300;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-300italic.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-italic - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: italic;
      font-weight: 400;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-italic.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-500italic - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: italic;
      font-weight: 500;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-500italic.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-600italic - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: italic;
      font-weight: 600;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-600italic.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-700italic - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: italic;
      font-weight: 700;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-700italic.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-800italic - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: italic;
      font-weight: 800;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-800italic.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    
    /* raleway-900italic - latin-ext_latin_cyrillic-ext_cyrillic */
    @font-face {
      font-family: 'Raleway';
      font-style: italic;
      font-weight: 900;
      src: url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900italic.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v26-latin-ext_latin_cyrillic-ext_cyrillic-900italic.svg#Raleway') format('svg'); /* Legacy iOS */
    }

    My problem: Pages work, but posts are displayed in a different font. Please see: https://gyazo.com/26717aa9383aef44fcb0e4311dbf0e64.

    As Typography I made the following settings: https://gyazo.com/be7eeb4a403e4435a3525660fb7e0042.

    Any ideas how I can fix it?
    Thx in advance.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi there,

    if it is working on Pages then you may just need to clear any plugin and browser caches.

    If thats not the issue, then please provide a link to a Post and we can take a look.

    Thread Starter Chigolo

    (@fitnsexy)

    Hi @diggeddy,

    I’ve already tried that – unsuccessfully.

    I’ve now tried to enter the CSS code with a direct path, but that didn’t have the desired success either.

    The fonts are only displayed correctly if Google Fonts are activated in the customizer. I use the new Typography Manager, my other pages (with GeneratePress) still have the old one, which made the whole thing much easier, because the new one somehow lacks system fonts… While I’m at it, can I re-enable the old one and disable the new one?

    The site is currently under construction, but I have set up an account for you to be able to take a look at the whole thing. Can I send you the login details?

    ying

    (@yingscarlett)

    While I’m at it, can I re-enable the old one and disable the new one?

    Unfortuanly you can not.

    because the new one somehow lacks system fonts

    That’s incorrect. If you don’t select any fonts, the default fonts will be system stack.

    Could you send us your site link so we can take a look? Login is not needed at this moment.

    Thread Starter Chigolo

    (@fitnsexy)

    Please don’t ask me how, but it works now…

    I have now copied the CSS code again and used the absolute path in each case. Then transfer the files again via FTP.

    Google fonts are deactivated in the typography and there is also no connection (when checking with the Google Chrome Console).

    It’s a pity that you can’t switch between the old and the new manager. With the old one you could select different system fonts.

    Thx for your support!

    With the new system you simply Add Font in the Font Manager.
    And in the field provided you can type in any font name or font stack your want to use. For example you can add this entire stack in that field:

    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

    Its way more flexible then the old system ??

    Glad to hear its now working… sounds like a caching issue ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Different fonts on pages and posts (Google Fonts local)’ is closed to new replies.