Question

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);

Was it helpful?

Solution 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;}

OTHER TIPS

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');
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top