[Resolved] Local Fonts and ttf

[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

[Tom]

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 🙂

[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

[Tom]

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

[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

[Tom]

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

[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

[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

[Tom]

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?

[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

[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

[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’

[Tom]

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

[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

[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

[Author]

Posts