How to use google web fonts
79,538pages on
this wiki
this wiki
Forum page
This Forum has been archived
Visit the new ForumsForums: 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.
To contact staff directly or to report bugs, please use Special:Contact.
Note: This topic has been unedited for 294 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)
- Oh, thanks a lot!
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:
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)
- 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)
- 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)
(Reset indent) Oh. I'm sorry to hear that. They look fine in my Chrome (Win7):
But I've already heard that web fonts are still a bit hit and miss... -- pecoes 07:04, August 03, 2012 (UTC)
