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.
I may use a web font for Nav items in CE4 Pages - and one of the files included is .woff2 (in addition to a .woff) which isn't shown in the amended CSS for @font-face following. I assume the.woff2 is a useful option - so how would the CSS example below be correctly/accurately amended to use the .woff2 file? As well, how does one go about making the changes so that only the Nav items are affected? I know very little about CSS/coding/web...just basics. I'm trying to get this site up and running quickly. Thanks for help
@font-face {
font-family: 'MyWebFont';
src: url('/phplugins/fonts/webfont.eot'); /* IE9 Compat Modes */
src: url('/phplugins/fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/phplugins/fonts/webfont.woff') format('woff'), /* Modern Browsers */
url('/phplugins/fonts/webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('/phplugins/fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
Offline
you'll need to replace 'webfont' with the actual name of your font
You also need to place the font in a folder named 'fonts' inside the phplugins/ folder.
As well, how does one go about making the changes so that only the Nav items are affected?
Some options:
--Just type in the name of your font in the Font-family field in Site Info > Navigation Items in all your templates
--Type in the font names in the Pages Nav Item area. Then use the Share Resources with TTG CE4 Pages option. You'll need to enable this in all of your templates.
http://ce4.theturninggate.net/docs/doku … _resources
--Use custom css via phplugins to replace the existing navigation css. There's a link at the bottom of this tutorial that shows all the typography css.
below is the piece of code you'd use. Place the name of your font where needed, followed by any fallback fonts you might want. phplugins must be enabled site wide and custom css enabled as well.
/* Site Navigation Menu */
p#nav a,
#r2d2-menu ul li a,
#r2d2-menu ul#nav li span {
font-family: 'Helvetica Neue', 'Proxima Nova', Helvetica, Roboto, Arial, 'Segoe UI', 'Droid Sans', sans-serif;
}so how would the CSS example below be correctly/accurately amended to use the .woff2 file?
I would try just copying the the current example using .woff and just amend it with the 2. Or replace the woff with woff2. I think you should probably put the .woff2 line after the .woff line, that way compatible browsers can use it while non-compatible browsers will ignore it. See what happens.
Apparently, woff2 is a compressed format that will improve performance somewhat.
A google search came up with this page that shows browser compatibility with .woff2
http://caniuse.com/#feat=woff2
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
thanks R
Offline