Web Fonts

fotofred · 2015-12-23 04:31:50

Hi,
today i tried to implement a new font to my side.
i followed the tutorial:
http://ce4.theturninggate.net/docs/doku … ns_fonts&s[]=web&s[]=fonts

but didn't reach the goal.

The Css code is:

.highslide-controls, .hs-info-overlay, .highslide-image {
box-shadow: none;
}
.navigation-container {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
}
.masthead {
padding-top: 131px; /*set as needed for height of your navigation bar*/
}
@font-face {
font-family: 'ufonts.com_interstate-light';
src: url('/phplugins/fonts/ufonts.com_interstate-light.eot'); /* IE9 Compat Modes */
src: url('/phplugins/fonts/ufonts.com_interstate-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/phplugins/fonts/ufonts.com_interstate-light.woff') format('woff'), /* Modern Browsers */
url('/phplugins/fonts/ufonts.com_interstate-light.ttf') format('truetype'), /* Safari, Android, iOS */
}
body {
font-family: 'ufonts.com_interstate-light', Fallback, sans-serif;
}

the link to the page is:
test.fotofred.de

the font should now be interstate but its still helvetica.
Does anyone has an idea?

rod barbee · 2015-12-23 05:38:44

Your css isn't specific enough. For example, the font for the navigation is coming from the #nav a selector, which comes from the navigation.css file. The #nav a selector is much more specific than the body selector and will take precedence.

You'll need to go through the plug-ins and write in the name of the new font in the font-family fields for every element that you want to apply that font to.
Using the navigation example, go to Site Info > Navigation Items: Font-family and type in the new font.

If you don't want to have to go through the plugins. Step 4 of the tutorial you linked to suggests overriding the CE4 fonts via custom css and links to this page: http://ce4.theturninggate.net/docs/doku … y_template , which gives you the css for all the typography.
Just go through that and add your font, or do a search and replace on Helvetica.

fotofred · 2015-12-23 06:57:54

Hi Rob,

the Interstate isnt a System Font. and be missing (or just shown in lightroom) if i type the name in the pages field.
i would like to use one font for the hole page.
I changed the css a little bit but now its times instead of interstate.
http://test.fotofred.de/

custom.css:

.highslide-controls, .hs-info-overlay, .highslide-image {
box-shadow: none;
}
.navigation-container {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
}
.masthead {
padding-top: 131px; /*set as needed for height of your navigation bar*/
}
@font-face {
font-family: 'interstate-light';
src: url('/phplugins/fonts/interstate-light.eot'); /* IE9 Compat Modes */
src: url('/phplugins/fonts/interstate-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/phplugins/fonts/interstate-light.woff') format('woff'), /* Modern Browsers */
url('/phplugins/fonts/interstate-light.ttf') format('truetype'), /* Safari, Android, iOS */
}
body {
font-family: 'interstate-light', Fallback, sans-serif;
}
body,
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
font-family: 'interstate-light', sans-serif;
}

/* Headings */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: interstate-light, sans-serif;
}

/* Blockquoted text */
blockquote {
font-family: interstate-light, sans-serif;
}

/* Code, plain text, etc. */
pre,
code,
kbd,
samp {
font-family: interstate-light, sans-serif;
}

/* Site Masthead / Identity */
.masthead h1,
.masthead h2 {
font-family: interstate-light, sans-serif;
}

/* Site Navigation Menu */
p#nav a,
#r2d2-menu ul li a,
#r2d2-menu ul#nav li span {
font-family: interstate-light, sans-serif;
}

rod barbee · 2015-12-23 07:23:17

the Interstate isnt a System Font.

that doesn't matter. You're using @font-face,which makes the font available for all visitors to you site whether they have it on their system or not.

Anyway, I just downloaded that font and it looks to me that the font name is Interstate. So try that instead of interstate-light

fotofred · 2015-12-23 08:09:26

Thx Rob, it Works now in Safari.
I will check tommorrow another System with Firefox.
I go crazy
In safari i got an littel darker navigation-background. Also in the gallery full view the buttom and top-bars are little bit darker.
In Firefox are they fine. In Lightroom i dobblechecked that the got all the same grey tones. You got an idea?

rod barbee · 2015-12-23 08:16:38

can you point to a specific page? From what I see at http://test.fotofred.de/ , the navigation background matches the rest of the page and there are no top and bottom bars. I've looked in Firefox, Safari for Windows, and Safari for iOS.

Rod

fotofred · 2015-12-23 08:29:16

Hey you are great.
Ive done 2 Screenshoots
http://test.fotofred.de/grey1.jpg
http://test.fotofred.de/grey2.jpg

http://test.fotofred.de/galleries/021/

fotofred · 2015-12-23 08:30:18

Does you got also shown the Interstate on your browsers?

rod barbee · 2015-12-23 08:49:13

I can barely see the difference in the grays. But using a cool web tool called ColorZilla, I can see that you've got the navigation background color set to 7F7F7F and the background for the rest of the page is set to 808080

Interstate still isn't showing.

There's a difference between the font name and the font's file name. It looks to me (just by double clicking on the font on my system) that the font name is Interstate.
But the font file name is ufonts.com_interstate-light.ttf (plus those other extensions)

But in the @fontface portion of your css your trying to load Interstate.eot, Interstate.woff, and Interstate.ttg when I think the url should point to the actual file names of ufonts.com_interstate-light.ttf, etc. (assuming those are the file names youve uploaded to your phplugins/fonts/ folder.

rod barbee · 2015-12-23 09:06:38

Also, as to this css:

body {
  font-family: 'interstate-light', Fallback, sans-serif;
}

Fallback is not a font. That just represents that you need to include a font-family that you can use as a fallback to the font you want to use, just in case your preferred font is not available.

fotofred · 2015-12-23 12:21:30

Okay. I used an other converter for my font:
http://www.fontsquirrel.com/tools/webfont-generator
They playout an html/css with an descrition that gonna work.
Now i have to put the font into the css folder, but there they will feel also fine i guess

@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
   url('WebFont.woff') format('woff'),
   url('WebFont.ttf') format('truetype'),
   url('WebFont.svg#webfont') format('svg');
}

thx for help Rod an have a nice Christmas!
Greetz from the Rhine

rod barbee · 2015-12-23 14:53:07

That should work as long as you upload the font files to the phplugins/css/ folder. Otherwise you'll need to modify the urls

fotofred · 2015-12-23 15:20:27

There is just one little Thing i dislike:

.album-title {
font-family: 'interstate-light-webfont', sans-serif;
}

.album-description {
font-family: 'interstate-light-webfont', sans-serif;
font-weight: light;
}

thats doesn't work. The album description leaves bold
http://fotofred.de/index.php

rod barbee · 2015-12-23 15:49:46

font-weight: light; is not valid http://www.w3schools.com/cssref/pr_font_weight.asp

Community @ The Turning Gate

#1 2015-12-23 04:31:50

Web Fonts

#2 2015-12-23 05:38:44

Re: Web Fonts

#3 2015-12-23 06:57:54

Re: Web Fonts

#4 2015-12-23 07:23:17

Re: Web Fonts

#5 2015-12-23 08:09:26

Re: Web Fonts

#6 2015-12-23 08:16:38

Re: Web Fonts

#7 2015-12-23 08:29:16

Re: Web Fonts

#8 2015-12-23 08:30:18

Re: Web Fonts

#9 2015-12-23 08:49:13

Re: Web Fonts

#10 2015-12-23 09:06:38

Re: Web Fonts

#11 2015-12-23 12:21:30

Re: Web Fonts

#12 2015-12-23 14:53:07

Re: Web Fonts

#13 2015-12-23 15:20:27

Re: Web Fonts

#14 2015-12-23 15:49:46

Re: Web Fonts

Board footer