I'm building a new website for a client here - the embedded webfont displays just fine in Safari & Chrome (MacOS)... but only on the home page under iOS. On subpages in iOS, it defaults to Times Roman. The webfont files are located in the root.
Stumped. Any help? Here's my CSS:
/**
* #license
* MyFonts Webfont Build ID 3124015, 2015-11-11T18:29:33-0500
*
* The fonts listed in this notice are subject to the End User License
* Agreement(s) entered into by the website owner. All other parties are
* explicitly restricted from using the Licensed Webfonts(s).
*
* You may obtain a valid license at the URLs below.
*
* Webfont: Tiki-Solid by Pelavin Fonts
* URL: http://www.myfonts.com/fonts/pelavin/tiki/solid/
*
* Webfont: Tiki by Pelavin Fonts
* URL: http://www.myfonts.com/fonts/pelavin/tiki/regular/
*
*
* License: http://www.myfonts.com/viewlicense?type=web&buildid=*******
* Licensed pageviews: 10,000
* Webfonts copyright: Copyright (c) 2011 by Daniel Pelavin. All rights reserved.
*
* © 2015 MyFonts Inc
*/
/* #import must be at top of file, otherwise CSS will not work */
#import url("//hello.myfonts.net/count/2fab2f");
#font-face {font-family: 'Tiki-Solid';src: url('webfonts/2FAB2F_0_0.eot');src: url('webfonts/2FAB2F_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2FAB2F_0_0.woff2') format('woff2'),url('webfonts/2FAB2F_0_0.woff') format('woff'),url('webfonts/2FAB2F_0_0.ttf') format('truetype');}
#font-face {font-family: 'Tiki';src: url('webfonts/2FAB2F_1_0.eot');src: url('webfonts/2FAB2F_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2FAB2F_1_0.woff2') format('woff2'),url('webfonts/2FAB2F_1_0.woff') format('woff'),url('webfonts/2FAB2F_1_0.ttf') format('truetype');}
h1, h2, h3, h4, h5, h6 {
font-family: Tiki-Solid;
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: 4px;
line-height: 80%;
}
Look at your inspector. The font files are located at the root, but they're being looked for (and not found) in a subdirectory.
Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.damonsglendale.com/new/lunch/webfonts/2FAB2F_0_0.ttf
Rather than referring to them relatively, you could resolve this issue by specifying the entire path.
Related
I am using a custom web font from a type foundry, called herbier, that is made up of characters.
How can i view this font on all browsers?
Chrome works fine, but Safari and iOS turn the type into numerals.
this is an example of the font working on safari from the original website
I am using amazon aws to host this site.
I have looked up many explanations.
changing the display: swap, text to italic, redownloading the text files, urls i use link to the fonts uploaded to my domain, i tried using text-rendering: optimizeLegibility and downloaded the web kit so i would have all svg, woff, woff versions of this font etc etc.
The specimen file has said ' The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings.'
Is there any simple way to solve this?
Example code for a different font that works :
#font-face {
font-family: Director-light;
src: url('https://s3.console.aws.amazon.com/s3/object/www.MYWEBSITE.net?region=eu-west-1&prefix=Director-Light.otf'); src: url('https://s3.console.aws.amazon.com/s3/object/www.MYWEBSITE.net?region=eu-west-1&prefix=FT88-School.ttf'); }
#font-face { font-family: Director-light; font-weight: bold; src: url('Director-Light.otf');}
h3 {
font-size: 15px;
color: navy;
font-family: Director-light;
}
The font i am using at the moment :
#font-face {
font-family: 'hershey-noaillnoaillesherbier';
src: url('hershey-noailles-herbier-webfont.woff2') format('woff2'),
url('hershey-noailles-herbier-webfont.woff') format('woff');
etcc etc
}
In my Ruby on Rails 6 Apple Color Emojis don't work on Firefox(macOS&windows10).
I had imported the font:
#import url(//db.onlinewebfonts.com/c/5ab304ade0d4f62d027d12464ca69443?family=Apple+Color+Emoji);
and they started to work!
Now I want to have them locally in my app.
I found on google that it is a common issue and there is even a nice solution to fix that solution by Nick Galbreath.
// define a new font face that just deals with emoji
#font-face {
font-family: "color-emoji";
src: local("Apple Color Emoji"),
local("Segoe UI Emoji"),
local("Segoe UI Symbol"),
local("Noto Color Emoji"); }
// add it *after* the serif, sans-serif or monospace
// ending default.
body {
font-family: your-font, sans-serif, color-emoji;
}
So I prepared #font-face for first font "Apple Color Emojis" like this:
#font-face {
font-family: 'AppleColorEmoji';
src: asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.eot');
src: asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.eot?#iefix') format('embedded-opentype'),
asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.woff') format('woff'),
asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.woff2') format('woff2'),
asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.ttf') format('truetype'),
asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.svg#Apple Color Emoji') format('svg');
}
Files are in app/assets/fonts/color-emoji/AppleColorEmoji and when I try to use my brand new #font-face like font-family: 'AppleColorEmoji'; guess what happen?
Yes, they don't work.
Any idea what I am doing wrong?
I got such error in a console:
downloadable font: rejected by sanitizer (font-family:
"AppleColorEmoji" style:normal weight:400 stretch:100 src index:0)
source: http://localhost:3000/assets/color-
emoji/AppleColorEmoji/AppleColorEmoji-
3ec445c87ae85d4ae8c4fdc2e7f5dfbe85e755b057c254af9e0f36a7cc6924e2.eot
I m trying to make media queries with bootstraps. I put this in my application.css.scss file but that doesn't work :
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require 'masonry/transitions'
*= require_tree
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome";
$backgroundNav : #ffffff;
$backgroundBody : #E9E9E9;
$red : #FD0E48;
#media screen and (max-width: 770px){
.body {
background-color: red;
}
}
body {
background: $backgroundBody;
}
What should i do in order to make the query to be detected ?
Application.css.scss is a manifest file and you should define which files you need to require.
If you want to compile codes in your application.css.scss you should add = require_self in top of your application.css.scss
I believe you have the wrong selector.
.body {
background-color: red;
}
.body selects an elements with the class body, like <div class="body">foobar</div>
You probably meant to select the body element:
body {
background-color: red;
}
Also, put your #media styles after the "normal" ones.
body {
background: $backgroundBody;
}
/* responsive body styles */
#media screen and (max-width: 770px){
body {
background-color: red;
}
}
Here's the fiddle - resize the window to see the change.
And since RoR has SASS support, why not use it?
body {
background: $backgroundBody;
#media screen and (max-width: 770px){
background: $backgroundBody;
}
}
First of all your CSS in the media query is wrong.
It should be:
body {
background-color: red;
}
and not .body as it will search for element that has class "body", example:
<p class="body>
content
</p>
Secondly try to write your media queries (#media styles)after your general css towards the end of the files, i think that should fix the issue.
Hope that helps :)
Right now i have tried the documentation, the tutorials, but looks like there's no implementation for this, even i have been trying to use the QFontDataBase to add it to the App, but it just crashes trying to instantiate it.
I had luck with the Webviews, but it is not what i need on my app.
The last thing i have made is trying to write the html content inside the Label, but yet not luck:
Label *label = new Label();
label->setText("<html> <head> <style>#font-face { font-family: 'AmaticSCRegular'; src: url('local:///assets/fonts/amaticsc-regular.eot'); src: url('local:///assets/fonts/amaticsc-regular.eot') format('embedded-opentype'), url('local:///assets/fonts/amaticsc-regular.woff') format('woff'), url('local:///assets/fonts/amaticsc-regular.ttf') format('truetype'), url('local:///assets/fonts/amaticsc-regular.svg#AmaticSCRegular') format('svg'); font-weight: normal; font-style: normal; } body {font-family: 'AmaticSCRegular'; font-size: 3em; color:#777777; text-align: center;}</style></head><body>Center + Crop</body></html>");
The whole thing works, except the font-family.
The fonts files, are in the assets/fonts folder of the project.
The QML code is the same as the TextStyle of the Blackberry 10 Cascade Documentation. (http://developer.blackberry.com/native/documentation/cascades/ui/text/styles.html)
Any idea?
Custom fonts in Cascades are only supported on SDK 10.2.
With deployment of that version in Q4 2013 or Q1 2014, you should not rely too much on that feature.
Don't forget that the presentation layer (ie. Cascades) is proprietary, and you can't usually mix Qt and Cascades classes. (edit: that's why problems with QFontDataBase, I think)
See that post from BlackBerry DevBlog
I am trying to override some of the default variables provided by bootstrap, particularly some default color and font settings, but only a few them seem to be taking effect. Here's the top part of my custom.css.scss:
$myOrange:#f89406;
$myBlueDark: #304269;
$myBlue: #91BED4;
$myBlueLight: #D9E8F5;
$myWhite: #eee;
$myGrayBlue: #43464C;
/* colors */
$linkColor: $myBlueDark;
$navbarBackground: $myBlueDark;
$navbarBackgroundHighlight: lighten($navbarBackground, 10);
$navbarLinkColor: darken($myOrange, 10);
$navbarLinkColorHover: $myOrange;
$bodyBackground: #000;
$dropdownBackground: $myBlueDark;
$dropdownLinkColor: $myOrange;
$hrBorder: $myBlue;
$heroUnitBackground: lighten($myOrange, 20);
$dropdownLinkColorHover: $myOrange;
/* typography */
$sansFontFamily: 'PT Sans Narrow', 'Lucida Grande', serif;
$baseFontSize: 16px;
#import 'bootstrap';
// ... rest of the css ....
Here I have specified values for a few bootstrap variables and expect the font to be be the specified one and the link colors to be the values I've set them to.
However, I've noticed that only a few of these values work. E.g. the font on my page still stays at bootstrap default (Helvetica Neue) but the navigation bar colors change to the correct values.
I've searched around on the internet but none of the solutions I found worked. There was an issue logged which resembles this problem, but it has since been closed: https://github.com/thomas-mcdonald/bootstrap-sass/issues/102
I would go ahead and comment on that thread, but I just wanted to make sure that I am not missing something.
Another thing to notice here, when I explicitly do this later in my custom.css.scss:
#mixin default_font {
font-family: "PT Sans Narrow", "Lucida Grande", sans-serif;
font-weight: 400;
}
body {
padding-top: 60px;
background-color: #D9E8F5;
#include default_font;
}
The fonts show up fine. I am specifying background-color here because of the same problem.
I am using bootstrap-sass v2.0.3. Is there something I am doing wrong or missing?
Thanks.
While I was working on a demo app to reproduce my problem: https://github.com/verma/bootstrap-sass-tests I restarted the rails development server.
This seems to have fixed the issue. I am not really certain if this is a permanent fix, so I will wait before I mark this question as answered.
Removing the navbar-inverse style, from the class attribute in the header element, may fix the problem.
Use for example:
<header class="navbar navbar-fixed-top">
Hmm, I've had luck using this for fonts and link colors:
$baseFontSize: 17px;
$baseFontFamily: 'Crete Round', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$baseLineHeight: 20px;
$altFontFamily: 'Open Sans Condensed', Georgia, "Times New Roman", Times, serif !default;
$headingsFontFamily: 'Alfa Slab One'; // empty to use BS default, #baseFontFamily
$headingsFontWeight: normal; // instead of browser default, bold
$headingsColor: $blueDark;
$linkColor: $blueDark;
The variables that you can use can be found in the _varibles.scss file.
What does your application.css.scss file look like? I ran into a similar problem and found that I had another stylesheet overriding my base font, which I didn't want. Make sure you don't have other files causing overrides (such as scaffolds.css) and make sure you do not have the require_tree option enabled.
I appended !important to the font-family for body and that fixed my issues.
Context:
I had a similar issue for my Rails 5 app where my custom fonts (.otf) was not applied. In the developer console, I see the body font applied as "Helvetica Neue" what I think is coming from bootstrap-sass.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
...
when I unchecked the font-family: "Helvetica Neue", I see my fonts as expected so I know the asset pipeline for my custom fonts was working correctly.
prepending !important seemed to have fixed my issue.
body {
font-family: 'Din-Light', 'Helvetica', 'Arial', 'sans-serif' !important;
}