Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2018-02-28 22:54:50

powerfulphotography
Member
From: Wembley
Registered: 2017-12-31
Posts: 97
Website

Incorrect font used

I have chosen inherit font family Lato to be used as my font of choice in the typography section of my design template, but what is displayed is times new roman on my logo how can I rectify this?

Last edited by powerfulphotography (2018-02-28 23:02:05)


If at first, you don't succeed try, try then go to the forum.
https://powerfulphotography.co.uk/

Offline

#2 2018-02-28 22:58:40

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: Incorrect font used

Isn’t Lato a Google font? Have you added the Google Fonts statement?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#3 2018-02-28 23:03:29

powerfulphotography
Member
From: Wembley
Registered: 2017-12-31
Posts: 97
Website

Re: Incorrect font used

Correct it is a google font but I have not posted a statement, I wasn't sure what that was


If at first, you don't succeed try, try then go to the forum.
https://powerfulphotography.co.uk/

Offline

#4 2018-02-28 23:09:48

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: Incorrect font used

The Google fonts statement is what you get from the Google Fonts site. Copy and paste it into the Google Fonts Statement field.
http://community.theturninggate.net/vie … p?id=6382\

you may need to clear template and browser cache after making the change.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#5 2018-02-28 23:37:04

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: Incorrect font used

also, just noticed this, but "inherit" is not a font-family, it's a css value. I don't think it should be in the drop-down list; it's inclusion causes an error that shows up in the browser inspector (probably because it's in the body css and there's nothing above that for inheritance to work??). I think you found a bug, but Matt will need to look into that.

Instead, choose a real font-family from the drop-down and put "lato" in the Prepend font-family field.
(don't choose the blank option in the font-family list, that throws an error too)

prepend-font-family.jpg


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#6 2018-02-28 23:57:10

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,687
Website

Re: Incorrect font used

"Inherit" is not a bug; it's a documented CSS value for the font-family property, and allows the the element's font-family to be inherited from its parent.

https://www.w3schools.com/cssref/pr_fon … family.asp


Matt

The Turning Gate, http://theturninggate.net

Offline

#7 2018-03-01 00:00:57

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: Incorrect font used

But in this case, it's throwing an error in the inspector. Is that because it's in the body css and there's nothing to inherit from?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#8 2018-03-01 05:29:47

powerfulphotography
Member
From: Wembley
Registered: 2017-12-31
Posts: 97
Website

Re: Incorrect font used

Inserting the font statement and changing the font family to Gill Sans, sans-serif did the job for me thank you


If at first, you don't succeed try, try then go to the forum.
https://powerfulphotography.co.uk/

Offline

#9 2018-03-01 05:49:26

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: Incorrect font used

You can use any font-family you want. Gill Sans is a decent enough backup to Lato.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#10 2020-02-21 04:05:23

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

Re: Incorrect font used

Looking for an indication about a font I'm trying to use, I came across this posting.

My problem is that I chose the font Kabel LT Pro Book and it looks good on my display but, of course with all others, it's Helvetica Neue that's seen. I understand the whole websafe font thing but was wondering if there was a way to use this and any other "personal" font?


pideja.ca

Offline

#11 2020-02-21 04:37:37

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: Incorrect font used

Sure. You can use Google Fonts, and Backlight is already set up for that. Or you can embed your own fonts:
https://ttg-tips-and-tricks.barbeephoto … ight-site/


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#12 2020-02-21 05:30:14

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

Re: Incorrect font used

Well, I tried...

Put the Kabel LT Pro folder in Backlight>Custom>Fonts and then I wrote this CSS:

@font-face {

font-family: 'Kabel LT Pro';

src: url('/backlight/custom/fonts/Kabel LT Pro.eot'); /* IE9 Compat Modes */

src: url('/backlight/custom/fonts/Kabel LT Pro.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('/backlight/custom/fonts/Kabel LT Pro-Regular.woff') format('woff'), /* Modern Browsers */

url('/backlight/custom/fonts/Kabel LT Pro-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */

url('/backlight/custom/fonts/Kabel LT Pro-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */

}
body {
  font-family: 'Kabel LT Pro', Fallback, sans-serif;

I then proceeded to put Kabel LT Pro in the Prepend Font-family w/boxes.

Looks great on my machine...only!
Granted it's a weird font but I think it looks great. But I guess nobody will ever see it.

Offline

#13 2020-02-21 07:17:42

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: Incorrect font used

which site is this on?

double check the name of the font files. my guess is that there shouldn't be any spaces in the font file name.

also, if the font files are in a folder, be sure to include that folder name in the path.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#14 2020-02-21 22:10:39

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

Re: Incorrect font used

I changed the name of the font to  Kabel_LT_Pro_Book.ttf The CSS now reads

@font-face {
	font-family: 'Kabel_LT_Pro_Book';

src: url('/backlight/custom/fonts/Kabel_LT_Pro_Book.eot'); /* IE9 Compat Modes */

src: url('/backlight/custom/fonts/YourFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('/backlight/custom/fonts/Kabel_LT_Pro_Book-Regular.woff') format('woff'), /* Modern Browsers */

url('/backlight/custom/fonts/Kabel_LT_Pro_Book-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */

/*url('/backlight/custom/fonts/Kabel_LT_Pro_Book-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */

}

What about the .woff format? Do I need it?

Should I include this php code:

function head() {
echo ‘
<link rel=”stylesheet” type=”text/css” href=”/backlight/fonts/Kabel_LT_Pro_Book.ttf”>
‘;
}

Also, in Backlight, in the TYPOGRAPHY section, as a Prepend Font-family w/, I have Kabel LT Pro This works on my machine but not elsewhere.

Last edited by pideja (2020-02-21 22:15:37)

Offline

#15 2020-02-21 22:20:46

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: Incorrect font used

Can you post a link to the site using this font?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#16 2020-02-21 23:00:07

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

Re: Incorrect font used

I purchased the Webkit font "Kabel LT Book Pro" and installed the Webkit folder within the FONTS folder. Then, using their instructions (placed a link to their CSS:

<link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">

and your suggested CSS...

body { font-family: KabelLTPro-Book; }

/* custom font */

@font-face {
	font-family: 'KabelLTPro-Book';

src: url('/backlight/custom/fonts/KabelLTPro-Book.eot'); /* IE9 Compat Modes */
src: url('/backlight/custom/fonts/KabelLTPro-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/backlight/custom/fonts/KabelLTPro-Book-Regular.woff') format('woff'), /* Modern Browsers */
url('/backlight/custom/fonts/KabelLTPro-Book-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
url('/backlight/custom/fonts/KabelLTPro-Book-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */

}

I then changed the Prepend Font-family w/ to KabelLTPro-Book

On my machine: still have the Kabel font displayed;
on other stations: type reverted to some kind of Serif font!

Last edited by pideja (2020-02-21 23:05:30)

Offline

#17 2020-02-21 23:14:22

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,318
Website

Re: Incorrect font used

href="MyFontsWebfontsKit.css" assumes that you've placed the css file in same folder as every page and album. Make sure there's a complete url to the font kit css file. If you've placed it in the /backlight/custom/fonts/ folder (you would need to create this folder on the server), then the link to it should be:
href="/backlight/custom/fonts/name-of-folder/MyFontsWebfontsKit.css"

again, a link to the site might help


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#18 2020-02-21 23:28:43

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

Re: Incorrect font used

The site in question: pideja.ca
I adjusted the Google Fonts Statement (optional) to

<link rel="stylesheet" type="text/css" href="/backlight/custom/css/MyFontsWebfontsKit.css">

Having put that css file in the CSS folder.

Maybe I'm not putting this statement where it should be...Or, should I put the WebfontKit.CSS within the Fonts folder.

Still no Kabel displaying.

Last edited by pideja (2020-02-21 23:29:37)

Offline

#19 2020-02-21 23:40:59

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,203

Re: Incorrect font used

SUCCESS!

Having re-read carefully the MyFonts instructions and keeping in mind that most mistakes come from syntax or address errors, I corrected the opening statement  in my CSS file to read:

@font-face {font-family: 'KabelLTPro-Book';src: url('/backlight/custom/fonts/webfonts/3B0CE6_0_0.eot');src: url('/backlight/custom/fonts/webfonts/3B0CE6_0_0.eot?#iefix') format('embedded-opentype'),url('/backlight/custom/fonts/webfonts/3B0CE6_0_0.woff2') format('woff2'),url('/backlight/custom/fonts/webfonts/3B0CE6_0_0.woff') format('woff'),url('/backlight/custom/fonts/webfonts/3B0CE6_0_0.ttf') format('truetype');}

Just needed to indicate correctly where the Webfont folder was residing.

Now look very good with that slightly strange Kabel font face.

pideja.ca

Offline

Board footer

Powered by FluxBB