I would like to load the contents of a CSS file which will contain the fonts like KaTeX_AMS-Regular.woff2.
So, the CSS file contains the content like file main.css
@font-face{font-family:abcd_AMS;src:url(fonts/abcd_AMS-Regular.woff2) format("woff2"),url(fonts/abcd_AMS-Regular.woff) format("woff"),url(fonts/abcd_AMS-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:abcd_Caligraphic;src:url(fonts/abcd_Caligraphic-Bold.woff2) format("woff2"),url(fonts/abcd_Caligraphic-Bold.woff) format("woff")
so these font file I am downloading at a file path and loading the html like this
destinationFilePath.path will be the path where the contents of css are downloaded. File content will be like:
root --> content --> main.css
root --> content --> fonts --> abcd_Caligraphic-Bold.woff root --> content --> fonts --> abcd_Caligraphic-Bold.woff2 ... and so on
String htmlContent = """<!DOCTYPE html>
<html lang="en">
<head> <link rel="stylesheet" href="${Uri.file(destinationFilePath.path)}"> <meta name='viewport' content='width=device-width, viewport-fit=cover, initial-scale=1'/>
<body style='margin:0;padding:0;};'>
$data
</body>
</html>
""";
The above code works properly in android but it does not read the css font file contents in iOS.
I am using https://pub.dev/packages/flutter_inappwebview package to load the contents in webview.
InAppWebView(
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
mediaPlaybackRequiresUserGesture: false,
disableVerticalScroll : true,
disableHorizontalScroll : true,
disableContextMenu: true,
useShouldOverrideUrlLoading: true,
allowFileAccessFromFileURLs: true,
allowUniversalAccessFromFileURLs: true),
ios: IOSInAppWebViewOptions(
allowsInlineMediaPlayback: true,
allowingReadAccessTo: Uri.file(fontFilePath.path),
),
),
initialData: InAppWebViewInitialData(data: htmlContent),
);
Using the above code snippet, it will work perfectly fine in Android but not on iOS