Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
Hi, I tried now for some hours Google Fonts.
In OSX / IOS Safari I cannot use these fonts. Firefox has no problems to show these fonts.
Have I overlooked something?
Rainer
Offline
Explained in full:
http://community.theturninggate.net/vie … hp?id=6382
Offline
I have read this post 20 times and did this exactly. The font Cormorant Garamond will not display in Safari Browser, please try it:
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400i,500i,600i,700i" rel="stylesheet">
Please have a look on my testsite:
http://tripstrilles.myqnapcloud.com
In Firefox the font has changed, in Safari a little, but to another font.
Rainer
---
Edit:
I tried now:
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
this works, but how can I change between regular and italic?
Last edited by Rainer Goergen (2016-08-03 17:38:34)
Offline
Looks like the syntax is wrong. Did you copy it directly from the Google Fonts site?
Instead of 400i, for example, it should be 400italic, as shown in Matt's post.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Google Fonts site is new. Directly copy from the site. I took the whole font family like Matthew wrote and it works.
But I don't know how zu change the font from regular to italic, see the edited post of mine.
Rainer
Offline
If using Markdown, try wrapping the words in underscores: _italic words_
if using html, use the em tag:
<em>italic words</em>Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Or use CSS:
h1 { font-family: my-font; }
h1.italic-heading { font-style: italic; }Offline
It won't appear in the list. You need to write it in the "Prepend Font-family w/" field
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I don't know. Is that the correct font name?
Did you add the Google Fonts statement in Typography?
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I just managed to use self hosted webfonts with backlight
This is how:
I created a directory outside the Backlight hierarchy (actually in the root of my site where the folder "backlight" also lies) and put the CSS with the webfont definitions there. In this directory I also created a subdir named "fonts" where I put my eot, woff, woff2 and ttf files.
In the "Google Fonts Statement" field of my templates I entered a link to this local stylesheet
<link href="http://fotos.michilge.de/mhfonts/latolatinfonts_mh.css" rel="stylesheet" type='text/css'>I edited the stylesheet that came with my fontpackage to contain only the variations I really want to use and changed the property "font-weight" according to the convention followed by google fonts from something like "font-weight: bold;" to "font-weight: 700;" and so on since the numerical weights is what I can choose in backlight.
A sample declaration from my Stylesheet would be:
/* Webfont: LatoLatin-Regular */@font-face {
font-family: 'LatoLatinWeb';
src: url('fonts/LatoLatin-Regular.eot'); /* IE9 Compat Modes */
src: url('fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */
url('fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
url('fonts/LatoLatin-Regular.ttf') format('truetype');
font-style: normal;
font-weight: 400;
text-rendering: optimizeLegibility;
}The field "Prepend Font-family w/" must contain the value of the "font-family"-property so in my case "LatoLatinWeb".
Why should one want this?
The font I use is not available via Google Fonts.
I have visitors concerned about their privacy who don't like google to get a call for the fonts with a referrer from the pages they view.
Last edited by michilge (2016-10-16 09:44:03)
Offline
Since you're referencing the font location in the css file, I don't think you actually need to put anything in the Google Fonts Statement field.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
You can write in any font in the Prepend Font-family field; it doesn't have to be a Google Font. In fact, you can paste any type of <link> element into the Google Fonts Statement field; that doesn't necessarily have to be hosted on Google.
Offline
Yes, indeed. It's as open and straightforward as I had hoped it would be. The only thing to keep in mind is to notice if the stylesheet provided with the fonts uses numbers to specify font-weight or elsewise needs modification.
Offline
I can even enter multiple font-families.
In my case "Lato, LatoLatinWeb" would end up using Lato if it is installed as a system font and fall back to the self hosted latin subset if Lato is not present locally.
Offline
Since you're referencing the font location in the css file, I don't think you actually need to put anything in the Google Fonts Statement field.
If I had it in my custom.css within the backlight tree, that would be right as long custom.css is activated.
I could probably rely on future updates or reinstallations not to do harm to the /backlight/custom tree, but somehow I tended to put it outside.
Offline
Yes, indeed. It's as open and straightforward as I had hoped it would be. The only thing to keep in mind is to notice if the stylesheet provided with the fonts uses numbers to specify font-weight or elsewise needs modification.
That's why there are numerical font-weight controls throughout. ;-)
Offline
Pages: 1