[Resolved] Local Fonts and ttf

Home Forums Support Local Fonts and ttf

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1188995
    Paul

    I have used your excellent document “https://docs.generatepress.com/article/adding-local-fonts/”
    to add a font – including to customiser.
    However the exact font that I want is Oswald ExtraLight and I can only find this in ttf format. See https://www.fontpalace.com/font-download/Oswald+ExtraLight/
    Oswald Regular I can find with the google webfonts helper in all types including ttf eot waff and svg.
    How can I use the ttf version of Oswald ExtraLight – when I tested this in the customiser it rendered as Times.
    I have added a font-weight to the css which brings it pretty close – but it is not the same as the extralight
    Thank you for your help

    #1189785
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    If you only have the one file, you need to make sure your @font-face CSS includes only the URL to that one file.

    Only having the one file might not be great for optimum browser support, but it should work.

    Let me know 🙂

    #1191135
    Paul

    Thank you Tom,
    I have backed up a little bit and used @font-face for the google font range as follows

    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 200;
      src: url('../fonts/oswald-v31-latin/oswald-v31-latin-200.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/oswald-v31-latin/oswald-v31-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-200.woff') format('woff'), /* Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-200.svg#Oswald') format('svg'); /* Legacy iOS */
    }

    I have repeated this for other font-weights up to 700. This works in as much as I get the Oswald type face but I am getting odd results. So this css

    .pj-all-small-caps {
      color: #ffffff;
      font-family: oswald-extralight, oswald, sans-serif;
      font-size: 107px;
      font-weight: 200;
      letter-spacing: 5.35px;
      text-align: center !important;
      margin: 0px 0px 0px 0px;
      }

    produces the same weight on the screen if I specify the weight as 200 or 300 or 400 or 500 and then suddenly at 700 it makes a leap to being very heavy.
    I am wondering whether to resort to sourcing the font from a Google <link> directly as a single font. I think you have a document about this. As always my intent was to maintain performance.
    Thank you for your help, Paul

    #1191323
    Tom
    Lead Developer
    Lead Developer

    The font-family should always be Oswald. If you use the tool as a reference, you can see the font-family always stays the same, but the font-weight and font files change: https://www.screencast.com/t/D3X5FRVby

    #1192030
    Paul

    Thank you Tom, this CSS @font-face looks very like what I have. But I am still getting no change visibly on the screen when I specify weights of 200 300 400 500 or 600
    And then at 700 it suddenly increases the visible weight dramatically. Please see screenshots here:

    https://www.screencast.com/users/paul7326/folders/GeneratePress01

    For weights 400 & 700 I have included a view from font-finder.

    The css is as follows:

    /* oswald-regular - latin */
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
    }
    /* oswald-600 - latin */
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 600;
      src: url('../fonts/oswald-v31-latin/oswald-v31-latin-600.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/oswald-v31-latin/oswald-v31-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-600.woff') format('woff'), /* Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-600.svg#Oswald') format('svg'); /* Legacy iOS */
    }
    /* oswald-500 - latin */
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 500;
      src: url('../fonts/oswald-v31-latin/oswald-v31-latin-500.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/oswald-v31-latin/oswald-v31-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-500.woff') format('woff'), /* Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-500.svg#Oswald') format('svg'); /* Legacy iOS */
    }
    /* oswald-700 - latin */
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 700;
      src: url('../fonts/oswald-v31-latin/oswald-v31-latin-700.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/oswald-v31-latin/oswald-v31-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-700.woff') format('woff'), /* Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-700.svg#Oswald') format('svg'); /* Legacy iOS */
    }<code></code>/* oswald-regular - latin */
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
    }
    /* oswald-600 - latin */
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 600;
      src: url('../fonts/oswald-v31-latin/oswald-v31-latin-600.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/oswald-v31-latin/oswald-v31-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-600.woff') format('woff'), /* Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-600.svg#Oswald') format('svg'); /* Legacy iOS */
    }
    /* oswald-500 - latin */
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 500;
      src: url('../fonts/oswald-v31-latin/oswald-v31-latin-500.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/oswald-v31-latin/oswald-v31-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-500.woff') format('woff'), /* Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-500.svg#Oswald') format('svg'); /* Legacy iOS */
    }
    /* oswald-700 - latin */
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 700;
      src: url('../fonts/oswald-v31-latin/oswald-v31-latin-700.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/oswald-v31-latin/oswald-v31-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-700.woff') format('woff'), /* Modern Browsers */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/oswald-v31-latin/oswald-v31-latin-700.svg#Oswald') format('svg'); /* Legacy iOS */
    }

    Thank you, Paul

    #1192396
    Tom
    Lead Developer
    Lead Developer

    Hmm, the code looks good besides the <code></code> part. What if you remove all of the CSS comments and use the full URLs instead of ../?

    #1192573
    Paul

    Hi Tom, I have tried with ../fonts and https:// and the full path
    Result is the same
    I will experiment with a resident font and see what happens.
    Thank you, Paul

    #1192586
    Paul

    Using Verdana has similar result – font-weight as seen on screen does not change until you get to weight of 600. It is a AdvancedWP Block with cover, image and text
    This is the html

    <!-- wp:nk/awb {"type":"image","align":"full","fullHeight":true,"image":60,"imageTag":"\u003cimg src=\u0022https://connecteducation.co.uk/wp/wp-content/uploads/2020/02/fullsizeoutput_2547-scaled.jpeg\u0022 class=\u0022wp-image-60 jarallax-img\u0022 alt=\u0022Sheep in Cerney Wick\u0022 width=\u00222560\u0022 height=\u00221707\u0022 /\u003e","imageSizes":{"thumbnail":{"height":150,"width":150,"url":"https://connecteducation.co.uk/wp/wp-content/uploads/2020/02/fullsizeoutput_2547-150x150.jpeg","orientation":"landscape"},"medium":{"height":200,"width":300,"url":"https://connecteducation.co.uk/wp/wp-content/uploads/2020/02/fullsizeoutput_2547-300x200.jpeg","orientation":"landscape"},"large":{"height":683,"width":1024,"url":"https://connecteducation.co.uk/wp/wp-content/uploads/2020/02/fullsizeoutput_2547-1024x683.jpeg","orientation":"landscape"},"full":{"url":"https://connecteducation.co.uk/wp/wp-content/uploads/2020/02/fullsizeoutput_2547-scaled.jpeg","height":1707,"width":2560,"orientation":"landscape"}},"parallax":"scroll","parallaxMobile":true,"mouseParallax":true,"ghostkitStyles":{},"ghostkitClassname":"nk-awb-ZUFVO","ghostkitId":"ZUFVO"} -->
    <div class="wp-block-nk-awb nk-awb alignfull nk-awb-fullheight nk-awb-content-valign-center"><div class="nk-awb-wrap" data-awb-type="image" data-awb-image-background-size="cover" data-awb-image-background-position="50% 50%" data-awb-parallax="scroll" data-awb-parallax-speed="0.5" data-awb-parallax-mobile="true" data-awb-mouse-parallax="true" data-awb-mouse-parallax-size="30" data-awb-mouse-parallax-speed="10000"><div class="nk-awb-inner"><img src="https://connecteducation.co.uk/wp/wp-content/uploads/2020/02/fullsizeoutput_2547-scaled.jpeg" class="wp-image-60 jarallax-img" alt="Sheep in Cerney Wick" width="2560" height="1707" /></div></div><!-- wp:html -->
    <p class="pj-all-small-caps">STROUD SLAD FARM</p>
    <p class="pj-all-small-caps-48-white">Grass Fed | Certified Organic</p>
    <h101><a href="https://connecteducation.co.uk/wp/shop/" style="color:white;">Online Shop</a></h101>
    <!-- /wp:html -->
    
    <!-- wp:paragraph -->
    <p></p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:nk/awb -->

    Help! and thank youu, Paul

    #1193047
    Tom
    Lead Developer
    Lead Developer

    So let’s look at the headline: STROUD SLAD FARM

    Right now I’m seeing font-weight: 20.

    Can you try changing that to something like Open Sans with font-weight: 100?

    #1193112
    Paul

    Hi Tom,
    Yes – you are right – in desperation was trying a very low number.
    I have changed it to 100 Verdana.
    To my eyes 20 100 200 300 400 500 all look the same – and then at 600 it changes dramatically.
    Then changed to 100 Open Sans and there is much more consistency in the changes in font-weight – although I think that 100 200 and 300 look very similar

    #1193210
    Paul

    Hi Tom,
    I have changed the html to text R100 R200 R300 etc. in individual spans – and changed the css to have all weights for Oswald and Open Sans.
    I think this is helpful: font-weight property
    So I think my question moves very slightly to how do we make sure that all the font-weights are present. For Open Sans are they already in GeneratePress? And how do we prevent the browser from rendering Helvetica when we have specified Open Sans
    And for Oswald – why even though we have the weights locally why are they not displaying?
    Thank you
    Paul

    #1193267
    Paul

    Hi Tom,
    Thank you for your time. I am going to mark this as resolved. Conclusions I have come to:

      Import the fonts locally to GeneratePress Child Theme style.css to save on multiple DNS calls
      instructions here: “https://docs.generatepress.com/article/adding-local-fonts/”
      In the case of Oswald change the font-family setting to:
      font-family: oswald, sans-serif;
      removing the “oswald-extralight” at the beginning – as far as I can tell this was confusing things

        Remember that if a font-weight is not present after importing locally then the browsers will default to the nearest available font-weight
      see font-weight property for a description of how this works

      I still have two unanswered questions though

        1) where can I get hold of Oswald at weights of 100 800 & 900
        Unclear to me why Google Fonts does not provide these weights
        I could not make the CSS pick up ‘Open Sans’ – it always defaulted to ‘Helvetica’

    #1193370
    Tom
    Lead Developer
    Lead Developer

    It’s likely that Oswald simply doesn’t come in that weight. Not all fonts have the same weights available to them.

    Are you trying to load Open Sans locally? If so, what if you change the font name to something like “Open Sans Custom”?

    #1193481
    Paul

    Thank you Tom,
    It still renders as Helvetica – this is what Font Finder returns:

    font-family (stack): “Open Sans Custom”, sans-serif
    Font being Rendered:
    Helvetica
    100.0% (local)
    font-size: 107px

    Snippets of CSS are:

    @font-face {
      font-family: 'Open Sans Custom';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/open-sans-v17-latin-regular.eot');

    and class:

      .pj-400Open {
      color: red;
      font-family: 'Open Sans Custom', sans-serif;
      font-size: 107px;
    }

    Please see the site
    /test/ to see the result

    #1193971
    Paul

    I have broken the /test page in trying to make a link for the head section – as in
    <link rel="stylesheet" type="text/css" href="style-test.css">
    I have followed this article here: add external css
    and created this in functions.php

    add_action( 'wp_head','pj_insert_into_wp_head' );  
    
    function pj_insert_into_wp_head() { ?>
    	<link rel="stylesheet" type="text/css" href="style_test.css">
    	<?php }

    But /test does not seem to pick this up – and I am not sure how it would know not to pick up style.css
    thank you

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