Incorrect font used

powerfulphotography · 2018-02-28 22:54:50

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)

rod barbee · 2018-02-28 22:58:40

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

powerfulphotography · 2018-02-28 23:03:29

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

rod barbee · 2018-02-28 23:09:48

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 barbee · 2018-02-28 23:37:04

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)

Matthew · 2018-02-28 23:57:10

"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

rod barbee · 2018-03-01 00:00:57

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?

powerfulphotography · 2018-03-01 05:29:47

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

rod barbee · 2018-03-01 05:49:26

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

pideja · 2020-02-21 04:05:23

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

rod barbee · 2020-02-21 04:37:37

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/

pideja · 2020-02-21 05:30:14

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.

rod barbee · 2020-02-21 07:17:42

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.

pideja · 2020-02-21 22:10:39

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)

rod barbee · 2020-02-21 22:20:46

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

pideja · 2020-02-21 23:00:07

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)

rod barbee · 2020-02-21 23:14:22

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

pideja · 2020-02-21 23:28:43

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)

pideja · 2020-02-21 23:40:59

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

Community @ The Turning Gate

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

Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

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

Re: Incorrect font used

Board footer