Bonsoir à tous,
 
j’ai créé mon site en html5 et css3 que voici :
 
www.lucie-bodin.fr
 
Sur écran de bureau, il s’affiche comme je veux, mais sur tablettes et mobiles, c’est la catastrophe, et ce pour plusieurs raisons !
 
Dans ce post, je souhaite aborder le problème d’affichage de police de texte.
 
Mon texte courant est en “Arial” et mes titres et boutons en “Arial Black”. L’Arial Black ne s’affiche pas sur les tablettes et mobiles, et laisse place à une police qui ressemble parfois à de la “Times”, parfois à de la “Verdana”. Ce qui rend un résultat bien moche !
 
Ce problème arrive sur tous les navigateurs.
 
Je ne comprends pas d’où vient le problème, alors que pour le texte en Arial, tout va bien !
 
Mon code, mis à chaque class et div correspondante :
font-family: arial black;
 
Merci de votre aide !

Hello,
 
Le problème vient du fait que tes devices tablettes/mobiles ne connaissent pas l'arial. Par exemple, sur iOs c'est l'Helvetica.
Il faudrait que pour ces devices là, que tu indiques que tu veuilles de l'helvetica.
Pour ce faire tu mets l'hevetica en deuxième position dans ton css, comme ça, ceux qui n'ont pas l'arial afficheront l'helvetica.
 
font-family: arial black, Helvetica Black, Helvetica, sans-serif;
 
Je ne sais pas si l'Helvetica Black est une font standard, alors j'ai mis Helvetica en 3ème.

L'idee ne serait-il pas de telecharger la police au moment de l'affichage de la page web ?
Il me semble que Google propose des fontes gratuites pour l'utilisation dans les sites web...
https://developers.google.com/fonts/

Hé hé Contraryweb aussi ?
Le post d'athenaa est pertinent, elle a raison.
 
En web y'a deux moyens pour les polices :  
1- soit — à l'ancienne, elle sont liées via le css : un dossier police au même niveau avec les variantes woff, svg, ttf et eot pour les différents navigateurs,
cette solution aurait pu solutionner le souci de Lucie je pense. Fontsquirrel est bien pratique pour ça.
2- soit — et c'est moins chiant niveau code, de l'import avec Googlefont avec le lien prêt à être copié-collé dans le css, genre :
@import url('https://fonts.googleapis.com/css?family=xxxxxx:400,700');
xxxxxx correspondant à la police choisi et les chiffrages "400,700" aux graisses dispos/choisies.
 
Par contre là ou le code de Lucie n'est pas clair (je ne l'ai pas retrouvé, elle a 10 feuilles css, pas fouillé),
c'est que si elle termine par sans-serif (exemple d'athenaa) :
font-family: arial black, Helvetica Black, Helvetica, sans-serif;  
 
Je me demande comment elle peut récupérer des serif comme du "Times" !    
 
Enfin au niveau de son code, il faut déclarer les polices au niveau body par les balises sémantiques (h1, h2, p, etc.), pas chaque fois au niveau objet (ses div) via des classes,
ça fait du code à rallonge...  
 
Son code est ancien, ses définitions de résolutions (smartphones, tablettes, écrans), via les requêtes media (media queries) sont dépassées.
Elle utilise trop de feuilles de style, là ou 3 suffisent. On construit en mobile first :
< à 481 px (smartphones)
de 481 à 769 px (tabs)
> à 769 px (le reste, écran, etc.).
 
Voilou

Bjr Harry
 
Oh! non le web n'est pas mon domaine.. je fais du print a 98%...
 
C'est quand j'ai refais mon site web et que j'ai utilise un template gratuit que j'ai remarque que les fontes etaient telechargees car celles qui etaient utilisees n'etaient pas dispo sur ma machine...
 
La facon dont le code a ete ecrit, ca me depasse, je me suis contente d'adapter les pages a mon besoin...

[HS Coucou Contrariness
Oui je sais bien que tu es un "printeux". Print/web ce sont deux boulots carrément différents en plus. /HS]

Bonjour !
 
Merci pour vos réponses !
 
À la place de ce code-ci :
font-family: arial black;
 
j’ai mis celui-là, comme recommandé par athenaa :
font-family:"arial black", "helvetica black", "arial", "sans serif";
 
Pour le moment je n’ai pu tester que sur i-phone, là où il y avait de la Times : la Times a été remplacée par de l’Arial, ce qui a fait moins moche !
 
J’ai aussi ajouté ce code :
font-weight: bold;
pour graisser l’Arial dans mes titres.
 
J’ai trouvé une police plus plaisante sur Fontsquirrel (merci pour le tuyeau, Harrybeau1). Mais je ne vois pas comment l’intégrer dans mon code ! Dois-je inclure le dossier de polices (téléchargé sur Fontsquirrel) dans mon dossier « www » au même niveau que mon dossier css ? Puis écrire un code dans le css permettant de l’activer ? Désolée si ma question est bizarre, moi aussi je suis “printeuse“ à la base !

Bjr Lucie.
Avec Fontsquirrel c'est la méthode "@font-face" !
Voir tuto ici : https://openclassrooms.com/courses/ [...] e-du-texte
 
Perso je préfère les Googlefonts c'est plus simple.
Choisissez une police, sélectionnez-là et ensuite choisissez entre les deux méthodes (standard et @import) recopiez les deux bouts de codes fournis :
 
Standard :
1- Code html à coller dans le head du fichier index.html : <link href="https://fonts.googleapis.com/css?family=mapolice" rel="stylesheet">  
2- Code css à coller dans le fichier style.css : font-family: 'mapolice', sans-serif;
 
 
@import :
1- Code html à coller dans le head du fichier index.html : <style>@import url('https://fonts.googleapis.com/css?family=mapolice');
</style>  
2- Code css à coller dans le fichier style.css : font-family: 'mapolice', sans-serif;
 
Astuce : pour la seconde méthode (@import), virez les balises dépréciées <style> et ne gardez que : @import url('https://fonts.googleapis.com/css?family=mapolice');
Et collez cela directement dans votre css au tout début.

Bonsoir,
 
merci Harrybeau1, ça a marché !
 
J'ai choisi la méthode standard.
 
Bonne soirée et à une prochaine fois !