Forum:How to use google web fonts

So I add to my css file this: @import url(http://fonts.googleapis.com/css?family=Marck+Script&amp;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 Her z 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?
 * -- 18:58, August 1, 2012 (UTC)
 * Oh, thanks a lot! I wonder where did you find url for that font? found --Das steinerne Her z 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&mdash;Embedded Opentype&mdash;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: 

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

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. -- 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. --


 * How do you know we're not supposed to use it? Is there a manual for that sort of thing? -- 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. --