Frage

Working on a website for a client - long story, but I'm not allowed to edit markup, just include an override stylesheet and make tweaks through there.

I need to import a google font, but because of the requirement I can't use the normal embed method. Is there a way to @import a google font inside a stylesheet?

EDIT: To clarify, I've already added the following code with zero success (returns a 404):

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);

War es hilfreich?

Lösung 2

Sure. If you have access to the style sheets just add the code generated by google url directly.

This is the google generated url for the font "Dancing Script": http://fonts.googleapis.com/css?family=Dancing+Script Paste that in a browser address bar and you will be shown the code you need to place in CSS file.

See fiddle: http://jsfiddle.net/David_Knowles/XVMzf/3/

@font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 400;
    src: local('Dancing Script'), local('DancingScript'), url(http://themes.googleusercontent.com/static/fonts/dancingscript/v3/DK0eTGXiZjN6yA8zAEyM2bDH3ri20rYH10B2w3wbVeU.woff) format('woff');
} 

a {font-family: 'Dancing Script',serif,cursive;}

Andere Tipps

The accepted answer is wrong.

Never add the code generated by Google to your own CSS, as Google delivers different CSS depending on your user-agent. Not all browsers support the WOFF format, so never do what is suggested in the accepted answer. See Google Fonts Serving.

To reply to the original question, in case you don't have access to external domains and would like to host the fonts yourself and host the CSS code yourself, you should grab the font files as well as the combined CSS code from FontSquirrel. Here is an example of a @font-face CSS rule that will work on all web browsers:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top