I've been struggling to create my 1st website in years. Using bootstrap in Dreamweaver.
There is a steep learning curve, made worse because it seems like bootstrap just wants to do what it wants to do.
I want to set up my styles, H1, H2, etc...
So, I added the H1 style like so:
h1 {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black",
"sans-serif";
font-size: 8em;
text-align: left
}
And at first it looks like it works, but as soon as I move to do something else, or check in on my test page, it does back to whatever size it defaulted to.
Preceding it is this:
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe
UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #0A0A0A;
text-align: left;
background-color: #fff;
}
I have piece by piece removed each of this attributes to see what my be over-riding my H1 code, but it makes no difference.
What am I missing?
Experimenting with the rest of the standard styles, h2 through h6 have the same problem. I think P is retaining size but it won't get lighter.
Mind you, the font family assigned to H1 stays. Whatever 4em, 8em, 30em, 100%, 300%, 600%.... That change will not present itself on a refresh of my test page and it will disappear from the Dreamweaver split view.
Thanks in advance.
Update: for #Isherwood
It only displays correctly within the Dreamweaver split screen interface as I change the CSS external sheet.
All this is new to me. It has been more than 8 years since I've built a site from scratch and I've only been member here for a few days.
I am quite the novice. I'm not even sure what you mean by "override styles".
I simply set h1, h2, h3, etc... in the HTML body portion around the text I want effected. I declare the font family, size, etc... in the external css as shown above.
But give me a while to see if I can figure out how to make a snippet as you requested.
Meanwhile, I do have this loaded online to see if that made any difference, in a folder on my husband's site.
https://www.walterbeckham.com/testingzone/one.html
Related
It's screenshot of the code I am working with. I want to understand the font-family declaration syntax and in what sequence it works
Here's the code:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Helvetica Neue", Arial, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
color: #333333;
margin: 0;
}
Basically I want to understand the font-family declaration syntax
The font-family property can hold several fonts. If the browser does not support the first font, it tries the next font. If the browser supports "Segoe UI" it will be "Segoe UI" otherwise it moves to next.
So as a best practice order your fonts in the order you need.
The font family is applied in order from the font you entered first.
For example, if a user's PC does not have a font, it is applied in order from the very beginning.
if there is a corresponding font, the fonts that follow the applied font will not be applied.
If the font name contains spaces, use quotation marks to indicate that it is a single font.
I'm not good at English, so I don't know if I delivered it correctly, but I hope it helped.
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 am using various versions of Halvetic on this website. For some reason they all display fine, except for one which is fuzzy. I have noticed that one some browsers it is better or worse - however, on my iPhone it is really crisp and perfect?
Are there any suggestions on how I can get this font to display correctly in modern browsers on a desktop (chrome/firefox etc)?
This is what I see:
URL: http://52.64.135.79/wordpress/company-overview/
Relevant CSS rules I can see are as follows. Is there something I can do to fix this?
h4, .h4 {
line-height: 21px;
}
h4, .h4 {
font-size: 16px;
}
h4, .h4 {
font-weight: 700;
}
h4, .h4 {
font-family: "Helvetica Neue LT W01_55 Roman", sans-serif !important;
margin-bottom: 5px;
padding: 5px 0 0;
letter-spacing: 0.00em;
}
body {
-webkit-font-smoothing: antialiased;
}
Ultimately the issue here was because the font itself has a separate character set for each different font weight.
The CSS was applying a font-weight of 700 to a font which was meant to be rendered at 400. The fix was to download the heavier weight version of the font, rather than allow the browser to create an artificial "bold" version.
I know that Alt is used for images in HTML, but is there a way to apply it to text via CSS?
Example:
input { color: #62161e; font-size: 25px; font-family: Lintel; }
So say Lintel does not display properly in some browsers. Is there an alt option to display Helvetica or something?
In CSS, you can specify a list of font families to follow and the browser will use the first one that it supports. So if you want to display Helvetica if Lintel is unavailable, you would simply do this:
font-family: Lintel, Helvetica;
Remember that if the font family has a space in it, you need to surround it in double quotes, like with the line I use for my website:
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
You can provide multiple fonts and the browser will pick the first available font.
Yes, you can chain fonts.
font-family: Lintel, Helvetica, Arial, sans-serif;
If you are defining both font-size and font-family I suggest you use the shorthand version:
font: 25px Lintel, Helvetica, Arial, sans-serif;
You can add more to this as well:
font: (weight) (size)/(line-height) (family);
The only two that are required are size and family.
font: bold 30px/25px Lintel, Helvetica, Arial, sans-serif;