CODEWITHSUNDEEP
cssfontsgoogle-webfonts
cyclone200
cyclone200

Reputation: 387

How can I force my website to use a Google font instead of a locally one with the same name?

I'm using for a website the font Oxygen via GoogleFont. However, for webdesign purpose, I downloaded in my computer the Oxygen font via FontSquirrel.

Apparently it's the same, but it looks different and I have size issues. So I was thinking:

Is there a way to declare "I want to use the GoogleFont font and not the font stored in the computer even if it has the same name"?

Because if someone has a totally different font with the same name, there could be a lot of display problems.

EDIT: What about downloading the font on Google's server and hosting it on my website? (The font is 100% free for commercial use.) But why do a lot of websites use Google Fonts if it could be that simple?

Upvotes: 1

Views: 1571

Answers (1)

Kyle Larson
Kyle Larson

Reputation: 46

If you have the web fonts you could host yourself and give them any name you want in the css and avoid the potential of the local font loading.

For example:

@font-face {
font-family: 'myspecialfont';
src: url('oxygen-webfont.eot');
src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),
     url('oxygen-webfont.woff2') format('woff2'),
     url('oxygen-webfont.woff') format('woff'),
     url('oxygen-webfont.ttf') format('truetype'),
     url('oxygen-webfont.svg#oxygenregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family: "myspecialfont", sans-serif;}

Just make sure you're pointing the CSS to the correct path for those files (e.g. if you put them in a fonts folder it'd could be "../fonts/oxygen-webfont")

The main reason people use google is they've optimized it for serving fonts, it takes load off your server, and potentially people have the font cached from google making it load faster. If it's an uncommon font and your server is decent these may negligible.

Upvotes: 1

Related Questions