Local Fonts and ttf

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 :)

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

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

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

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 ../?

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

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

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?

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

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

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'

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"?

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

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