I've got a Typekit font running on my website, but it get's cut-off. Doing nothing unorthodox — just imported it.
Might be best to just show it, so check out the link below.
Check the the last "t" in this photo.
Related
I have a few websites that use Font Awesome (various versions) and in general have no problems. A user is reporting that they aren't seeing the icons. In other cases when there are font loading issues, I have seen empty rectangles instead of icons, but in this case it's just empty space.
I have checked one my sites that gets the icons via a CDN and one where I host them myself. They both work for all users except this one (as far as I know), so I don't think it's a hosting issue. The empty space without icons or the empty rectangle seems like an important clue - any ideas?
Turns out it was the Group Policy within an organization. I figured it had to be something on the user side, but just couldn't figure out from the outside
(Discaimer: I only learned to code alone and upload some contents.)
I retrieved a symbol for a running person and used the code to build an html file to upload. The problem is that the image appears in different ways in different browsers.
A temporary mwe example.
direct view in my site ramoneando.com
code snippet:
<h1><span style="font-family:'Segoe UI Symbol';color:black;font-size:40px;">🏃</span>runner</h1>
(Desired) Image on local browser.
Why does this happen and how can it be avoided?
I actually am OK with the variants. The worse thing is that some look to the right and others to left. I would prefer to remain with the first image, in dark filling and looking to the right.
The problem is that not every computer has the font Segoe UI Symbol installed, so the ones that don't just display the character with code 🏃 in the default font.
For example, this is what the snippet looks like on my computer
(It used the font Unicode Upper, if you're interested.)
So what you can do is any of the following:
Accept that the "Man running" symbol looks differently in different fonts and keep it the way it is
Use Segoe UI Symbol as a webfont (this may be overkill for displaying just one icon)
Or make a screenshot of the icon and turn it into a png file.
Strange bug I fixed once in the past but did not write it down/document it/report it so now I'm lost in the same workframe.
So, it's an Angular 2 app, the content is hardcoded html, no Angular binded variables, data banding or similar.
The bug show up on Chrome, not on Firefox.
If I refresh 10 times in a row, the content will show up sometimes and won't others, there is no pattern or clues about it.
Once the content is hidden, if i change whatever element property, will show up all the content instantly.
I have attached a gif which explains the bug clearly.
Thanks for any idea/suggestion/help :)
EDIT 1:
I just added 2 pictures of the css computed, one with Bootstrap 4 and other without the framework, same result.
Not related at all to Angular or any stuff like that.
I am importing a font from the GoogleFonts page. If I download this font, I get TTF format, which is having a bug on Chrome and does not work properly, but if I link to their server, it's using WOFF2 format.
See this picture attached which it shows the different formats for the same font.
In my website, I want my header to use the 'Tw Cen MT Condensed Extra Bold' font. However, I am only able to create a font using 'Tw Cen MT Condensed' even with adding the bold effect, it does not look the same. I created the banner in photoshop and now I want to replicate the text in CSS.
Below is the link to my current code on Fiddle. Below that is an example of the text I want to create via Photoshop.
Also, is there a way so that I can include the same pattern from my background onto the text?
If all else fails, I could just upload the text itself as an image onto the website, but I would only do that as a last resort.
Thanks.
Link to Fiddle
Banner I want to create
Your going to need to find a web font version of that font for the best results, you can google for it or if the license for the font allows you to create one you can do that.
A good one is
http://www.fontsquirrel.com/tools/webfont-generator
And you'll have to include those files alongside your html and css to load it, otherwise someone who doesn't have the font won't be able to see it and the system will default to a different font.
Unfortunately, it won't work because the font is "non-standard"--as has already been explained.
To get the look you want, create the text banner you want in your image editor (Photoshop?) and save it as a ".png" image file, directing Photoshop to "keep transparency" (I'm using a different image editor, so the command wording will probably be different in Photoshop). To minimize file size, set the image frame bars as close to the font as you can (the more area a ".png" covers, the greater the file size--clear space included--and the size difference seems to increase exponentially [by square]).
All you'll have left to do is manipulate the position of the text banner in the div (float, padding, margin, etc.).
I know this is isn't the answer you want, but it works--and you don't have to worry about contingency code for different browsers, script blockers, etc. (you still have to code for the few who still block images and for accessibility standards, but IMHO it's more effective--and cleaner--than writing contingency code and having to allow for the variability between this font and the widest/narrowest contingency font in your designated family.
At least one part of your page will render the same in just about every browser.
I have a few links that are slightly smaller (at their bottom part) than the rest of the text and I don't understand why is that and what I did wrong that could have caused this.
The problem exists here on following links: github, link, email, comment and lab.
If i move the list outside of #top_container, then the size becomes normal and the weird spacing at the bottom of these links disappears.
Does anyone have an idea of what I did wrong? Thanks.
What you see is, actually, an optical illusion generated by the contrast between white and red fonts. Also, you use bold fonts for links which only add to the impression that these fonts are smaller. Try changing their colors and weight.
I've uploaded a screenshot of a fragment of your page. That line can be used as a base to compare a little more accurately these fonts. Hope it helps.
EDIT. I use Firefox. Maybe in other browsers bold fonts are rendered a little different and the discrepancy is real (not an optical illusion as I've supposed the first time).