I'm using Dreamweaver CS6 for coding and i am making a web site right now.
I've got a problem about fonts. Usually, when i add a font to the Dreamweaver font library and use that font in CSS i can't see that font used on my web site. I mean font doesn't work. Even if that font is a default Adobe Edge Web Font.
Can you guys please help me fix it?
Not sure of your question, but I find that Dreamweaver CS6 doesn't recognize the web fonts that I add through the Web Fonts box that will become part of the font family.
I attach the font's CSS sheet and add the font's name onto font-family tag, but fonts on the corresponding web page that I'm designing don't change! Very frustrating!
I think this is the answer: CS6 adds the wrong name to the font-family in the Font Families text box. So, open that particular font's CSS sheet and copy the name of the font from the line in the font CSS sheet.
For example, ("font-family: 'Special_font_regular';). You would, therefore, add "Special_font_regular" (font name) to the tag font-family. This is what you would have in your CSS code under your class or id list of tags: font-family: "Special_font_regular".
Now the new font will appear on your web page that you are designing.
Related
Im working on a HTML/CSS start page for a linux program I'm running. All my font-families were set to Arial, Verdana, Sans-serif in the css. When opening the page in Chrome or Firefox, the fonts displayed properly. Even running the windows version of the app with the same start page displayed correctly. But for whatever reason, the linux version displays the start page with all fonts replaced with courier. Its a very jarring font and I cant seem to get Linux to not default to it on this program. Ive tried changing the fonts in the css doc to Helvetica, or adding single or double quotes around each font family name, but nothing seems to change this. Does linux have some weird font quirk with css that I don't know about? any info is helpful.
Try using the Google Fonts API to ensure font consistency across platforms.
Find the fonts that you are interested in on Google Fonts, if they are available. Here are the steps for how to import them into your HTML document (internet connection required):
Go to Google Fonts
Use the search bar in the top right corner to find one of your fonts
Press the Plus (+) button next to your font
Repeat steps 2 and 3 for all of the fonts that you need
Click the Families Selected toolbar at the bottom of your screen
Select Embed
Select Standard
Copy the code block (highlighted in grey) and paste it within the <head> tags of your HTML document.
Specify the fonts that you want to use as instructed by the site (under Specify in CSS)
I have a case where I've got an old web page with some ancient languages with some older fonts that are being used and the fonts don't appear to be embedded properly and I'd like to render the page such that it shows the proper fonts that it is requesting.
In this case, I have the following example of code in the html:
<span style="font-size:24.0pt;mso-bidi-font-size:10.0pt;
font-family:Phoinike;color:blue">EXAMPLE<o:p></o:p></span>
I also currently have the font phoinike.ttf active and showing in macOS Font Book as Phoinike Regular:
I have some other languages that have the seeming exact same scenario and I have inserted the fonts and they are rendering perfectly (for example, some Egyptian Hieroglyphics, etc.), yet no matter what I do here, this particular font in both Chrome, Safari and Firefox are not rendering.
Any ideas on what one can do to help the browser / HTML renderer to understand that it can use certain fonts when all appearances are seeming to lead to the font being active? I'm having to believe that somehow the names are different in some way that the renderer uses to properly detect the font, but I'm drawing a blank...
I have the following HTML page:
<style>
body {font-family: BlinkMacSystemFont;}
</style>
text
When viewed in Chrome on OS X 10.11, text is displayed in the system font (supposedly San Francisco with El Capitan and Helvetica Neue with Yosemite). When I save the webpage as a PDF and open it in Preview, I cannot select the text and highlight by clicking and dragging, and instead the entire page is selected as if it is an image. I've checked the PDF properties using Adobe Reader and there are no embedded fonts used. How can I fix this to be able to select individual text? Is there any way around this?
OpenType fonts have a concept of permissable usage. This defines how/if the font can be embedded and used. Some fonts allow the entire font to be embedded and redistributed. Some fonts allow a subset of the glyphcs to be embedded, which is useful when a document only uses a small number of glyphs in a unicode font. Some fonts only allow a rasterized (bitmap) reproduction of the glyph. Some don't allow any embedding. Tools that produce PDFs and the like must follow the rules, or could face legal action from Apple. I certainly wouldn't want to be on the receiveing end of that.
I suspect that the OSX fonts are of the category that only allows rasterized embedding. Your best bet is to find another font that doens't have this restriction.
I am using this great font from Fontsquirrel, Munro. (http://www.fontsquirrel.com/fonts/munro)
I wanted to use this font in a webpage of mine. I've put the .ttf file in a map named 'fonts' and referred to it in CSS.
nav a{
background:#9cf2e6;
display:inline-block;
color:#0;
text-decoration:none;
font-size:15px;
font-family:'Munro';
margin:13px 3%;
padding:7px 2%;
}
Then I noticed something. The O's in my webpage are filled. As you can see it shouldn't do this, because it did not do so in Photoshop or the webpage from Fontsquirrel. Also I tried to modify the font in Glyphs but there seems to be nothing wrong with it there.
My question: how will I undo the filled letters in this font? Is this a problem because it ain't a webfont from Typekit or Google fonts?
Thank you so much for all the help I can get.
I'm unable to reproduce this on Windows 7 (Chrome, Firefox, IE) with Munro installed locally. The letters display just fine (see image below). And I think that's the bigger issue: fonts not made for the web are likely to be rendered very differently across browsers and platforms (if at all). If you want to make sure these buttons look the same for all your users, stick to the images you created with Photoshop (and perhaps save them as PNG-8 with transparency rather than PNG-24 to shave off some kilobytes).
Technically, you can turn any TTF file into a web font, using FontSquirrel's Webfont Generator, for example. The font's license has to allow this, of course, because you'd essentially be redistributing the font. Just placing the TTF file in a /fonts/ folder and using font-family: Munro;, however, is not going to cut it, and only works for you because you have previously installed the font on your computer.
If I have, say, the Ubuntu font installed on my computer and I visit a webpage that references it in its stylesheet, my browser will not bother downloading it from the webserver, but instead loads it from my hard drive (or memory), which saves bandwidth and is much faster. I've also found that having a font installed locally can actually make it render differently than when it's loaded as a web font (e.g. WOFF).
So yes, it probably is a problem because this particular font is not very web-friendly, but even with web-friendly fonts, like those available through TypeKit or Google Fonts, you can still run into rendering differences (most noticeably between Windows and Mac). While it may be a fun exercise to try and recreate the images using just CSS, you're probably better off saving these buttons as images, or using a font that is web-friendly. Something from the Monospace category in Google Fonts, perhaps?
http://i.stack.imgur.com/9SuMr.png (Windows 7, Chrome)
I got a psd from my client using Museo Slab 900 and Museo Sans. The fonts are not in my computer. They are paid fonts. So I don't think I can use font face. Does that mean I have to make it an image? It there any alternative to solve this problem?
Museo Slab Webfont. FontSquirrel seem to have a free web font license. Make sure you keep all licensing with the typeface intact and you should be fine.
The license says:
"Direct Linking or Embedded Opentype Files with the #font-face CSS property (ONLY for FREE fonts)
If the font is a free font ($0.00 license fee), you may use this font for Font-Face embedding, but only if you put a link to http://www.exljbris.nl on your page and/or put this notice /* A font by Jos Buivenga (exljbris) -> http://www.exljbris.com */ in your CSS file as near as possible to the piece of code that declares the Font-Face embedding of this font."
However, read the license carefully. This might not apply to this specific font, though, I see no reason for it to not considering the font is free to download.
The free version only includes a weight of 500.
Easiest wayGet link of the font you want from Google and add that link in head tag :<link href="http://fonts.googleapis.com/css?family=Ruthie" rel="stylesheet" type="text/css"/><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Chewy:regular|Architects+Daughter:regular"/>and add its name in css : h1 {font-family:'Chewy'}div{font-family:'Ruthie'} I hope you got it.