So I'm trying to use a Google Webfont on a GAE site. The font works when I browse the site locally, but after I deploy and go to the .appspot.com address, the font no longer works and defaults to "cursive".
Here's the relevant code:
CSS:
.logo {
font-family: 'Nothing You Could Do', cursive;
}
HTML:
<head>
<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
</head>
<a class="logo" href="/">Project</a>
I believe it is a browser issue.
Quoting from here:
What browsers are supported? The Google Web Fonts API is compatible
with the following browsers:
Google Chrome: version 4.249.4+ Mozilla Firefox: version: 3.5+ Apple
Safari: version 3.1+ Opera: version 10.5+ Microsoft Internet Explorer:
version 6+
What do unsupported browsers see? If someone using an unsupported
browser visits a page that uses the Web Fonts API, then the text is
displayed using the next available font in your CSS font stack.
Related
I'm currently creating my Web Development Services Website and I created it using create-react-app. The website works properly in Desktop and Mobile Phone. The only problem I have is that the website does not show up in iPhone 6S (neither Chrome or Safari). I was looking trough internet but I couldn't fin any answer to it. I hope to get any answer. I honestly do not know where to start, but all of the code is located in this github repo: https://github.com/luisenriquecgongora/oracliom-website
The website is hosted in AWS S3, and the content is delivered using CloudFront and Route 53. The website is www.oracliom.com
I already tried to include this header in the cache:
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
I also tried cleaning the cache of the mobile phone.
THE FULL CODE IS LOCATED HERE: https://github.com/luisenriquecgongora/oracliom-website
try installing :
npm i core-js raf
then in index.js
import 'core-js/fn/number/is-nan'; import 'core-js/es7/'; import 'core-js/es6/'; import 'raf/polyfill';
ref: https://github.com/facebook/create-react-app/issues/4844
I am currently working on my portfolio website with React. I am making the project responsive, so I added the following meta tag to my index.html file within the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The responsive design works on my phone and in Google Chrome dev tools under responsive; however when the page is in desktop view the responsive design does not work. I am working with Google Chrome Version 70.0.3538.110 (Official Build) (64-bit). I am attempting to integrate a react-strap menu tab when the device is a max-width of 800px. Again the react-strap menu is visible on my phone.
navbar component including npm package react-responsive
responsive CSS styling with media queries
Nav bar working with responsive dev tools
Nav bar not working in normal google chrome
Here is my code snippet how I am including the favicon in my personal website which was built with Angular JS.
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico"/>
With this code, the favicon is appearing on Chrome and IE browsers. But the favicon is not appearing for Angular JS templates on Firefox browser.
I looked at the similar websites made with Angular JS, the same issue is repeated.
Please refer the following website,
https://www.madewithangular.com/#/
Thanks.
Cache Manifest doesn't work in Android Browser. It works fine in Chrome on Android, Safari on iOS and all main desktop browsers (Not IE).
My index.html starts like this:
<!DOCTYPE HTML>
<html manifest="cache.manifest" lang="en-GB">
<head>
My cache.manifest starts like this:
CACHE MANIFEST
# v1.0.1 - 2013-10-23
# Cache manifest created by Jez D
CACHE:
index.html
styles.css
scripts.js
As stated, this works fine on all relevant browsers except Android Native browser.
I have looked here, here and here but to no avail.
Android version is 4.2.2
What can I do to correct this?
The answer you're looking for is in the following article. At least, it did it for me.
http://www.html5rocks.com/en/tutorials/appcache/beginner/
Assuming you're using Apache as your web server, you need to make it serve your .manifest file in the correct content-type by adding the following line to your httpd.conf file.
AddType text/cache-manifest .manifest
By doing this and restarting my Apache server, it fixed the problem under Android's native browser. (v4.1.2) As you mentionned, other browsers were working fine without this line in my config file.
Hope this helps!
I am new in JQuery Mobile. I really like it but I have 2 basic questions:
1- Can I test the app OFFLINE in my iPhone?
I know how to see the app when I am with an Internet connection even how to create the icon. But I don't see how to see the app i I don't have an Internet connection.
2- I suppose I can sent the html and css made with jQuery Mobile to Apple as any app. And it will work offline. Is that right?
Is there anyone with experience who have done apps with JQuery Mobile and are working in the app store?
Yes, you can have a jQuery Mobile page completely offline. Download the necessary libraries to your device. For the example I used the following
jquery-1.8.0.min.js
jquery.mobile-1.2.0.min.js
Additionally you need the jQuery Mobile CSS structure file
jquery.mobile.structure-1.2.0.min.css
Then use the theme roller to create your own CSS (or without changes just use the default jQuery CSS) and download it including the icon sets to your device. For the example I used this CSS name
taifun.min.css
The icon sets are stored in the subdirectory /images.
example code
<!DOCTYPE html>
<html>
<head>
<title>Offline</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="taifun.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="content">
<h1>I'm a jQuery Mobile offline page</h1>
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
</ul>
</div><!--/content -->
</body>
</html>
screenshot HTC Desire
#Brice Favre is right - testing 'offline' could be achieved by hosting your app on a LAN and accessing it using your iPhone through Wifi.
If you 'host' the app using e.g. PhoneGap, and include all the libaries (jQuery, jQuery Mobile) and CSS as part of your application, then your app will function just fine without an Internet connection - many apps work this way. See this PhoneGap tutorial.