Wikia

Community Central

How to use google web fonts

86,675pages on
this wiki

Forum page

This Forum has been archived

Visit the new Forums
Forums: Index Support Requests How to use google web fonts
Wikia's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.
Note: This topic has been unedited for 616 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

So I add to my css file this:

@import url(http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic);

and then use it:

.WikiaPageHeader h1 {
  font-family: 'Marck Script', cursive;
  font-size: 17pt;
}

And it doesn't work. Why? --Das steinerne Herz 02:37, July 30, 2012 (UTC)

Internet Explorer does not support @font-face embedding, which this code does, and Firefox only supports it if the fonts are on the same server as the webpage. As of now, you cannot embed any webfonts as far as I know. TK-999 (talk) 11:55, July 30, 2012 (UTC)
I was able to get it to work by adding this to Wikia.css:
@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  src: local('Marck Script'), local('MarckScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/marckscript/v4/O_D1NAZVOFOobLbVtW3bcoraN7vELC11_xip9Rz-hMs.woff) format('woff');
}
It works in Firefox and Chrome, but not in IE8. Is there a problem I'm missing?
--IK Talk 18:58, August 1, 2012 (UTC)
Oh, thanks a lot! I wonder where did you find url for that font?found --Das steinerne Herz 18:39, August 2, 2012 (UTC)
Question: Do you have the font installed on your computer? As for IE, it only supports its own .eot—Embedded Opentype—in embeddings.TK-999 (talk) 18:42, August 2, 2012 (UTC)

I did some testing, and this sort of thing doesn't seem to be working very well.

With this css:

@font-face {
    font-family: "cpmono";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/cpmono/CPMono_v07_Bold-webfont.woff") format("woff"), url("/skins/oasis/fonts/cpmono/CPMono_v07_Bold-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/cpmono/CPMono_v07_Bold-webfont.svg") format("svg");
}

@font-face {
    font-family: "fontin";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/fontin/fontin_sans_b_45b-webfont.woff") format("woff"), url("/skins/oasis/fonts/fontin/fontin_sans_b_45b-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/fontin/fontin_sans_b_45b-webfont.svg") format("svg");
}

@font-face {
    font-family: "garton";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/garton/garto16-webfont.woff") format("woff"), url("/skins/oasis/fonts/garton/garto16-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/garton/garto16-webfont.svg") format("svg");
}

@font-face {
    font-family: "gondola";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/gondola/Gondola_SD-webfont.woff") format("woff"), url("/skins/oasis/fonts/gondola/Gondola_SD-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/gondola/Gondola_SD-webfont.svg") format("svg");
}

@font-face {
    font-family: "idolwild";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/idolwild/idolwild-webfont.woff") format("woff"), url("/skins/oasis/fonts/idolwild/idolwild-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/idolwild/idolwild-webfont.svg") format("svg");
}

@font-face {
    font-family: "imfell";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/imfell/fepirm27c-webfont.woff") format("woff"), url("/skins/oasis/fonts/imfell/fepirm27c-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/imfell/fepirm27c-webfont.svg") format("svg");
}

@font-face {
    font-family: "josefin";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/josefin/JosefinSansStd-Light-webfont.woff") format("woff"), url("/skins/oasis/fonts/josefin/JosefinSansStd-Light-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/josefin/JosefinSansStd-Light-webfont.svg") format("svg");
}

@font-face {
    font-family: "megalopolis";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/megalopolis/megalopolisextra-webfont.woff") format("woff"), url("/skins/oasis/fonts/megalopolis/megalopolisextra-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/megalopolis/megalopolisextra-webfont.svg") format("svg");
}

@font-face {
    font-family: "OrbitronMedium";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/orbitron/orbitron-medium-webfont.woff") format("woff"), url("/skins/oasis/fonts/orbitron/orbitron-medium-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/orbitron/orbitron-medium-webfont.svg#webfont5FiGFJOa") format("svg");
}

@font-face {
    font-family: "pixiefont";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/pixiefont/PixieFont-webfont.woff") format("woff"), url("/skins/oasis/fonts/pixiefont/PixieFont-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/pixiefont/PixieFont-webfont.svg") format("svg");
}

@font-face {
    font-family: "prociono";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/prociono/Prociono-Regular-webfont.woff") format("woff"), url("/skins/oasis/fonts/prociono/Prociono-Regular-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/prociono/Prociono-Regular-webfont.svg") format("svg");
}

@font-face {
    font-family: "speakeasy";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/speakeasy/SF_Speakeasy-webfont.woff") format("woff"), url("/skins/oasis/fonts/speakeasy/SF_Speakeasy-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/speakeasy/SF_Speakeasy-webfont.svg") format("svg");
}

@font-face {
    font-family: "tangerine";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/tangerine/Tangerine_Regular-webfont.woff") format("woff"), url("/skins/oasis/fonts/tangerine/Tangerine_Regular-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/tangerine/Tangerine_Regular-webfont.svg") format("svg");
}

@font-face {
    font-family: "titillium";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/titillium/TitilliumText22L003-webfont.woff") format("woff"), url("/skins/oasis/fonts/titillium/TitilliumText22L003-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/titillium/TitilliumText22L003-webfont.svg") format("svg");
}

@font-face {
    font-family: "veggieburger";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/veggieburger/VeggiBol-webfont.woff") format("woff"), url("/skins/oasis/fonts/veggieburger/VeggiBol-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/veggieburger/VeggiBol-webfont.svg") format("svg");
}

@font-face {
    font-family: "yanone";
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("/skins/oasis/fonts/yanone/YanoneKaffeesatz-Regular-webfont.woff") format("woff"), url("/skins/oasis/fonts/yanone/YanoneKaffeesatz-Regular-webfont.ttf") format("truetype"), url("/skins/oasis/fonts/yanone/YanoneKaffeesatz-Regular-webfont.svg") format("svg");
}





@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  src: local('Marck Script'), local('MarckScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/marckscript/v4/O_D1NAZVOFOobLbVtW3bcoraN7vELC11_xip9Rz-hMs.woff) format('woff');
}


@font-face {
  font-family: 'Overlock';
  font-style: italic;
  font-weight: 700;
  src: local('Overlock-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/overlock/v2/wFWnYgeXKYBks6gEUwYnfAFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

@font-face {
  font-family: 'Overlock';
  font-style: normal;
  font-weight: 400;
  src: local('Overlock'), local('Overlock-Regular'), url(http://themes.googleusercontent.com/static/fonts/overlock/v2/Pr-80_x4SIOocpxz2VxC5fesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

@font-face {
  font-family: 'Overlock';
  font-style: normal;
  font-weight: 900;
  src: local('Overlock-Black'), url(http://themes.googleusercontent.com/static/fonts/overlock/v2/l1JcQwKaHzEH7sWBQ9t-7obN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
  font-family: 'Overlock';
  font-style: italic;
  font-weight: 900;
  src: local('Overlock-BlackItalic'), url(http://themes.googleusercontent.com/static/fonts/overlock/v2/iOZhxT2zlg7W5ij_lb-oDoPAkl-0rCkX4F4zIO7lYWE.woff) format('woff');
}

@font-face {
  font-family: 'Overlock';
  font-style: normal;
  font-weight: 700;
  src: local('Overlock-Bold'), url(http://themes.googleusercontent.com/static/fonts/overlock/v2/EcjpF2hW5gSZ4M16YLdG84bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
  font-family: 'Overlock';
  font-style: italic;
  font-weight: 400;
  src: local('Overlock-Italic'), url(http://themes.googleusercontent.com/static/fonts/overlock/v2/pYVxOAQWse7sQP47UJIxixsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

And this on a wiki page:

<div style="color: white;">

<span style="font-family: cpmono; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: fontin; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: garton; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: gondola; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: idolwild; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: imfell; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: josefin; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: megalopolis; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: OrbitronMedium; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: pixiefont; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: prociono; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: speakeasy; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: tangerine; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: titillium; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: veggieburger; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: yanone; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: Marck Script; font-size: 2em;">Lorem ipsum dolor sit amet</span>




<span style="font-family: Overlock; font-size: 2em;">Lorem ipsum dolor sit amet</span>

<span style="font-family: Overlock; font-size: 2em;">''Lorem ipsum dolor sit amet''</span>

<span style="font-family: Overlock; font-size: 2em;">'''Lorem ipsum dolor sit amet'''</span>

<span style="font-family: Overlock; font-size: 2em;">'''''Lorem ipsum dolor sit amet'''''</span>

<span style="font-family: Overlock; font-size: 2em; font-weight:900;">Lorem ipsum dolor sit amet</span>


</div>

The results look like this:

Fonts firefox Fonts chrome

Firefox works fine, while Chrome displays some fonts quite horribly. The top fonts are supposedly hosted on wikia, while the bottom ones are from google. I don't have them installed on my pc. --IK Talk 21:45, August 2, 2012 (UTC)

You're not supposed to use the @font-face statement! Google would tell you if you should. Instead they tell you to use an @import-statement. That import statement outputs the @font-face statement. Google performs browser-detection and outputs different @font-face statements to different browsers. So if you include the statement by hand you miss out on that and get a version that works only in a limited set of browsers. --  pecoes  21:59, August 02, 2012 (UTC) 
How do you know we're not supposed to use it? Is there a manual for that sort of thing? --IK Talk 22:31, August 2, 2012 (UTC)
They give clear and easy to follow instructions on the google fonts website. If you choose not to follow them, you will probably get unexpected results - if any. You can check for yourselves if you like: Call the URL from the @import statement with different browsers and you will get different results. They clearly perform browser detection and deliver the fonts in different formats. --  pecoes  23:02, August 02, 2012 (UTC) 
Don't look at me, clear and easy instructions are the hardest to follow :P --IK Talk 03:35, August 3, 2012 (UTC)
Here's a demo page, where I used Cuprum and Share: w:c:pecoes:Docs/Symbols/Railgun
The CSS looks simply like this:
@import url(http://fonts.googleapis.com/css?family=Cuprum:400);
div.content p, div.content ul {
    font-family: Cuprum,Arial,Helvetica,sans-serif;
}
/* etc. */
 pecoes  06:02, August 03, 2012 (UTC) 
Your examples look just as pixelated in Chrome. Perhaps there's a text anti-aliasing setting I haven't found yet. --IK Talk 06:50, August 3, 2012 (UTC)

(Reset indent) Oh. I'm sorry to hear that. They look fine in my Chrome (Win7):

Jsdoc

But I've already heard that web fonts are still a bit hit and miss... --  pecoes  07:04, August 03, 2012 (UTC) 

Advertisement | Your ad here

Around Wikia's network

Random Wiki