Hi everyone,

 

I've seen a lot of these and know they are very common but I've never actually written any.

 

For example - I am using a font I downloaded from font squirrel in my current site. In Chrome, Safari and Firefox it shows at the correct size, yet in Opera it is far bigger. How do you go about writing even the simplest of browser-specific styles like this. (Ps. I am assuming this is the solution - to write a specific css file for Opera to make the font smaller in this?)

 

 

Any help would be much appreciated.

 

Thank you.

Start your CSS with a reset.

Thanks but I'm afraid that hasn't helped matters.

 

Any other suggestions?

We need to see your code, markup and CSS.

 

There's no reason for Opera to show larger font if you have specified the font size. I use fontsquirrel and have the following sizes in the styles like this:-

/*STYLES FOR @FONT-FACE*/
/*Font from http://www.fontsquirrel.com/fontface/*/
h1.matchbook { font: 40px/44px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 2px; margin: 4px 0; font-weight: bold; } /*40px/44px is size and line-height*/

p.matchbook { font: 24px/27px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 1px; } 

 

follwing the fontsquirrel kit styles:-

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 23, 2010 07:46:26 AM America/New_York */

@font-face {
font-family: 'MatchbookMatchbook';
src: url('Matchbook-webfont.eot');
src: local('☺'), 
url('Matchbook-webfont.woff') format('woff'), 
url('Matchbook-webfont.ttf') format('truetype'), 
url('Matchbook-webfont.svg#webfontilT7vtqy') format('svg');
font-weight: normal;
font-style: normal;
}

Have you got something similar? Opera needs TTF/OTF

Edited November 30, 201114 yr by Wickham

This is my @font-face declaration below followed by the inclusion of it in the body tag. I've also included the '#blurb p' styles (blurb is the section of text I'm styling) - only Opera is showing larger-than-it-should-be font sizes!!

 

@font-face {
   font-family: 'HattoriHanzoLight';
   src: url('../_assets/Hattori_Hanzo-webfont.eot');
   src: url('../_assets/Hattori_Hanzo-webfont.eot?#iefix') format('embedded-opentype'),
        url('../_assets/Hattori_Hanzo-webfont.woff') format('woff'),
        url('../_assets/Hattori_Hanzo-webfont.ttf') format('truetype'),
        url('../_assets/Hattori_Hanzo-webfont.svg#HattoriHanzoLight') format('svg');
   font-weight: normal;
   font-style: normal;
}
body {
font-family: 'HattoriHanzoLight', Tahoma, Geneva, sans-serif;
}
#blurb p {
font-size: 13px;
line-height: 22px;
letter-spacing: 1.1px;
}
#blurb p .large {
font-size: 16px;
color: #8B008B;
}

 

Can you see anything that might be preventing it from showing incorrectly in Opera?

Edited November 30, 201114 yr by Renaissance-Design
Please use the code button or tags to format your code.

Oh and the .large bit is just a class applied to parts of the text that I want displaying slightly larger.

Have you actually set a font-size on the <body> element?

Edited November 30, 201114 yr by Renaissance-Design