I need a solution.. I am using google fonts on my website, but it is not working in safari, how can I tell the browser to use a different style when the font is not working? Here is my css code:
#import url(http://fonts.googleapis.com/css?family=Pontano+Sans);
h2{
font-family: 'Pontano Sans', sans-serif;
font-size: 15px;
text-transform: uppercase;
}
I just want to have another css rule like this, but without it overriding the above rule:
h2{
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
}
you should use the web-fonts loader capabilities to handle scenarios where fonts are not loaded.
that way, you can specify different styles based on the load state (active / inactive / loading).
see the web-fonts loader reference on loading states (and on github).
Related
How can I apply different styles by the result of computed styles?
This can be done via JavaScript, but I'm finding a CSS only solution.
e.g.
body { font-family: Helvetica, Arial, Segoe UI; }
In above case, I would like to apply letter-spacing: -0.5px only for Arial, not others.
Use this attr:
https://www.w3.org/International/questions/qa-css-lang.en
(I guess CSS can't figure out text's fonts types.
You need to use scss(sass) or JS.)
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
I am trying to generate pdf files using a MadCap Flare project, but the PDF files come out with the wrong font. I am using the latest version of Flare, 2019r2.
I am trying to generate paragraphs using the Flexo fonts from Duotype. All the fonts are installed in the main Windows font directory: C:\Windows\Fonts\DUROTYPE_-_FLEXO-REGULAR_1.OTF. This was accomplished by right clicking on the font and choosing "Install for all users".
An example of the issue is the h2 style. The stylesheet has the following declarations in the default section:
body
{
padding: 0 20px;
}
...
body,
div,
li,
p
{
color: #3b4151;
font-family: FlexoRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
margin: 0.5em 0;
mc-hyphenate: never;
orphans: 2;
widows: 2;
}
...
h2
{
color: #f8193f;
font-family: FlexoBoldIt, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: normal;
font-size: 1.67em;
page-break-after: avoid;
}
The selector I actually want to use is under a #media section with the following declarations.
body
{
padding: 0;
position: relative;
margin: 0;
}
h2
{
color: #f8193f;
font-family: "Flexo-BoldIt", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 9pt;
margin-bottom: 0px;
margin: 0px;
margin-top: 6px;
}
When I define the font-familiy as "font-family: "Flexo", Arial, "Helvetica Neue", Helvetica, sans-serif;" I get output with the Flexo font. However, when I try "Flexo-BoldIt" or 'Flexo-BoldIt' or "Flexo Bold Italic" or various other combinations of quotes and font names I get output with Microsoft Sans Serif. When I try to override the style with an explicit declaration such as
<h2 style="text-align: center;font-family: "Flexo-BoldIt"...">
the output is again in MS Sans Serif.
Adding declarations like
font-style: italic;
font-weight: bold;
doesn't help.
Why doesn't Flare generate output with the correct font? Also, why doesn't it generate output with Arial, as that is installed? If I remove "Flexo-BoldIt" from the font-family I get output with Arial.
Any help would be much appreciated.
Have you added font-face in CSS
#font-face
{
font-family: 'YourFontFamilyName';
src: url(../path/to/font);
}
After that use font like
h1
{
font-family: 'YourFontFamilyName';
}
Also, keep your fonts in project files so you can access it with a relative path easily.
Try this out and give me feedback :)
UPDATE
This is more of a tip for every project similar to this one.
Do not use the system installed fonts because if the user doesn't have that font installed on their system it will be wrong. Always put font files in a project directory and access them like above.
Convert the font file into base64
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
Try this, from https://www.madcapsoftware.com/blog/madcap-flare-tip-use-custom-fonts-flare-outputs/:
The #font-face rule can have “font-family” defined as any name. However, I recommend using the default name seen in Flare. You can find out what name Flare is reading the font by going to the Home Ribbon and selecting the Font dropdown. The reason I recommend this is because if the font name is different than what appears in the dropdown, the PDF outputs will have to point to a different font name than your HTML5 outputs.
The name you show in the example looks like the name on the filesystem, not necessarily what the name appears as in the ribbon.
I'm building a simple landing page here. I'm calling a custom font (Harbour) via #fontface but on Chrome, the title first defaults to a basic font. It takes a refresh for the custom font to appear. Anyone know what's happening here?
You are not declaring the font in any of your elements.
in your base.css; you are declaring those fonts at body:
font-family: 'Trash', Futura, 'IBM Plex Sans', Arial, sans-serif;
you should put:
font-family: 'Harbour';
in the element you want it to open
like:
h1 {
font-size: 2em;
margin: 0.67em 0;
font-family: 'Harbour';
}
I'm testing a page in Internet Exploder 8, and I'm failing to get one of the Google hosted fonts to render the correct weight. Given the following code:
#import url(http://fonts.googleapis.com/css?family=Lato:100,400);
h1{
font-family: 'Lato-Thin', 'Lato', sans-serif;
font-size: 80px;
font-weight: 100;
}
p{
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 400;
}
The paragraph tags renders in 400 weight, but so does the heading. If I change the import line to:
#import url(http://fonts.googleapis.com/css?family=Lato:100);
The heading no longer renders in Lato, even though the 100 weight is still downloaded.
Is there a way round this?
Here's a Fiddle.
It appears that this is a compatibility issue between the way Google serves its custom fonts, and how IE8 would rather them served.
Issue 9 here: https://code.google.com/p/googlefontdirectory/issues/detail?id=9
A workaround is possible if the fonts are stored locally, but that doesn't directly address the problem described in my question.
I downloaded this font
And this is how I include it into my stylesheet:
#font-face {
font-family: "surface";
src: url(fonts/Surface-Medium.otf);
}
And this is how I use it:
#site-header .site-logo a {
color: #00B1ED;
font-family: "surface";
font-size: 40px;
font-weight: bold;
letter-spacing: -1.5px;
text-shadow: 0 1px 5px #000000;
text-transform: capitalize;
}
#site-header .site-logo a span {
color: white;
}
#site-header .site-logo a span:last-child {
font-size: 22px;
}
the problem is that in google chrome it renders really bad:
but in firefox it works well:
Am I Doing anything wrong?
convert the font to embedded Open Type(.eot) and also add .woff for other browser support.
It renders properly in browsers.
Or try this for chrome -webkit-font-smoothing: antialiased;
Most Windows browsers will only render TrueType fonts with any degree of smoothness. OpenType (CFF) generally will not render well with the Windows rendering engine. Not only that but these TrueType fonts must contain hinting data that tells Windows how to place pixels at small sizes. Consider running your OTF through the Font Squirrel Generator to give you all the font formats needed along with the correct CSS code.
The problem here is that I was including the normal style font and then implementing the bold,
For some reason it was working in firefox so it make sense it failed on others, but this:
#font-face {
font-family: "surface";
src: url(fonts/Surface-Medium.otf);
font-style: normal;
}
#font-face {
font-family: "surface";
src: url(fonts/Surface_Bold.otf);
font-style: bold;
}
Made it work in other browsers too
Of corse, the bold.otf file must be included in the used path